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" > {{ selectButtonText }} @@ -101,7 +101,7 @@ class="k-select-input" autocomplete="off" autocapitalize="off" - @keyup="triggerFocus(isToggled.value)" + @keyup="evt => triggerFocus(evt, isToggled)" />