fix(kpagination): theming [KHCP-3431] (#599)

* fix(kpagination): theming

* fix(kselect): display

TEMP-MIGRATION-CHANGELOG.md

@@ -106,6 +106,20 @@ export default defineConfig({
 
 - Added `autcomplete="off"` and `autocapitalize="off"` to the confirmation text input.
 
+### KPagination
+
+- Added new CSS theming variables
+
+    | Variable | Purpose
+    |:-------- |:-------
+    | `--KPaginationColor`| KPagination button text color
+    | `--KPaginationBackgroundColor`| KPagination button background color
+    | `--KPaginationBorderColor`| KPagination button border color
+    | `--KPaginationPageSizeColor`| KPagination page size button text color
+    | `--KPaginationActiveColor`| KPagination active button text color
+    | `--KPaginationActiveBackgroundColor`| KPagination active button background color
+    | `--KPaginationActiveBorderColor`| KPagination active button border color
+    | `--KPaginationDisabledColor`| KPagination disabled button text color
 ### KTabs
 
 - `v-model` is now mapped to `modelValue` prop instead of `value` prop.

docs/components/pagination.md

@@ -275,32 +275,54 @@ export default defineComponent({
 
 | Variable | Purpose
 |:-------- |:-------
-| `--KPaginationBorderColor`| KPagination border color
+| `--KPaginationColor`| KPagination button text color
+| `--KPaginationBackgroundColor`| KPagination button background color
+| `--KPaginationBorderColor`| KPagination button border color
+| `--KPaginationPageSizeColor`| KPagination page size button text color
+| `--KPaginationActiveColor`| KPagination active button text color
+| `--KPaginationActiveBackgroundColor`| KPagination active button background color
+| `--KPaginationActiveBorderColor`| KPagination active button border color
+| `--KPaginationDisabledColor`| KPagination disabled button text color
+
 
 An Example of changing the border color of KPagination to lime might look like:
 
 > Note: We are scoping the overrides to a wrapper in this example
 
 <div class="KPagination-wrapper">
-  <KPagination />
+  <KPagination :totalCount="100" :pageSizes="[10, 20, 30, 40]"/>
 </div>
 
 ```vue
 <template>
   <div class="KPagination-wrapper">
-    <KPagination />
+    <KPagination :totalCount="100" :pageSizes="[10, 20, 30, 40]"/>
   </div>
 </template>
 
 <style>
 .KPagination-wrapper {
-  --KPagination-wrapperBorderColor: lime;
+  --KPaginationColor: black;
+  --KPaginationBackgroundColor: lightgreen;
+  --KPaginationBorderColor: black;
+  --KPaginationPageSizeColor: red;
+  --KPaginationActiveColor: purple;
+  --KPaginationActiveBackgroundColor: violet;
+  --KPaginationActiveBorderColor: purple;
+  --KPaginationDisabledColor: darkgrey;
 }
 </style>
 ```
 
 <style lang="scss">
 .KPagination-wrapper {
-  --KPagination-wrapperBorderColor: lime;
+  --KPaginationColor: black;
+  --KPaginationBackgroundColor: lightgreen;
+  --KPaginationBorderColor: black;
+  --KPaginationPageSizeColor: red;
+  --KPaginationActiveColor: purple;
+  --KPaginationActiveBackgroundColor: violet;
+  --KPaginationActiveBorderColor: purple;
+  --KPaginationDisabledColor: darkgrey;
 }
 </style>

src/components/KButton/KButton.vue

@@ -369,7 +369,7 @@ export default defineComponent({
       text-decoration: underline;
     }
     &:focus {
-      @include boxShadow(var(--blue-500, color(blue-500)), 0, 2px);
+      @include boxShadow(var(--KButtonOutlineBorder, var(--blue-500, color(blue-500))), 0, 2px);
     }
     &:disabled,
     &[disabled] {

src/components/KCard/KCard.vue

@@ -136,8 +136,8 @@ export default defineComponent({
   },
 
   setup(props, { slots }) {
-    const titleId = computed((): string => props.testMode ? uuidv1() : 'test-title-id-1234')
-    const contentId = computed((): string => props.testMode ? uuidv1() : 'test-content-id-1234')
+    const titleId = computed((): string => props.testMode ? 'test-title-id-1234' : uuidv1())
+    const contentId = computed((): string => props.testMode ? 'test-content-id-1234' : uuidv1())
     const useStatusHatLayout = computed((): boolean => {
       return !!(props.status || !!slots.statusHat)
     })

src/components/KInput/KInput.vue

@@ -152,7 +152,7 @@ export default defineComponent({
     const isFocused = ref(false)
     const isHovered = ref(false)
     const isDisabled = computed((): boolean => !!attrs?.disabled)
-    const inputId = computed((): string => attrs.id ? String(attrs.id) : !props.testMode ? uuidv1() : 'test-input-id-1234')
+    const inputId = computed((): string => attrs.id ? String(attrs.id) : props.testMode ? 'test-input-id-1234' : uuidv1())
 
     const modifiedAttrs = computed(() => {
       const $attrs = { ...attrs }

src/components/KMenu/KMenuItem.vue

@@ -98,7 +98,7 @@ export default defineComponent({
   emits: ['clicked'],
   setup(props, { emit, slots }) {
     const isOpen = ref(false)
-    const menuItemId = computed((): string => !props.testMode ? uuidv1() : 'test-menuitem-id-1234')
+    const menuItemId = computed((): string => props.testMode ? 'test-menuitem-id-1234' : uuidv1())
 
     const toggleMenuItem = (): void => {
       if (props.expandable) {

src/components/KPagination/KPagination.vue

@@ -23,7 +23,7 @@
             @click.prevent="pageBack"
           >
             <KIcon
-              :color="backDisabled ? 'var(--grey-500)' : 'var(--blue-400)'"
+              :color="backDisabled ? 'var(--KPaginationDisabledColor, var(--grey-500))' : 'var(--KPaginationColor, var(--blue-400))'"
               icon="arrowLeft"
               size="16"
               view-box="0 0 16 14"
@@ -89,7 +89,7 @@
             @click.prevent="pageForward"
           >
             <KIcon
-              :color="forwardDisabled ? 'var(--grey-500)' : 'var(--blue-400)'"
+              :color="forwardDisabled ? 'var(--KPaginationDisabledColor, var(--grey-500))' : 'var(--KPaginationColor, var(--blue-400))'"
               icon="arrowRight"
               size="16"
               view-box="0 0 16 14"
@@ -342,8 +342,9 @@ export default defineComponent({
 }
 
 .page-size-select {
+  --KButtonBtnLink: var(--KPaginationPageSizeColor, var(--blue-400));
+  --KButtonOutlineBorder: var(--KPaginationPageSizeColor, var(--blue-400));
   --KButtonFontSize: var(--type-sm);
-  color: var(--blue-400);
   font-weight: 500;
   line-height: 20px;
 }
@@ -366,32 +367,49 @@ export default defineComponent({
     line-height: 20px;
     font-size: 12px;
     font-weight: initial;
-    color: var(--grey-500);
-    border: 1px solid var(--grey-300);
-    background-color: white;
+    color: var(--KPaginationColor, var(--grey-500));
+    border: 1px solid var(--KPaginationBorderColor, var(--grey-300));
     border-radius: 4px;
     margin: 0 6px;
     cursor: pointer;
 
+    &:not(.square) {
+      background-color: var(--KPaginationBackgroundColor, white);
+    }
+
     a {
       padding: 6px;
     }
 
+    &:not(.active) a {
+      color: var(--KPaginationColor, var(--grey-500));
+    }
+
     &.square {
       border: none;
     }
 
     &.placeholder {
+      color: var(--KPaginationColor, var(--grey-500));
+      display: flex;
+      justify-content: center;
+      align-items: center;
       cursor: initial;
     }
 
     &:focus:not(.placeholder),
     &:hover:not(.placeholder) {
-      color: var(--blue-500);
-      border-color: var(--blue-500);
+      color: var(--KPaginationActiveColor, var(--blue-500));
+      border-color: var(--KPaginationActiveColor, var(--blue-500));
       border-radius: 4px;
     }
 
+    &.disabled {
+      a {
+        cursor: not-allowed !important;
+      }
+    }
+
     &.disabled:focus:not(.placeholder),
     &.disabled:hover:not(.placeholder) {
       color: var(--black-45);
@@ -400,10 +418,14 @@ export default defineComponent({
 
     &.active {
       outline: none;
-      color: var(--blue-500);
-      border-color: var(--blue-200);
+      color: var(--KPaginationActiveColor, var(--blue-500));
+      border-color: var(--KPaginationActiveBorderColor, var(--blue-200));
+      background-color: var(--KPaginationActiveBackgroundColor, var(--blue-100));
       border-radius: 4px;
-      background-color: var(--blue-100);
+
+      a {
+        color: var(--KPaginationActiveColor, var(--blue-500));
+      }
     }
   }
 }

src/components/KSelect/KSelect.vue

@@ -73,7 +73,7 @@
               :is-rounded="false"
               v-bind="$attrs"
               appearance="btn-link"
-              @keyup="triggerFocus(isToggled.value)"
+              @keyup="evt => triggerFocus(evt, isToggled)"
             >
               {{ selectButtonText }}
             </KButton>
@@ -101,7 +101,7 @@
               class="k-select-input"
               autocomplete="off"
               autocapitalize="off"
-              @keyup="triggerFocus(isToggled.value)"
+              @keyup="evt => triggerFocus(evt, isToggled)"
             />
           </div>
           <template #content>
@@ -267,9 +267,9 @@ export default defineComponent({
   setup(props, { attrs, emit }) {
     const filterStr = ref('')
     const selectedItem = ref<SelectItem|null>(null)
-    const selectId = computed((): string => props.testMode ? uuidv1() : 'test-select-id-1234')
-    const selectInputId = computed((): string => props.testMode ? uuidv1() : 'test-select-input-id-1234')
-    const selectTextId = computed((): string => props.testMode ? uuidv1() : 'test-select-text-id-1234')
+    const selectId = computed((): string => props.testMode ? 'test-select-id-1234' : uuidv1())
+    const selectInputId = computed((): string => props.testMode ? 'test-select-input-id-1234' : uuidv1())
+    const selectTextId = computed((): string => props.testMode ? 'test-select-text-id-1234' : uuidv1())
     const selectItems: Ref<SelectItem[]> = ref([])
 
     const widthValue = computed(() => {
@@ -358,9 +358,15 @@ export default defineComponent({
       emit('update:modelValue', null)
     }
 
-    const triggerFocus = (isToggled: boolean):void => {
+    const triggerFocus = (evt: any, isToggled: Ref<boolean>):void => {
+      // Ignore `esc` key
+      if (evt.keyCode === 27) {
+        isToggled.value = false
+        return
+      }
+
       const inputElem = document.getElementById(selectTextId.value)
-      if (!isToggled && inputElem) { // simulate click to trigger dropdown open
+      if (!isToggled.value && inputElem) { // simulate click to trigger dropdown open
         inputElem.click()
       }
     }

src/components/KSelect/KSelectItem.vue

@@ -107,6 +107,7 @@ export default defineComponent({
       .kong-icon {
         position: relative;
         top: 0;
+        transform: none;
       }
     }
 

src/components/KTable/KTable.vue

@@ -492,7 +492,7 @@ export default defineComponent({
   },
   emits: ['sort', 'ktable-error-cta-clicked', 'ktable-empty-state-cta-clicked'],
   setup(props, { attrs }) {
-    const tableId = computed((): string => props.testMode ? uuidv1() : 'test-table-id-1234')
+    const tableId = computed((): string => props.testMode ? 'test-table-id-1234' : uuidv1())
     const defaultFetcherProps = {
       pageSize: 15,
       page: 1,

src/components/KTextArea/KTextArea.vue

@@ -131,7 +131,7 @@ export default defineComponent({
     const isFocused = ref(false)
     const isHovered = ref(false)
 
-    const textAreaId = computed((): string => (attrs.id ? String(attrs.id) : !props.testMode ? uuidv1() : 'test-textArea-id-1234'))
+    const textAreaId = computed((): string => (attrs.id ? String(attrs.id) : props.testMode ? 'test-textArea-id-1234' : uuidv1()))
 
     const charLimitExceeded = computed((): boolean => !props.disableCharacterLimit && currValue.value.length > props.characterLimit)