feat(Modal): allow passing z-index to overlay and modal

mondaycom · Dec 18, 2024 · 13d3d12 · 13d3d12
1 parent 0855390
commit 13d3d12
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/core/src/components/Modal/Modal/Modal.module.scss b/packages/core/src/components/Modal/Modal/Modal.module.scss
@@ -1,21 +1,21 @@
+$modal-default-z-index: 10000;
+
 .overlay {
-  --monday-modal-z-index: 10000;
   position: fixed;
   inset: 0;
   background-color: var(--color-surface);
-  z-index: var(--monday-modal-z-index);
+  z-index: var(--monday-modal-z-index, $modal-default-z-index);
 }
 
 .modal {
-  --monday-modal-z-index: 10000;
   --top-actions-spacing: var(--spacing-large);
   --top-actions-width: var(--spacing-xl);
   --modal-inline-padding: var(--spacing-xl);
 
   position: fixed;
   top: 50%;
   left: 50%;
-  z-index: var(--monday-modal-z-index);
+  z-index: var(--monday-modal-z-index, $modal-default-z-index);
 
   display: flex;
   flex-direction: column;

diff --git a/packages/core/src/components/Modal/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal/Modal.tsx
@@ -38,6 +38,7 @@ const Modal = forwardRef(
       container = document.body,
       children,
       style,
+      zIndex,
       className,
       "data-testid": dataTestId
     }: ModalProps,
@@ -88,6 +89,9 @@ const Modal = forwardRef(
       ? modalAnimationAnchorPopVariants
       : modalAnimationCenterPopVariants;
 
+    const zIndexStyle = zIndex ? ({ "--monday-modal-z-index": zIndex } as React.CSSProperties) : {};
+    const modalStyle = { ...zIndexStyle, ...style };
+
     return (
       <AnimatePresence>
         {show && (
@@ -105,6 +109,7 @@ const Modal = forwardRef(
                     className={styles.overlay}
                     onClick={onBackdropClick}
                     aria-hidden
+                    style={zIndexStyle}
                   />
                   <FocusLock returnFocus>
                     <RemoveScroll forwardProps>
@@ -127,7 +132,7 @@ const Modal = forwardRef(
                         aria-modal
                         aria-labelledby={titleId}
                         aria-describedby={descriptionId}
-                        style={style}
+                        style={modalStyle}
                       >
                         {children}
                         <ModalTopActions

diff --git a/packages/core/src/components/Modal/Modal/Modal.types.tsx b/packages/core/src/components/Modal/Modal/Modal.types.tsx
@@ -58,4 +58,8 @@ export interface ModalProps extends VibeComponentProps {
    * Additional inline styles for the modal.
    */
   style?: React.CSSProperties;
+  /**
+   * The z-index to be used for the modal and overlay.
+   */
+  zIndex?: number;
 }