Merge pull request #402 from dcos-labs/mp/feat/fullscreen-modal-conte…

…nt-fill-height Let fullscreen modal content fill remaining height
d2iq · Sep 13, 2019 · ebaa1fe · ebaa1fe
2 parents 75edba7 + 1dafe38
commit ebaa1fe
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/modal/components/FullscreenModal.tsx b/packages/modal/components/FullscreenModal.tsx
@@ -4,7 +4,7 @@ import ModalBase from "../components/ModalBase";
 import { ModalBaseProps, ModalSizes } from "./ModalBase";
 import Delegate from "react-delegate-component";
 import { ButtonProps } from "../../button/components/ButtonBase";
-import { flex, padding } from "../../shared/styles/styleUtils";
+import { flex, padding, flexItem } from "../../shared/styles/styleUtils";
 import { modalContent, modalHeader, fullscreenModalHeader } from "../style";
 import FullscreenModalHeader from "./FullscreenModalHeader";
 
@@ -61,7 +61,7 @@ class FullscreenModal extends React.PureComponent<FullscreenModalProps, {}> {
             />
           </div>
           <div
-            className={cx(modalContent, {
+            className={cx(modalContent, flexItem("grow"), {
               [padding("all", "xl")]: !isContentFlush
             })}
             data-cy="fullscreenModal-content"

diff --git a/packages/modal/tests/__snapshots__/Modal.test.tsx.snap b/packages/modal/tests/__snapshots__/Modal.test.tsx.snap
@@ -1366,6 +1366,16 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
 .emotion-10 {
   box-sizing: border-box;
   overflow: auto;
+  box-sizing: border-box;
+  -webkit-flex-basis: 0;
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  width: auto;
   padding: 32px;
 }
 
@@ -2291,6 +2301,16 @@ exports[`Modal FullscreenModal renders FullscreenModal 1`] = `
 .emotion-12 {
   box-sizing: border-box;
   overflow: auto;
+  box-sizing: border-box;
+  -webkit-flex-basis: 0;
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-width: 0;
+  width: auto;
   padding: 32px;
 }