fix(Dialog): scrollable for no-stretch dialogs

8base · Oct 29, 2019 · c578aa0 · c578aa0
1 parent 4f52f50
commit c578aa0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/src/components/Dialog/Dialog.stories.js b/src/components/Dialog/Dialog.stories.js
@@ -71,7 +71,7 @@ withLargeSize.story = {
 };
 
 export const withScroll = () => (
-  <Dialog size="sm" isOpen data-e2e-id="default-dialog" stretch>
+  <Dialog size="sm" isOpen data-e2e-id="default-dialog">
     <Dialog.Header title="Mark Job as Completed" />
     <Dialog.Body scrollable>
       <Column>
@@ -95,6 +95,31 @@ withScroll.story = {
   name: 'with scroll',
 };
 
+export const withStretchScroll = () => (
+  <Dialog size="sm" isOpen data-e2e-id="default-dialog" stretch>
+    <Dialog.Header title="Mark Job as Completed" />
+    <Dialog.Body scrollable>
+      <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>
+);
+
+withScroll.story = {
+  name: 'with stretch scroll',
+};
+
 export const withState = () => (
   <ModalContext.Consumer>
     { ({ openModal, closeModal }) => (

diff --git a/src/components/Dialog/Dialog.theme.js b/src/components/Dialog/Dialog.theme.js
@@ -73,6 +73,7 @@ const [DialogInnerTag, themeDialogInner] = createThemeTag('dialogInner', {
     },
 
     height: '100%',
+    overflow: 'auto',
   },
   modifiers: {
   },
-Original file line number
+Diff line change
@@ Expand Up @@
         },
         height: '100%',
+        overflow: 'auto',
       },
       modifiers: {
       },
@@ Expand Down @@