diff --git a/sandbox/pages/SandboxToaster.vue b/sandbox/pages/SandboxToaster.vue index 18f1e225d4..0fe62edd1d 100644 --- a/sandbox/pages/SandboxToaster.vue +++ b/sandbox/pages/SandboxToaster.vue @@ -4,6 +4,8 @@ title="KToaster" >
+
+ { title: 'Timeout', message: 'This is toaster with timeout (10s)', appearance: 'info', - timeoutMilliseconds: 10000, + timeoutMilliseconds: 1000000, } break } @@ -168,10 +170,23 @@ const multipleToastersHandler = () => { diff --git a/src/components/KToaster/KToaster.cy.ts b/src/components/KToaster/KToaster.cy.ts index 2bf5d1d28e..9a143388b8 100644 --- a/src/components/KToaster/KToaster.cy.ts +++ b/src/components/KToaster/KToaster.cy.ts @@ -1,5 +1,7 @@ import KToaster from '@/components/KToaster/KToaster.vue' +const toastersContainerId = 'kongponents-toaster-container' + describe('KToaster', () => { it('renders toaster', () => { const toasts = [] @@ -50,29 +52,6 @@ describe('KToaster', () => { cy.get('.toaster .toaster-close-icon').should('be.visible') }) - it('renders toast with correct default z-index', () => { - - cy.mount(KToaster, { - props: { - toasterState: [{ title: 'I have a toast' }], - }, - }) - - cy.get('.k-toaster').should('have.css', 'z-index', '10000') - }) - - it('renders toast with custom z-index', () => { - cy.mount(KToaster, { - props: { - toasterState: [{ title: 'I have a toast' }], - zIndex: 9999, - }, - }) - - cy.get('.k-toaster').should('have.css', 'z-index', '9999') - }) - - it('shows close button even if content is long', () => { const longTitle = 'title'.repeat(20) const longMessage = 'message'.repeat(20) diff --git a/src/components/KToaster/KToaster.vue b/src/components/KToaster/KToaster.vue index e9b6a236af..06d8cab5ab 100644 --- a/src/components/KToaster/KToaster.vue +++ b/src/components/KToaster/KToaster.vue @@ -58,7 +58,6 @@ type ToastIcon = typeof InfoIcon | typeof CheckCircleIcon | typeof WarningIcon | const { toasterState = [], - zIndex = 10000, } = defineProps() const emit = defineEmits() @@ -120,7 +119,6 @@ const getToastIcon = (appearance?: ToasterAppearance): ToastIcon => { display: flex; flex-direction: column; gap: var(--kui-space-50, $kui-space-50); - z-index: v-bind('zIndex'); .toaster { align-items: flex-start; diff --git a/src/components/KToaster/ToastManager.cy.ts b/src/components/KToaster/ToastManager.cy.ts index df12eddabb..1469198030 100644 --- a/src/components/KToaster/ToastManager.cy.ts +++ b/src/components/KToaster/ToastManager.cy.ts @@ -95,4 +95,23 @@ describe('ToastManager', () => { toastManager2.destroy() toastManager3.destroy() }) + + it('creates toasters container with correct default z-index', () => { + const toastManager = new ToastManager() + const container = document.getElementById(toastersContainerId) + expect(container).to.have.css('z-index', '10000') + + // Cleanup + toastManager.destroy() + }) + + it('creates toasters container with correct z-index when provided', () => { + const zIndex = 9999 + const toastManager = new ToastManager({ zIndex }) + const container = document.getElementById(toastersContainerId) + expect(container).to.have.css('z-index', String(zIndex)) + + // Cleanup + toastManager.destroy() + }) }) diff --git a/src/components/KToaster/ToastManager.ts b/src/components/KToaster/ToastManager.ts index b0eef7b89e..346ff3d9f1 100644 --- a/src/components/KToaster/ToastManager.ts +++ b/src/components/KToaster/ToastManager.ts @@ -20,13 +20,14 @@ const defaultZIndex = 10000 * Get or create the shared toaster container element. * Increments the reference count for tracking active instances. */ -function getOrCreateSharedContainer(): HTMLElement { +function getOrCreateSharedContainer(zIndex: number): HTMLElement { let container = document.getElementById(toasterContainerId) if (!container) { container = document.createElement('div') container.id = toasterContainerId container.setAttribute(containerInstanceCountAttribute, '0') + container.style.zIndex = String(zIndex) document.body.appendChild(container) } @@ -73,7 +74,8 @@ export default class ToastManager { } // Get or create the shared container - this.sharedContainer = getOrCreateSharedContainer() + const zIndex = options?.zIndex ? options.zIndex : defaultZIndex + this.sharedContainer = getOrCreateSharedContainer(zIndex) // Create this instance's wrapper div this.instanceWrapper = document.createElement('div') @@ -83,7 +85,6 @@ export default class ToastManager { // Create the KToaster VNode this.toaster = createVNode(KToaster, { toasterState: this.toasts.value, - zIndex: options?.zIndex ? options.zIndex : defaultZIndex, onClose: (key: string) => this.close(key), }) diff --git a/src/types/toaster.ts b/src/types/toaster.ts index 45386c1c79..e635dfa2da 100644 --- a/src/types/toaster.ts +++ b/src/types/toaster.ts @@ -33,8 +33,7 @@ export interface ToasterProps { toasterState: Array /** - * The z-index of the toaster. - * @default 10000 + * @deprecated zIndex provided through ToasterOptions is set on the shared container on initialization. This prop is no longer used. */ zIndex?: number }