Modal: add verticalScrollMode property to limit overflow to children

apollographql · Jul 17, 2020 · 458a968 · 458a968
1 parent c6c5b81
commit 458a968
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 21 deletions.
diff --git a/src/Modal/Modal.story.tsx b/src/Modal/Modal.story.tsx
@@ -213,4 +213,28 @@ storiesOf("Modal", module)
         </div>
       </Modal>
     )
-  );
+  )
+  .add("static (medium, verticalScrollMode children)", () => (
+    <Modal
+      size="medium"
+      title="Modal Title"
+      verticalScrollMode="children"
+      primaryAction={
+        <Button color={colors.green.base} style={{ color: colors.white }}>
+          Buy 1 Seat
+        </Button>
+      }
+      secondaryAction={<Button color={colors.white}>Cancel</Button>}
+      bottomLeftText={
+        <span style={{ color: colors.blue.base }}>
+          Update Billing Information
+        </span>
+      }
+    >
+      <div>
+        {Array.from(Array(500))
+          .map(() => "lorem ipsum dolor")
+          .join(" ")}
+      </div>
+    </Modal>
+  ));
diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
@@ -53,6 +53,14 @@ interface Props {
   secondaryAction?: React.ReactNode;
 
   children?: React.ReactNode;
+
+  /**
+   * Limit vertical overflow to children or let the entire modal scroll.
+   *
+   * Defaults to "modal".
+   */
+  verticalScrollMode?: "modal" | "children";
+
   /**
    * Optional description to show of the modal
    */
@@ -127,6 +135,7 @@ export const Modal: React.FC<Props> = ({
   title,
   description,
   children,
+  verticalScrollMode,
   onClose,
   size,
   bottomLeftText,
@@ -204,23 +213,30 @@ export const Modal: React.FC<Props> = ({
             className={classnames(
               className,
               cx(
-                css({
-                  backgroundColor: "white",
-                  borderRadius: 12,
-                  boxShadow: `0 16px 32px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(18, 21, 26, 0.04)`,
-                  maxHeight: "80%",
-                  minWidth: 400,
-                  opacity: 1,
-                  overflowY: "auto",
-                  padding: size === "large" ? "40px" : "32px",
-                  position: "absolute",
-                  width: getModalWidth(size),
-                  zIndex: 11,
-                  marginLeft: "auto",
-                  marginRight: "auto",
-                  left: 0,
-                  right: 0,
-                })
+                css(
+                  {
+                    backgroundColor: "white",
+                    borderRadius: 12,
+                    boxShadow: `0 16px 32px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(18, 21, 26, 0.04)`,
+                    maxHeight: "80%",
+                    minWidth: 400,
+                    opacity: 1,
+                    overflowY:
+                      verticalScrollMode === "modal" ? "auto" : "hidden",
+                    padding: size === "large" ? "40px" : "32px",
+                    position: "absolute",
+                    width: getModalWidth(size),
+                    zIndex: 11,
+                    marginLeft: "auto",
+                    marginRight: "auto",
+                    left: 0,
+                    right: 0,
+                  },
+                  verticalScrollMode === "children" && {
+                    display: "flex",
+                    flexDirection: "column",
+                  }
+                )
               ),
               as.props.className,
               // If the parent component is using emotion with the jsx pragma, we
@@ -254,9 +270,15 @@ export const Modal: React.FC<Props> = ({
               )}
             </div>
             <div
-              css={{
-                marginTop: size === "large" ? 24 : size === "medium" ? 16 : 12,
-              }}
+              css={css(
+                {
+                  marginTop:
+                    size === "large" ? 24 : size === "medium" ? 16 : 12,
+                },
+                verticalScrollMode === "children" && {
+                  overflowY: "auto",
+                }
+              )}
             >
               {children}
             </div>