From b9adcded1e016e19ecbc8434c19c66abca085f44 Mon Sep 17 00:00:00 2001
From: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
Date: Wed, 20 Apr 2022 11:57:24 -0400
Subject: [PATCH] fix(kpagination): theming [KHCP-3431] (#599)
* fix(kpagination): theming
* fix(kselect): display
---
TEMP-MIGRATION-CHANGELOG.md | 14 +++++++
docs/components/pagination.md | 32 +++++++++++++---
src/components/KButton/KButton.vue | 2 +-
src/components/KCard/KCard.vue | 4 +-
src/components/KInput/KInput.vue | 2 +-
src/components/KMenu/KMenuItem.vue | 2 +-
src/components/KPagination/KPagination.vue | 44 ++++++++++++++++------
src/components/KSelect/KSelect.vue | 20 ++++++----
src/components/KSelect/KSelectItem.vue | 1 +
src/components/KTable/KTable.vue | 2 +-
src/components/KTextArea/KTextArea.vue | 2 +-
11 files changed, 95 insertions(+), 30 deletions(-)
diff --git a/TEMP-MIGRATION-CHANGELOG.md b/TEMP-MIGRATION-CHANGELOG.md
index 660922a977..4ca5486fd8 100644
--- a/TEMP-MIGRATION-CHANGELOG.md
+++ b/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.
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index c429229fdd..59226797b2 100644
--- a/docs/components/pagination.md
+++ b/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
```vue
```
diff --git a/src/components/KButton/KButton.vue b/src/components/KButton/KButton.vue
index a31e8fed94..6abef516f1 100644
--- a/src/components/KButton/KButton.vue
+++ b/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] {
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index 34468d2d5d..b85f57f39c 100644
--- a/src/components/KCard/KCard.vue
+++ b/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)
})
diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
index b8403b3775..045c5498dd 100644
--- a/src/components/KInput/KInput.vue
+++ b/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 }
diff --git a/src/components/KMenu/KMenuItem.vue b/src/components/KMenu/KMenuItem.vue
index 631adcd355..cac32951e4 100644
--- a/src/components/KMenu/KMenuItem.vue
+++ b/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) {
diff --git a/src/components/KPagination/KPagination.vue b/src/components/KPagination/KPagination.vue
index a3621e342b..7ce579a3e3 100644
--- a/src/components/KPagination/KPagination.vue
+++ b/src/components/KPagination/KPagination.vue
@@ -23,7 +23,7 @@
@click.prevent="pageBack"
>
triggerFocus(evt, isToggled)"
>
{{ selectButtonText }}
@@ -101,7 +101,7 @@
class="k-select-input"
autocomplete="off"
autocapitalize="off"
- @keyup="triggerFocus(isToggled.value)"
+ @keyup="evt => triggerFocus(evt, isToggled)"
/>
@@ -267,9 +267,9 @@ export default defineComponent({
setup(props, { attrs, emit }) {
const filterStr = ref('')
const selectedItem = ref(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 = 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):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()
}
}
diff --git a/src/components/KSelect/KSelectItem.vue b/src/components/KSelect/KSelectItem.vue
index fc9391bcf6..aaa08df9cb 100644
--- a/src/components/KSelect/KSelectItem.vue
+++ b/src/components/KSelect/KSelectItem.vue
@@ -107,6 +107,7 @@ export default defineComponent({
.kong-icon {
position: relative;
top: 0;
+ transform: none;
}
}
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 0f205e3335..1e789095ca 100644
--- a/src/components/KTable/KTable.vue
+++ b/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,
diff --git a/src/components/KTextArea/KTextArea.vue b/src/components/KTextArea/KTextArea.vue
index ebf23a88b7..fb527f0d8a 100644
--- a/src/components/KTextArea/KTextArea.vue
+++ b/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)