From 2fb98e03c0ec5c80b9a3cbe36f3df8f9e78aa59f Mon Sep 17 00:00:00 2001
From: Brian Smith <bsmith@axim.org>
Date: Fri, 15 Dec 2023 12:33:46 -0500
Subject: [PATCH] feat: allow consumers to configure ModalDialog to allow
 overflow

---
 src/Modal/ModalDialog.jsx   |  5 +++++
 src/Modal/_ModalDialog.scss | 10 ++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/Modal/ModalDialog.jsx b/src/Modal/ModalDialog.jsx
index 926d4bdcea..a63442b598 100644
--- a/src/Modal/ModalDialog.jsx
+++ b/src/Modal/ModalDialog.jsx
@@ -30,6 +30,7 @@ function ModalDialog({
   isFullscreenOnMobile,
   isBlocking,
   zIndex,
+  isOverflowVisible,
 }) {
   const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });
   const showFullScreen = (isFullscreenOnMobile && isMobile);
@@ -44,6 +45,7 @@ function ModalDialog({
             [`pgn__modal-${showFullScreen ? 'fullscreen' : size}`]: size,
             [`pgn__modal-${variant}`]: variant,
             'pgn__modal-scroll-fullscreen': isFullscreenScroll,
+            'pgn__modal-visible-overflow': isOverflowVisible,
           },
           className,
         )}
@@ -120,6 +122,8 @@ ModalDialog.propTypes = {
    * Specifies the z-index of the modal
    */
   zIndex: PropTypes.number,
+  /** Specifies whether overflow is visible in the modal */
+  isOverflowVisible: PropTypes.bool,
 };
 
 ModalDialog.defaultProps = {
@@ -133,6 +137,7 @@ ModalDialog.defaultProps = {
   isFullscreenOnMobile: false,
   isBlocking: false,
   zIndex: undefined,
+  isOverflowVisible: true,
 };
 
 ModalDialog.Header = ModalDialogHeader;
diff --git a/src/Modal/_ModalDialog.scss b/src/Modal/_ModalDialog.scss
index 9526fce91a..65ea4c519b 100644
--- a/src/Modal/_ModalDialog.scss
+++ b/src/Modal/_ModalDialog.scss
@@ -38,6 +38,14 @@
       top: calc(#{$modal-inner-padding} / 2 * -1);
     }
   }
+
+  &.pgn__modal-visible-overflow {
+    overflow: visible;
+
+    .pgn__modal-body {
+      overflow: visible;
+    }
+  }
 }
 
 // Sizes
@@ -94,6 +102,8 @@
   justify-content: center;
   position: sticky;
   top: 0;
+  border-top-left-radius: $modal-content-border-radius;
+  border-top-right-radius: $modal-content-border-radius;
   padding: $modal-header-padding;
   background-color: $modal-content-bg;
   transition: box-shadow 150ms ease;