add z-index prop for a modal

reportportal · Oct 10, 2023 · 299a6d8 · 299a6d8
1 parent 6d3f87e
commit 299a6d8
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/src/components/modal/modal.module.scss b/src/components/modal/modal.module.scss
@@ -2,8 +2,6 @@ $WIDTH-SMALL: 320px;
 $WIDTH-DEFAULT: 480px;
 $WIDTH-LARGE: 720px;
 
-$Z-INDEX-OVERLAY: 2;
-
 // TODO: Discuss with UX team. There are no designs for the dark theme, so the theme-independent CSS properties are used
 
 @mixin modalWidth($width) {
@@ -29,19 +27,16 @@ $Z-INDEX-OVERLAY: 2;
 
 .overlay-default {
   background-color: var(--rp-ui-kit-overlay);
-  z-index: $Z-INDEX-OVERLAY;
 }
 
 .overlay-light-cyan {
   background-color: var(--rp-ui-kit-overlay-light-cyan);
-  z-index: $Z-INDEX-OVERLAY;
 }
 
 .scrolling-content {
   position: fixed;
   width: 100%;
   height: 100%;
-  z-index: $Z-INDEX-OVERLAY;
 }
 
 .modal-window {

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
@@ -24,6 +24,7 @@ interface ModalProps {
   children?: ReactNode;
   footerNode?: ReactNode;
   className?: string;
+  zIndex?: number;
   size?: ModalSize;
   overlay?: ModalOverlay;
   allowCloseOutside?: boolean;
@@ -44,6 +45,7 @@ export const Modal: FC<ModalProps> = ({
   size = 'default',
   onClose = () => {},
   overlay = 'default',
+  zIndex = 2,
   allowCloseOutside = true,
   scrollable = false,
 }) => {
@@ -93,7 +95,7 @@ export const Modal: FC<ModalProps> = ({
   return (
     <AnimatePresence onExitComplete={onClose}>
       {isShown && (
-        <div className={cx('modal', { [`overlay-${overlay}`]: overlay })}>
+        <div className={cx('modal', { [`overlay-${overlay}`]: overlay })} style={{ zIndex }}>
           <motion.div
             className={cx('modal-window', { [`size-${size}`]: size }, className)}
             key="modal-window"