diff --git a/docs/.vitepress/theme/_overrides.scss b/docs/.vitepress/theme/_overrides.scss index 97b55752b8..92da5974d6 100644 --- a/docs/.vitepress/theme/_overrides.scss +++ b/docs/.vitepress/theme/_overrides.scss @@ -36,4 +36,16 @@ } } } + + .k-alert { + p { + line-height: $kui-line-height-30; // .alert-message line-height + } + } + + .k-empty-state { + p { + line-height: $kui-line-height-30; // .empty-state-message line-height + } + } } diff --git a/docs/components/alert.md b/docs/components/alert.md index e4467527ce..e03cb3c433 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -255,12 +255,3 @@ const showAlert = ref(true) gap: $kui-space-50; } - - diff --git a/docs/components/empty-state.md b/docs/components/empty-state.md index c3ffff595b..3a8a7be4e8 100644 --- a/docs/components/empty-state.md +++ b/docs/components/empty-state.md @@ -319,12 +319,3 @@ const onActionClick = (): void => { alert('Action button clicked!') } - - diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md index 4b4ca74e4a..7684d3952d 100644 --- a/docs/guide/migrating-to-version-9.md +++ b/docs/guide/migrating-to-version-9.md @@ -361,7 +361,7 @@ Component has been renamed to `KDropdown` #### Structure * `k-dropdown-menu` class has been removed (`k-dropdown` class remains) -* `k-dropdown-menu-popover` `data-testid` attribute has been renamed to `k-dropdown-popover` +* `k-dropdown-menu-popover` `data-testid` attribute has been renamed to `dropdown-popover` * `k-dropdown-trigger` class has been removed * `k-dropdown-trigger` `data-testid` attribute has been renamed to `dropdown-trigger` * `k-dropdown-btn` class has been renamed to `dropdown-trigger-button` diff --git a/docs/index.md b/docs/index.md index a7f7f5338c..4d7ab4deee 100644 --- a/docs/index.md +++ b/docs/index.md @@ -38,11 +38,16 @@ features: linkText: View changes --- - diff --git a/sandbox/pages/SandboxAlert.vue b/sandbox/pages/SandboxAlert.vue index 03d6a1bdaf..40e8b29bfc 100644 --- a/sandbox/pages/SandboxAlert.vue +++ b/sandbox/pages/SandboxAlert.vue @@ -4,12 +4,6 @@ title="KAlert" >
- - - Figma - - -
- - - -
- - - Figma - - -
- - - - Figma - -
- - - -
- - -
- - Figma - -
-
- - - - Figma - - -
- - - - Figma - - +
- - - Figma - - -
- - - - Figma - -
- - - Figma - - -
- - - Figma - - -
- - -
- - Figma - -
- -
- -
+
diff --git a/sandbox/pages/SandboxInputSwitch.vue b/sandbox/pages/SandboxInputSwitch.vue index 33c20e8d43..7a7c42915e 100644 --- a/sandbox/pages/SandboxInputSwitch.vue +++ b/sandbox/pages/SandboxInputSwitch.vue @@ -1,24 +1,11 @@ - + @@ -203,12 +202,20 @@ title="selectedItemTemplate" >

Truncation of long content is NOT handled by the component.

@@ -435,5 +442,16 @@ onMounted(() => { font-size: $kui-font-size-20; } } + + .custom-selected-item-container { + display: flex; + justify-content: space-between; + width: 100%; + + .title { + display: flex; + gap: $kui-space-30; + } + } } diff --git a/sandbox/pages/SandboxSkeleton.vue b/sandbox/pages/SandboxSkeleton.vue index 73367294bb..2facdb4292 100644 --- a/sandbox/pages/SandboxSkeleton.vue +++ b/sandbox/pages/SandboxSkeleton.vue @@ -4,12 +4,6 @@ title="KSkeleton" >
- - - Figma - - - diff --git a/sandbox/pages/SandboxSlideout.vue b/sandbox/pages/SandboxSlideout.vue index 2478caeaa5..47928329b3 100644 --- a/sandbox/pages/SandboxSlideout.vue +++ b/sandbox/pages/SandboxSlideout.vue @@ -4,12 +4,6 @@ title="KSlideout" >
- - - Figma - - -
- - - Figma - - -
- - - Figma - - -
- - - Figma - - -
- - - - Figma - -
- - - Figma - - -
- - - Figma - - - { cy.getTestId('dropdown-trigger').click({ force: true }) - cy.get('.k-dropdown-popover .popover-container').invoke('width').should('eq', width) + cy.get('.dropdown-popover .popover-container').invoke('width').should('eq', width) }) it('renders disabled props when passed', () => { @@ -119,7 +119,7 @@ describe('KDropdown', () => { cy.getTestId('dropdown-list').should('be.visible') cy.getTestId('dropdown-trigger').should('contain.html', triggerSlotContent) - cy.get('.k-dropdown-popover').should('contain.html', itemSlotContent) + cy.get('.dropdown-popover').should('contain.html', itemSlotContent) }) it('correctly renders all item types and dividers', () => { diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue index fc204661dd..499acc2f1a 100644 --- a/src/components/KDropdown/KDropdown.vue +++ b/src/components/KDropdown/KDropdown.vue @@ -8,7 +8,7 @@ ref="kPop" v-bind="boundKPopAttributes" close-on-popover-click - data-testid="k-dropdown-popover" + data-testid="dropdown-popover" hide-close-icon @close="() => handleTriggerToggle(isToggled, toggle, false)" @open="() => handleTriggerToggle(isToggled, toggle, true)" @@ -160,7 +160,7 @@ const tooltipComponent = computed(() => props.disabledTooltip ? KTooltip : 'div' const kPop = ref | null>(null) const defaultKPopAttributes = { hideCaret: true, - popoverClasses: 'k-dropdown-popover', + popoverClasses: 'dropdown-popover', popoverTimeout: 0, placement: 'bottom-start' as PopPlacements, } @@ -223,7 +223,7 @@ onMounted(() => { width: 100%; } - :deep(.popover.k-dropdown-popover > .popover-container) { + :deep(.popover.dropdown-popover > .popover-container) { border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border); border-radius: var(--kui-border-radius-30, $kui-border-radius-30); margin-top: var(--kui-space-30, $kui-space-30); diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue index 131f7ebc24..52e14aa60e 100644 --- a/src/components/KSelect/KSelect.vue +++ b/src/components/KSelect/KSelect.vue @@ -738,6 +738,8 @@ $kSelectInputHelpTextHeight: calc(var(--kui-line-height-20, $kui-line-height-20) box-sizing: border-box; inset: 0; margin-left: $kSelectInputPaddingX; + // accommodate for the caret + max-width: calc(v-bind('actualElementWidth') - $kSelectInputPaddingX - $kSelectInputIconSize - ($kSelectInputSlotSpacing * 2)); overflow: hidden; padding: var(--kui-space-0, $kui-space-0); // override mixin pointer-events: none; @@ -752,8 +754,8 @@ $kSelectInputHelpTextHeight: calc(var(--kui-line-height-20, $kui-line-height-20) } &.clearable { - // accommodate for the clear icon - max-width: calc(v-bind('actualElementWidth') - ($kSelectInputPaddingX * 2) - ($kSelectInputIconSize * 2) - ($kSelectInputSlotSpacing * 2)); + // accommodate for the clear icon and caret + max-width: calc(v-bind('actualElementWidth') - ($kSelectInputPaddingX * 2) - ($kSelectInputIconSize * 2) - $kSelectInputSlotSpacing); } }