feat(dialog): add stretch modifier

8base · Jun 13, 2019 · be24bd5 · be24bd5
1 parent 6589637
commit be24bd5
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 8 deletions.
diff --git a/...__/__image_snapshots__/dialog-test-js-components-dialog-with-stretch-1-snap.png b/...__/__image_snapshots__/dialog-test-js-components-dialog-with-stretch-1-snap.png
diff --git a/e2e/__tests__/dialog.test.js b/e2e/__tests__/dialog.test.js
@@ -5,8 +5,14 @@ const SUITES = [
   baisy.suite('Components/Dialog', 'default')
     .setRoot(async (iframe) => {
       return await iframe.waitForXPath('//*[@data-e2e-id="default-dialog"]');
-    }),
+    })
+  ,
   baisy.suite('Components/Dialog', 'with scroll')
+    .setRoot(async (iframe) => {
+      return await iframe.waitForXPath('//*[@data-e2e-id="default-dialog"]');
+    })
+  ,
+  baisy.suite('Components/Dialog', 'with stretch')
     .setRoot(async (iframe) => {
       return await iframe.waitForXPath('//*[@data-e2e-id="default-dialog"]');
     }),

diff --git a/src/components/Dialog/Dialog.js b/src/components/Dialog/Dialog.js
@@ -9,7 +9,7 @@ import { DialogFooter } from './DialogFooter';
 import { DialogHeader } from './DialogHeader';
 import { DialogTag, DialogInnerTag } from './Dialog.theme';
 
-type DialogPlateProps = {
+type DialogProps = {
   children?: React$Node,
   isOpen?: boolean,
   onClose?: (any) => void,
@@ -18,6 +18,7 @@ type DialogPlateProps = {
   shouldCloseOnEscPress ?: boolean,
   padding?: PropSizes,
   tagName?: string,
+  stretch?: boolean,
 };
 
 
@@ -33,8 +34,9 @@ const Dialog = ({
   args,
   padding,
   tagName,
+  stretch,
   ...rest
-  }: DialogPlateProps) => {
+  }: DialogProps) => {
   return (
     <Modal
       { ...rest }
@@ -48,12 +50,12 @@ const Dialog = ({
     >
       {
         ({ args, onClose }) => (
-          <DialogTag tagName={ tagName } size={ size }>
-            <Card padding={ padding } args={ args } onClose={ onClose }>
+          <DialogTag tagName={ tagName } size={ size } stretch={ stretch }>
+            <Card padding={ padding } args={ args } onClose={ onClose } stretch={ stretch }>
               {
                 typeof children === 'function'
-                  ? (args) => <DialogInnerTag>{ children(args) }</DialogInnerTag>
-                  : <DialogInnerTag>{ children }</DialogInnerTag>
+                  ? (args) => <DialogInnerTag stretch={ stretch }>{ children(args) }</DialogInnerTag>
+                  : <DialogInnerTag stretch={ stretch }>{ children }</DialogInnerTag>
               }
             </Card>
           </DialogTag>

diff --git a/src/components/Dialog/Dialog.stories.js b/src/components/Dialog/Dialog.stories.js
@@ -17,6 +17,20 @@ export default (asStory) => {
           </Dialog.Footer>
         </Dialog>
       ))
+      .add('with stretch', () => (
+        <Dialog stretch size="sm" isOpen data-e2e-id="default-dialog">
+          <Dialog.Header title="Mark Job as Completed" />
+          <Dialog.Body>
+            <Paragraph>
+              Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
+            </Paragraph>
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button color="neutral" variant="outlined">Cancel</Button>
+            <Button type="submit">Apply</Button>
+          </Dialog.Footer>
+        </Dialog>
+      ))
       .add('with large size', () => (
         <Dialog size="xl" isOpen data-e2e-id="default-dialog">
           <Dialog.Header title="Mark Job as Completed" />

diff --git a/src/components/Dialog/Dialog.theme.js b/src/components/Dialog/Dialog.theme.js
@@ -8,6 +8,7 @@ const [DialogBodyTag, themeBody] = createThemeTag('dialogBody', {
     display: 'flex',
     flexDirection: 'column',
     flexShrink: 1,
+    flexGrow: 1,
     maxHeight: '100%',
   },
 });
@@ -37,6 +38,9 @@ const [DialogTag, themeDialog] = createThemeTag('dialog', {
     flex: '0 1 90%',
   },
   modifiers: {
+    stretch: {
+      height: '100%',
+    },
     size: {
       xs: {
         width: '300px',
@@ -66,7 +70,12 @@ const [DialogInnerTag, themeDialogInner] = createThemeTag('dialogInner', {
     '&, & > form': {
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'center',
+      justifyContent: 'flex-start',
+    },
+  },
+  modifiers: {
+    stretch: {
+      height: '100%',
     },
   },
 });