fix(z-index): apply the correct z-index tokens on the components (#1974)

packages/shoreline/src/components/contextual-help/stories/show.stories.tsx

@@ -4,6 +4,8 @@ import { ContextualHelp } from '../index'
 import { Text } from '../../text'
 import { Stack } from '../../stack'
 import './stories.css'
+import { Button } from '@ariakit/react'
+import { Modal, ModalContent, ModalHeader, ModalHeading } from '../../modal'
 
 export default {
   title: 'components/contextual-help',
@@ -27,6 +29,7 @@ const placementOptions: Placement[] = [
 
 export function Show() {
   const [open, setOpen] = useState(true)
+  const [modalOpen, setModalOpen] = useState(false)
 
   return (
     <div className="ch-examples">
@@ -133,6 +136,32 @@ export function Show() {
           </Stack>
         </ContextualHelp>
       </Stack>
+      <Stack className="ch-decorative-box ch-bg-purple">
+        <Text variant="display1">Inside a modal</Text>
+        <Button onClick={() => setModalOpen(true)}>Open modal</Button>
+        <Modal onClose={() => setModalOpen(false)} open={modalOpen}>
+          <ModalHeader>
+            <Stack horizontal>
+              <ModalHeading>Modal Header</ModalHeading>
+              <ContextualHelp label="modal help">
+                I'm visible inside a modal
+              </ContextualHelp>
+            </Stack>
+          </ModalHeader>
+          <ModalContent>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit
+            scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
+            tristique senectus. Morbi tristique senectus et netus et. Nec
+            tincidunt praesent semper feugiat nibh sed pulvinar proin gravida.
+            Morbi tristique senectus et netus et malesuada fames ac. Ultricies
+            leo integer malesuada nunc vel risus commodo viverra maecenas. Nunc
+            congue nisi vitae suscipit tellus mauris a diam maecenas. Dui
+            accumsan sit amet nulla facilisi morbi tempus. Venenatis lectus
+            magna fringilla urna.
+          </ModalContent>
+        </Modal>
+      </Stack>
     </div>
   )
 }

packages/shoreline/src/components/modal/modal.tsx

@@ -3,6 +3,7 @@ import { forwardRef } from 'react'
 import { Dialog } from '@ariakit/react'
 
 import { Container } from '../content'
+import { style } from '@vtex/shoreline-utils'
 
 /**
  * Modal displays content related to a minor job within a page's main job. It demands complete attention and blocks interactions outside the overlay.
@@ -30,7 +31,13 @@ import { Container } from '../content'
  */
 export const Modal = forwardRef<HTMLDivElement, ModalProps>(
   function Modal(props, ref) {
-    const { children, portal = true, size = 'medium', ...otherProps } = props
+    const {
+      children,
+      portal = true,
+      size = 'medium',
+      style: styleOverride,
+      ...otherProps
+    } = props
 
     return (
       <Dialog
@@ -39,6 +46,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
         backdrop={<div data-sl-modal-backdrop />}
         portal={portal}
         data-size={size}
+        style={style({ zIndex: 'var(--sl-z-4)', ...styleOverride })}
         {...otherProps}
       >
         <Container data-sl-modal-container>{children}</Container>

packages/shoreline/src/themes/sunrise/components/checkbox.css

@@ -21,7 +21,6 @@
 
 [data-sl-checkbox-input] {
   flex-shrink: 0;
-  position: relative;
   background: var(--sl-bg-base);
   width: var(--sl-checkbox-size);
   height: var(--sl-checkbox-size);

packages/shoreline/src/themes/sunrise/components/contextual-help.css

@@ -36,6 +36,7 @@
   --sl-contextual-help-popover-max-height: 27.5rem;
   --sl-contextual-help-popover-width: 21.375rem;
 
+  z-index: var(--sl-z-10);
   min-height: var(--sl-contextual-help-popover-min-height);
   max-height: var(--sl-contextual-help-popover-max-height);
   width: var(--sl-contextual-help-popover-width);

packages/shoreline/src/themes/sunrise/components/drawer.css

@@ -8,7 +8,7 @@
   display: grid;
   grid-template-rows: auto 1fr auto;
   position: fixed;
-  z-index: 50;
+  z-index: var(--sl-z-3);
   height: auto;
   overflow: hidden auto;
 

packages/shoreline/src/themes/sunrise/components/menu.css

@@ -100,7 +100,7 @@
   display: flex;
   flex-direction: column;
   padding: var(--sl-space-3) var(--sl-space-4);
-  z-index: var(--sl-z-10);
+  z-index: var(--sl-z-6);
   box-shadow: var(--sl-shadow-1);
   min-width: 9.5rem;
 

packages/shoreline/src/themes/sunrise/components/modal.css

@@ -11,7 +11,7 @@
   margin: auto;
   left: 0;
   right: 0;
-  z-index: 99999;
+  z-index: var(--sl-z-5);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -51,6 +51,7 @@
   background-color: var(--sl-bg-inverted-strong);
   padding-top: var(--sl-space-20);
   padding-bottom: var(--sl-space-20);
+  z-index: var(--sl-z-4);
 }
 
 [data-sl-modal-header] {

packages/shoreline/src/themes/sunrise/components/radio.css

@@ -17,7 +17,6 @@
 
   & > [data-sl-radio-input] {
     appearance: none;
-    position: relative;
     border-radius: var(--sl-radius-full);
     cursor: pointer;
     width: 1.25rem;
@@ -65,7 +64,6 @@
       display: block;
       border-radius: var(--sl-radius-full);
       background-color: transparent;
-      position: absolute;
     }
 
     &:disabled {

packages/shoreline/src/themes/sunrise/components/select.css

@@ -97,7 +97,7 @@
   }
 
   [data-sl-select-popover] {
-    z-index: var(--z-10);
+    z-index: var(--sl-z-6);
     display: flex;
     max-height: min(var(--popover-available-height, 18.75rem), 18.75rem);
     flex-direction: column;

packages/shoreline/src/themes/sunrise/components/toast.css

@@ -88,7 +88,7 @@
 
   &[data-visible='true'] {
     opacity: 1;
-    z-index: calc(9999 - var(--sl-toast-index));
+    z-index: calc(var(--sl-z-7) - var(--sl-toast-index));
     > * {
       pointer-events: auto;
     }
@@ -104,7 +104,7 @@
 [data-sl-toast-stack] {
   --sl-c-toast-default-offset: var(--sl-space-10);
   position: fixed;
-  z-index: 9999;
+  z-index: var(--sl-z-7);
   top: var(--sl-c-toast-default-offset);
   left: var(--sl-c-toast-default-offset);
   right: var(--sl-c-toast-default-offset);

packages/shoreline/src/themes/sunrise/components/tooltip-popover.css

@@ -8,7 +8,7 @@
   max-width: var(--sl-tooltip-popover-max-width);
   border-radius: var(--sl-radius-2);
   padding: var(--sl-space-2) var(--sl-space-3);
-  z-index: var(--sl-z-10);
+  z-index: var(--sl-z-9);
   border: var(--sl-border-base-strong);
   border-color: var(--sl-bg-inverted);
 }