From 6f4b9d5b18b8258b1cc20bba31542fb3cdc2714b Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 7 Jan 2025 09:05:24 +0200 Subject: [PATCH] feat(Modal): wrap the overlay and modal inside a container, to allow portaling with layer provider to the container (#2703) --- .../components/Modal/Modal/Modal.module.scss | 83 ++++++++++--------- .../core/src/components/Modal/Modal/Modal.tsx | 37 ++++----- 2 files changed, 60 insertions(+), 60 deletions(-) diff --git a/packages/core/src/components/Modal/Modal/Modal.module.scss b/packages/core/src/components/Modal/Modal/Modal.module.scss index 09280d0255..f32946eba4 100644 --- a/packages/core/src/components/Modal/Modal/Modal.module.scss +++ b/packages/core/src/components/Modal/Modal/Modal.module.scss @@ -1,47 +1,50 @@ -$modal-default-z-index: 10000; - -.overlay { +.container { position: fixed; inset: 0; - background-color: var(--color-surface); - z-index: var(--monday-modal-z-index, $modal-default-z-index); -} - -.modal { - --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, $modal-default-z-index); - - display: flex; - flex-direction: column; - width: var(--modal-width); - max-height: var(--modal-max-height); - background-color: var(--primary-background-color); - overflow: hidden; - border-radius: var(--border-radius-big); - box-shadow: var(--box-shadow-large); - - &.withHeaderAction { - --top-actions-width: calc(var(--spacing-xl) * 2); - } - - &.sizeSmall { - --modal-max-height: 50%; - --modal-width: 480px; - } + z-index: var(--monday-modal-z-index, 10000); - &.sizeMedium { - --modal-max-height: 80%; - --modal-width: 580px; + .overlay { + position: fixed; + inset: 0; + height: 100%; + background-color: var(--color-surface); } - &.sizeLarge { - --modal-max-height: 80%; - --modal-width: 840px; + .modal { + --top-actions-spacing: var(--spacing-large); + --top-actions-width: var(--spacing-xl); + --modal-inline-padding: var(--spacing-xl); + + position: relative; + top: 50%; + left: 50%; + + display: flex; + flex-direction: column; + width: var(--modal-width); + max-height: var(--modal-max-height); + background-color: var(--primary-background-color); + overflow: hidden; + border-radius: var(--border-radius-big); + box-shadow: var(--box-shadow-large); + + &.withHeaderAction { + --top-actions-width: calc(var(--spacing-xl) * 2); + } + + &.sizeSmall { + --modal-max-height: 50%; + --modal-width: 480px; + } + + &.sizeMedium { + --modal-max-height: 80%; + --modal-width: 580px; + } + + &.sizeLarge { + --modal-max-height: 80%; + --modal-width: 840px; + } } } diff --git a/packages/core/src/components/Modal/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal/Modal.tsx index 720e1320f5..4f627ff430 100644 --- a/packages/core/src/components/Modal/Modal/Modal.tsx +++ b/packages/core/src/components/Modal/Modal/Modal.tsx @@ -53,7 +53,7 @@ const Modal = forwardRef( const modalRef = useRef(null); const modalMergedRef = useMergeRef(ref, modalRef); - const overlayRef = useRef(null); + const containerRef = useRef(null); const [titleId, setTitleId] = useState(); const [descriptionId, setDescriptionId] = useState(); @@ -103,28 +103,25 @@ const Modal = forwardRef( : modalAnimationCenterPopVariants; const zIndexStyle = zIndex ? ({ "--monday-modal-z-index": zIndex } as React.CSSProperties) : {}; - const modalStyle = { ...zIndexStyle, ...style }; return ( {show && ( - + {createPortal( - <> - - + +
+ @@ -157,8 +154,8 @@ const Modal = forwardRef( /> - - , +
+
, portalTargetElement )}