feat: add zIndex prop to overlaying components [KHCP-10747] (#2130)

* feat: add zIndex prop to verlaying components

* feat: add zIndex as an arg to fullScreenLoadingContainer mixin & usage

* test: add tests for zIndex prop to overlay components

* docs: add docs for zIndex prop to overlay components

* feat(ToastManger): add support for custom zIndex during toaster init

* refactor(ToastManager): use an object to pass args to ToastManager during init

* chore: single quote wrap zIndex prop passed to v-bind in CSS

docs/components/modal.md

@@ -352,6 +352,20 @@ Maximum height of the content area. When content overflows, content area becomes
 </KModal>
 ```
 
+### zIndex
+
+`z-index` value for the modal. Defaults to `1100`.
+
+```html
+<KModal
+  z-index="9999"
+  title="Modal"
+  :visible="modalVisible"
+  @cancel="handleModalClose"
+  @proceed="handleModalProceed"
+/>
+```
+
 ### fullScreen
 
 Use this prop to make modal window take up almost the whole screen. When set to `true`, `maxWidth` and `maxHeight` props will have no effect.

docs/components/popover.md

@@ -322,6 +322,19 @@ The max width of the popover body - by default it is `auto`.
 </KPop>
 ```
 
+### zIndex
+
+The `z-index` of the popover - by default it is `1000`.
+
+```html
+<KPop title="Cool header" z-index="9999">
+  <KButton>button</KButton>
+  <template v-slot:content>
+    I have a z-index of 9999! I have a z-index of 9999!
+  </template>
+</KPop>
+```
+
 ### popoverClasses
 
 Custom classes that you want to append to the popover - by default it has a `k-popover` class on it.

docs/components/skeleton.md

@@ -140,6 +140,10 @@ Used for controlling the progress indicator.
 
 Defaults to `false`, you can use this prop to hide the progress indicator.
 
+### zIndex
+
+Defaults to `10500`, you can use this prop to control the `z-index` value of the full-screen skeleton container
+
 <div class="horizontal-spacing-container">
   <KButton @click="onClickNoProgress">Click for no progress indicator</KButton>
   <KButton @click="onClick">Click for default progress behavior</KButton>

docs/components/slideout.md

@@ -256,6 +256,19 @@ Controls width of the slideout content area. Default value is `500px`.
 />
 ```
 
+### zIndex
+
+Controls `z-index` of the slideout content area. Default value is `9999`.
+
+```html
+<KSlideout
+  z-index="92929"
+  title="Very high z-index"
+  :visible="slideoutVisible"
+  @close="hideSlideout"
+/>
+```
+
 ## Slots
 
 ### default

docs/components/toaster.md

@@ -13,7 +13,13 @@ import { ToastManager } from '@kong/kongponents'
 const app = createApp()
 
 // Available inside any component template in the application, and also on 'this' of any component instance
-app.config.globalProperties.$toaster = new ToastManager()
+app.config.globalProperties.$toaster = new ToastManager({
+  // you can also override the default value of following properties while initializing ToastManager
+  id: 'custom-id', // default: 'toaster-container'
+  timeout: 500, // default: 5000
+  appearance: 'success', // default: 'info'
+  zIndex: 92929, // default: 10000
+})
 ```
 
 For TypeScript, you should also augment the global property in your vue declaration file

src/components/KModal/KModal.cy.ts

@@ -223,6 +223,31 @@ describe('KModal', () => {
     cy.get('.k-modal .modal-backdrop.modal-full-screen').should('be.visible')
   })
 
+  it('renders modal with correct zIndex when prop is passed', () => {
+
+    mount(KModal, {
+      props: {
+        visible: true,
+        zIndex: 1200,
+      },
+    })
+
+    // cypress only allows assertion with strings in CSS assertions
+    // https://github.com/cypress-io/cypress/blob/0e1a49dc461a670a3a1dd9a6e139eeb2f00c7c46/cli/types/cypress.d.ts#L5632
+    cy.get('.k-modal .modal-backdrop').should('have.css', 'z-index', '1200')
+  })
+
+  it('renders modal with correct default zIndex when prop is not passed', () => {
+
+    mount(KModal, {
+      props: {
+        visible: true,
+      },
+    })
+
+    cy.get('.k-modal .modal-backdrop').should('have.css', 'z-index', '1100') // default z-index
+  })
+
   it('emits proceed event when action button is clicked', () => {
     mount(KModal, {
       props: {

src/components/KModal/KModal.vue

@@ -170,6 +170,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  zIndex: {
+    type: Number,
+    default: 1100,
+  },
 })
 
 const emit = defineEmits<{
@@ -299,7 +303,7 @@ onBeforeUnmount(async () => {
     justify-content: center;
     padding: var(--kui-space-70, $kui-space-70) var(--kui-space-50, $kui-space-50) var(--kui-space-0, $kui-space-0) var(--kui-space-50, $kui-space-50);
     position: fixed;
-    z-index: 1100;
+    z-index: v-bind('zIndex');
 
     @media (min-width: $kui-breakpoint-phablet) {
       padding-top: var(--kui-space-110, $kui-space-110);

src/components/KPop/KPop.cy.ts

@@ -118,4 +118,20 @@ describe('KPop', () => {
     cy.get('.slottedEl').trigger('mouseenter')
     cy.get('.k-popover').should('be.visible')
   })
+
+  it('renders with correct default zIndex', () => {
+    mount(KPop)
+
+    cy.get('.k-popover').should('have.css', 'z-index', '1000')
+  })
+
+  it('renders with custom zIndex', () => {
+    mount(KPop, {
+      props: {
+        zIndex: 2200,
+      },
+    })
+
+    cy.get('.k-popover').should('have.css', 'z-index', '2200')
+  })
 })

src/components/KPop/KPop.vue

@@ -268,6 +268,13 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /**
+     * z-index - to control z-index value of the popover
+     */
+    zIndex: {
+      type: Number,
+      default: 1000,
+    },
   },
   emits: ['opened', 'closed'],
   data() {
@@ -459,7 +466,7 @@ export default defineComponent({
   padding: var(--kui-space-80, $kui-space-80) var(--kui-space-60, $kui-space-60);
   text-align: left;
   white-space: normal;
-  z-index: 1000;
+  z-index: v-bind('zIndex');
 
   // Prevent Vue animation classes from impacting the positioning of the popover
   &.fade-enter-active,

src/components/KSkeleton/FullScreenGenericSpinner.vue

@@ -34,6 +34,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  zIndex: {
+    type: Number,
+    default: 10500,
+  },
 })
 
 const timer = ref(0)
@@ -61,7 +65,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .fullscreen-loading-container {
-  @include fullScreenLoadingContainer;
+  @include fullScreenLoadingContainer(v-bind('zIndex'));
 
   .progress {
     @include fullScreenLoadingProgressBar;

src/components/KSkeleton/FullScreenKongSkeleton.vue

@@ -36,6 +36,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  zIndex: {
+    type: Number,
+    default: 10500,
+  },
 })
 
 const timer = ref(0)
@@ -64,7 +68,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .fullscreen-loading-container {
-  @include fullScreenLoadingContainer;
+  @include fullScreenLoadingContainer(v-bind('zIndex'));
 
   .progress {
     @include fullScreenLoadingProgressBar;

src/components/KSkeleton/KSkeleton.cy.ts

@@ -65,6 +65,19 @@ describe('KSkeleton', () => {
       cy.get('[role="progressbar"]').should('be.visible')
     })
 
+    it('renders full screen loader with custom zIndex', () => {
+      mount(KSkeleton, {
+        props: {
+          type: 'fullscreen-kong',
+          zIndex: 12000,
+        },
+      })
+
+      cy.getTestId('full-screen-loader').should('be.visible')
+
+      cy.get('.k-skeleton .fullscreen-loading-container').should('have.css', 'z-index', '12000')
+    })
+
     it('renders full screen generic loader with progress bar', () => {
       mount(KSkeleton, {
         props: {
@@ -76,5 +89,19 @@ describe('KSkeleton', () => {
 
       cy.get('[role="progressbar"]').should('be.visible')
     })
+
+    it('renders full screen generic loader with custom zIndex', () => {
+      mount(KSkeleton, {
+        props: {
+          type: 'fullscreen-generic',
+          zIndex: 12000,
+        },
+      })
+
+      cy.getTestId('full-screen-spinner-loader').should('be.visible')
+
+      cy.get('.k-skeleton .fullscreen-loading-container').should('have.css', 'z-index', '12000')
+
+    })
   })
 })

src/components/KSkeleton/KSkeleton.vue

@@ -36,12 +36,14 @@
       v-else-if="type === 'fullscreen-kong'"
       :hide-progress="hideProgress"
       :progress="progress"
+      :z-index="zIndex"
     />
 
     <FullScreenGenericSpinner
       v-else-if="type === 'fullscreen-generic'"
       :hide-progress="hideProgress"
       :progress="progress"
+      :z-index="zIndex"
     />
 
     <ProgressIcon
@@ -106,6 +108,10 @@ const props = defineProps({
     required: false,
     default: 6,
   },
+  zIndex: {
+    type: Number,
+    default: 10500,
+  },
 })
 
 const isVisible = ref(false)

src/components/KSlideout/KSlideout.cy.ts

@@ -36,6 +36,31 @@ describe('KSlideout', () => {
     cy.getTestId('slideout-title').should('be.visible').should('have.text', titleProp)
   })
 
+  it('renders with correct default z-index', () => {
+
+    mount(KSlideout, {
+      props: {
+        visible: true,
+      },
+    })
+
+    cy.get('.k-slideout .slideout-container').should('have.css', 'z-index', '9999')
+    cy.get('.k-slideout .slideout-backdrop').should('have.css', 'z-index', '9999')
+  })
+
+  it('renders with custom z-index', () => {
+
+    mount(KSlideout, {
+      props: {
+        visible: true,
+        zIndex: 92929,
+      },
+    })
+
+    cy.get('.k-slideout .slideout-container').should('have.css', 'z-index', '92929')
+    cy.get('.k-slideout .slideout-backdrop').should('have.css', 'z-index', '92929')
+  })
+
   it('renders close icon on right', () => {
     mount(KSlideout, {
       props: {

src/components/KSlideout/KSlideout.vue

@@ -88,6 +88,10 @@ const props = defineProps({
     required: false,
     default: '500px',
   },
+  zIndex: {
+    type: Number,
+    default: 9999,
+  },
 })
 
 const emit = defineEmits<{
@@ -162,7 +166,7 @@ onUnmounted(() => {
     right: 0;
     top: v-bind('offsetTopValue');
     width: 100%;
-    z-index: 9999;
+    z-index: v-bind('zIndex');
 
     .slideout-header {
       display: flex;
@@ -224,7 +228,7 @@ onUnmounted(() => {
     position: fixed;
     right: 0;
     top: v-bind('offsetTopValue');
-    z-index: 9999;
+    z-index: v-bind('zIndex'); // same value as z-index of slideout-container
 
     &.backdrop-transparent {
       background: var(--kui-color-background-transparent, $kui-color-background-transparent);

src/components/KToaster/KToaster.cy.ts

@@ -61,6 +61,29 @@ describe('KToaster', () => {
       cy.get('.toaster .toaster-message').should('not.exist')
       cy.get('.toaster .toaster-close-icon').should('be.visible')
     })
+
+    it('renders toast with correct default z-index', () => {
+
+      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', () => {
+
+      mount(KToaster, {
+        props: {
+          toasterState: [{ title: 'I have a toast' }],
+          zIndex: 9999,
+        },
+      })
+
+      cy.get('.k-toaster').should('have.css', 'z-index', '9999')
+    })
   })
 
   describe('ToastManager', () => {

src/components/KToaster/KToaster.vue

@@ -63,6 +63,10 @@ defineProps({
     default: [] as Toast[],
     required: true,
   },
+  zIndex: {
+    type: Number,
+    default: 10000,
+  },
 })
 
 defineEmits<{
@@ -97,7 +101,7 @@ const getToastIcon = (appearance?: ToasterAppearance): ToastIcon => {
   right: 50%;
   transform: translateX(50%);
   width: 90%;
-  z-index: 10000;
+  z-index: v-bind('zIndex');
 
   @media (min-width: $kui-breakpoint-mobile) {
     right: 16px;