feat(atoms): add feature to auto scroll body in the dialog

8base · Nov 19, 2018 · 3e996ae · 3e996ae
1 parent 5f00a45
commit 3e996ae
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 6 deletions.
diff --git a/src/atoms/Dialog/DialogBody.js b/src/atoms/Dialog/DialogBody.js
@@ -15,15 +15,17 @@ const name = 'dialogBody';
 const theme = createTheme(name, {
   modifiers: {
     scrollable: {
-      maxHeight: 'calc(60vh - 14rem)',
+      overflow: 'auto',
     },
   },
   defaults: {
-    scrollable: false,
+    scrollable: true,
   },
 });
 
-const DialogBodyTag = createStyledTag(name, {});
+const DialogBodyTag = createStyledTag(name, {
+  flexShrink: 1,
+});
 
 const DialogBody = ({ children, ...rest }: DialogBodyProps) => (
   <DialogBodyTag tagName={ Card.Body } { ...rest }>

diff --git a/src/atoms/Dialog/DialogPlate.js b/src/atoms/Dialog/DialogPlate.js
@@ -12,6 +12,7 @@ type DialogPlateProps = {|
   onOpen?: (any) => void,
   shouldCloseOnOverlayClick?: boolean,
   padding?: PropSizes,
+  tagName?: string,
 |};
 
 const name = 'dialogPlate';
@@ -48,6 +49,7 @@ const StyledTag = createStyledTag(name, {
   borderRadius: '6px',
   backgroundColor: '#FFFFFF',
   boxShadow: '0 4px 8px 0 rgba(0,0,0,0.1)',
+  maxHeight: '90%',
 });
 
 function DialogPlate({
@@ -59,13 +61,14 @@ function DialogPlate({
   shouldCloseOnOverlayClick,
   size,
   args,
+  tagName,
   ...rest
   }: DialogPlateProps) {
   return (
     <Modal id={ id } isOpen={ isOpen } onOpen={ onOpen } onClose={ onClose } args={ args } shouldCloseOnOverlayClick={ shouldCloseOnOverlayClick }>
       {
         ({ args, onClose }) => (
-          <StyledTag tagName="div" size={ size }>
+          <StyledTag tagName={ tagName } size={ size }>
             <Card.Plate { ...rest } args={ args } onClose={ onClose }>
               { children }
             </Card.Plate>
@@ -76,6 +79,9 @@ function DialogPlate({
   );
 }
 
-DialogPlate.defaultProps = theme[name].defaults;
+DialogPlate.defaultProps = {
+  ...theme[name].defaults,
+  tagName: 'div',
+};
 
 export { DialogPlate, theme };
diff --git a/src/atoms/Modal/Modal.js b/src/atoms/Modal/Modal.js
@@ -50,7 +50,12 @@ const OverlayTag = createStyledTag(name, (props): * => ({
   zIndex: props.theme.Z_INDEX.MODAL,
 }));
 
-const ModalTag = createStyledTag(name, {});
+const ModalTag = createStyledTag(name, {
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
 
 class Modal extends PureComponent<ModalProps, ModalState> {
   static openedModals: number = 0;

diff --git a/src/atoms/Paper/Paper.js b/src/atoms/Paper/Paper.js
@@ -66,6 +66,7 @@ const theme = createTheme(name, (colors: *, sizes: *): * => ({
 const StyledTag = createStyledTag(name, props => ({
   display: 'flex',
   flexDirection: 'column',
+  maxHeight: '100%',
 
   ...getThemeStyle(props, name).paper,
 }));

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -1875,6 +1875,7 @@ exports[`Storyshots ATOMS/Card default 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  max-height: 100%;
   background: #FFFFFF;
   color: #000000;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
@@ -1954,6 +1955,7 @@ exports[`Storyshots ATOMS/Card with custom offsets 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  max-height: 100%;
   background: #FFFFFF;
   color: #000000;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
@@ -2033,6 +2035,7 @@ exports[`Storyshots ATOMS/Card with scrollable body 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  max-height: 100%;
   background: #FFFFFF;
   color: #000000;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
@@ -2168,6 +2171,7 @@ exports[`Storyshots ATOMS/Card without footer 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  max-height: 100%;
   background: #FFFFFF;
   color: #000000;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
@@ -2234,6 +2238,7 @@ exports[`Storyshots ATOMS/Card without header 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  max-height: 100%;
   background: #FFFFFF;
   color: #000000;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
@@ -2291,6 +2296,7 @@ exports[`Storyshots ATOMS/Card without multiple sections 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  max-height: 100%;
   background: #FFFFFF;
   color: #000000;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
@@ -12104,6 +12110,7 @@ exports[`Storyshots ATOMS/Dropdown with menu 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  max-height: 100%;
   background: #FFFFFF;
   color: #000000;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
@@ -14722,6 +14729,7 @@ exports[`Storyshots ATOMS/Paper with header and sections 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  max-height: 100%;
   background: #FFFFFF;
   color: #000000;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);
@@ -16461,6 +16469,10 @@ exports[`Storyshots ATOMS/Table table with data 1`] = `
   height: 6rem;
 }
 
+.emotion-38:last-child {
+  border-bottom: none;
+}
+
 .emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -17138,6 +17150,10 @@ exports[`Storyshots ATOMS/Table table with scroll 1`] = `
   height: 6rem;
 }
 
+.emotion-38:last-child {
+  border-bottom: none;
+}
+
 .emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -20243,6 +20259,7 @@ exports[`Storyshots MOLECULES/Menu with some items 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  max-height: 100%;
   background: #FFFFFF;
   color: #000000;
   box-shadow: 0 1px 3px 0 rgba(50,50,93,.14),0 4px 6px 0 rgba(112,157,199,.08);