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 ( {show && ( @@ -105,6 +109,7 @@ const Modal = forwardRef( className={styles.overlay} onClick={onBackdropClick} aria-hidden + style={zIndexStyle} /> @@ -127,7 +132,7 @@ const Modal = forwardRef( aria-modal aria-labelledby={titleId} aria-describedby={descriptionId} - style={style} + style={modalStyle} > {children}