fix(Dialog): limit max height for scrollable

8base · Nov 2, 2018 · 28eb173 · 28eb173
1 parent 9b0b8d2
commit 28eb173
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/src/atoms/Dialog/DialogBody.js b/src/atoms/Dialog/DialogBody.js
@@ -1,28 +1,34 @@
 import React from 'react';
 
-import { createTheme } from '../../utils';
+import { createTheme, createStyledTag } from '../../utils';
 import { Card } from '../Card';
 import type { PropSizes } from '../../types';
 
 type DialogBodyProps = {|
   children?: React$Node,
   padding?: PropSizes,
+  scrollable?: boolean,
 |};
 
 const name = 'dialogBody';
 
 const theme = createTheme(name, {
   modifiers: {
+    scrollable: {
+      maxHeight: 'calc(60vh - 14rem)',
+    },
   },
   defaults: {
+    scrollable: false,
   },
 });
 
-function DialogBody({
-  children,
-  ...rest
-  }: DialogBodyProps) {
-  return <Card.Body { ...rest }>{ children }</Card.Body>;
-}
+const DialogBodyTag = createStyledTag(name, {});
+
+const DialogBody = ({ children, ...rest }: DialogBodyProps) => (
+  <DialogBodyTag tagName={ Card.Body } { ...rest }>
+    { children }
+  </DialogBodyTag>
+);
 
 export { DialogBody, theme };