fix(Dialog): fix dialog body to avoid scrollable bug

8base · Feb 4, 2019 · 3882329 · 3882329
1 parent b8d10bd
commit 3882329
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/src/components/Dialog/Dialog.stories.js b/src/components/Dialog/Dialog.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default (asStory) => {
-  asStory('Components/Dialog', module, (story, { ModalContext, Dialog, Paragraph, Button }) => {
+  asStory('Components/Dialog', module, (story, { ModalContext, Dialog, Paragraph, Button, Column }) => {
     story
       .add('default', () => (
         <Dialog size="sm" isOpen data-e2e-id="default-dialog">
@@ -17,6 +17,24 @@ export default (asStory) => {
           </Dialog.Footer>
         </Dialog>
       ))
+      .add('with scroll', () => (
+        <Dialog size="sm" isOpen data-e2e-id="default-dialog">
+          <Dialog.Header title="Mark Job as Completed" />
+          <Dialog.Body>
+            <Column>
+              { (new Array(100)).fill('').map(() => (
+                <Paragraph key="">
+                Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
+                </Paragraph>
+              )) }
+            </Column>
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button color="neutral" variant="outlined">Cancel</Button>
+            <Button type="submit">Apply</Button>
+          </Dialog.Footer>
+        </Dialog>
+      ))
       .add('with state', () => (
         <ModalContext.Consumer>
           {

diff --git a/src/components/Dialog/Dialog.theme.js b/src/components/Dialog/Dialog.theme.js
@@ -4,7 +4,10 @@ import { createThemeTag } from '../../theme/createThemeTag';
 
 
 const [DialogBodyTag, themeBody] = createThemeTag('dialogBody', {
-  flexShrink: 1,
+  root: {
+    display: 'flex',
+    flexShrink: 1,
+  },
 });
 
 

diff --git a/src/components/Dialog/DialogBody.js b/src/components/Dialog/DialogBody.js
@@ -16,4 +16,8 @@ const DialogBody = ({ children, ...rest }: DialogBodyProps) => (
   </DialogBodyTag>
 );
 
+DialogBody.defaultProps = {
+  scrollable: true,
+};
+
 export { DialogBody };
diff --git a/src/components/Modal/Modal.theme.js b/src/components/Modal/Modal.theme.js
@@ -20,11 +20,13 @@ const [OverlayTag, themeOverlay] = createThemeTag(`${name}Overlay`, ({ Z_INDEX }
 }));
 
 const [ModalTag, themeModal] = createThemeTag(name, {
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
 const theme = {