fix(ktoaster): deprecate zindex prop, set z-index on toaster container

sandbox/pages/SandboxToaster.vue

@@ -4,6 +4,8 @@
     title="KToaster"
   >
     <div class="ktoaster-sandbox">
+      <div class="toast-overlay" />
+
       <!-- Props -->
       <SandboxTitleComponent
         is-subtitle
@@ -152,7 +154,7 @@ const openToaster = (argument: string) => {
         title: 'Timeout',
         message: 'This is toaster with timeout (10s)',
         appearance: 'info',
-        timeoutMilliseconds: 10000,
+        timeoutMilliseconds: 1000000,
       }
       break
   }
@@ -168,10 +170,23 @@ const multipleToastersHandler = () => {
 
 <style lang="scss" scoped>
 .ktoaster-sandbox {
+  height: 100%;
+  position: relative;
+
   .horizontal-container {
     display: flex;
     flex-wrap: wrap;
     gap: $kui-space-50;
   }
+
+  .toast-overlay {
+    background-color: red;
+    bottom: 16px;
+    height: 100px;
+    position: absolute;
+    right: 16px;
+    width: 200px;
+    z-index: 2;
+  }
 }
 </style>

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)

src/components/KToaster/KToaster.vue

@@ -58,7 +58,6 @@ type ToastIcon = typeof InfoIcon | typeof CheckCircleIcon | typeof WarningIcon |
 
 const {
   toasterState = [],
-  zIndex = 10000,
 } = defineProps<ToasterProps>()
 
 const emit = defineEmits<ToasterEmits>()
@@ -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;

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()
+  })
 })

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),
     })
 

src/types/toaster.ts

@@ -33,8 +33,7 @@ export interface ToasterProps {
   toasterState: Array<Toast & { key: string }>
 
   /**
-   * 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
 }