Modal: no title, no description dont render extra margin-top

apollographql · Aug 23, 2021 · 664ee76 · 664ee76
1 parent 677610b
commit 664ee76
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/src/Modal/Modal.story.tsx b/src/Modal/Modal.story.tsx
@@ -302,4 +302,27 @@ storiesOf("Modal", module)
           .join(" ")}
       </div>
     </Modal>
+  ))
+  .add("No title and no description", () => (
+    <Modal
+      size="medium"
+      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
@@ -82,7 +82,7 @@ interface Props {
   /**
    * Title of the modal
    */
-  title: React.ReactNode;
+  title?: React.ReactNode;
 }
 
 const modalBackdrop = css`
@@ -285,10 +285,11 @@ export const Modal: React.FC<Props> = ({
             </div>
             <div
               css={css(
-                {
-                  marginTop:
-                    size === "large" ? 24 : size === "medium" ? 16 : 12,
-                },
+                title &&
+                  description && {
+                    marginTop:
+                      size === "large" ? 24 : size === "medium" ? 16 : 12,
+                  },
                 verticalScrollMode === "children" && {
                   overflowY: "auto",
                 },