fix(dialog): fix dialog scroll

8base · Jun 13, 2019 · a944785 · a944785
1 parent 5464d5b
commit a944785
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/...s__/__image_snapshots__/dialog-test-js-components-dialog-with-scroll-1-snap.png b/...s__/__image_snapshots__/dialog-test-js-components-dialog-with-scroll-1-snap.png
diff --git a/e2e/__tests__/dialog.test.js b/e2e/__tests__/dialog.test.js
@@ -6,6 +6,10 @@ const SUITES = [
     .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"]');
+    }),
 ];
 
 

diff --git a/src/components/Dialog/Dialog.stories.js b/src/components/Dialog/Dialog.stories.js
@@ -17,10 +17,24 @@ export default (asStory) => {
           </Dialog.Footer>
         </Dialog>
       ))
+      .add('with large size', () => (
+        <Dialog size="xl" 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 scroll', () => (
         <Dialog size="sm" isOpen data-e2e-id="default-dialog">
           <Dialog.Header title="Mark Job as Completed" />
-          <Dialog.Body>
+          <Dialog.Body scrollable>
             <Column>
               { (new Array(100)).fill('').map(() => (
                 <Paragraph key="">

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,
+    maxHeight: '100%',
   },
 });
 
@@ -52,6 +53,9 @@ const [DialogTag, themeDialog] = createThemeTag('dialog', {
       xl: {
         width: '800px',
       },
+      xxl: {
+        width: '1000px',
+      },
     },
   },
 });