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
}