From 13d3d127e8b6bd0679cd7aa0e66d6b15995fc43f Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 18 Dec 2024 17:49:08 +0200
Subject: [PATCH] feat(Modal): allow passing z-index to overlay and modal

---
 .../core/src/components/Modal/Modal/Modal.module.scss     | 8 ++++----
 packages/core/src/components/Modal/Modal/Modal.tsx        | 7 ++++++-
 packages/core/src/components/Modal/Modal/Modal.types.tsx  | 4 ++++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/Modal/Modal/Modal.module.scss b/packages/core/src/components/Modal/Modal/Modal.module.scss
index ea27b4abdd..09280d0255 100644
--- a/packages/core/src/components/Modal/Modal/Modal.module.scss
+++ b/packages/core/src/components/Modal/Modal/Modal.module.scss
@@ -1,13 +1,13 @@
+$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);
@@ -15,7 +15,7 @@
   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
index d40514e829..39186724f2 100644
--- 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
index b9153ad4e2..6e4c583730 100644
--- 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;
 }