fix(atoms): beautify dialog styles

8base · Jul 30, 2018 · b16536d · b16536d
1 parent d72d129
commit b16536d
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 68 deletions.
diff --git a/src/atoms/Card/CardHeader.js b/src/atoms/Card/CardHeader.js
@@ -13,8 +13,9 @@ const cardHeaderTheme = createTheme(name, (colors: *): * => ({
   cardHeader: {
     borderBottom: `1px solid ${colors.PRIMARY_BORDER_COLOR}`,
     display: 'flex',
-    height: '8rem',
+    height: '6rem',
     alignItems: 'center',
+    position: 'relative',
   },
   modifiers: {
     ...offsetModifier,

diff --git a/src/atoms/Dialog/Dialog.stories.js b/src/atoms/Dialog/Dialog.stories.js
@@ -1,19 +1,20 @@
 import React from 'react';
 
 export default (asStory) => {
-  asStory('ATOMS/Dialog (skip shot)', module, (story, { Dialog, Paragraph }) => {
+  asStory('ATOMS/Dialog (skip shot)', module, (story, { Dialog, Paragraph, Button }) => {
     story
       .add('with default header, body, actions and footer (skip shot)', () => (
-        <Dialog.Plate
-          isOpen
-          heading="Mark Job as Completed"
-          actions={ [{
-            text: 'Close', onClick: () => null,
-          }, {
-            text: 'Submit', onClick: () => null,
-          }] }
-        >
-          <Paragraph>{ 'Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics proplex holt obpyramidal vibrometer objectlessness laevogyrous wichtje monel silklike provostorial collingual Serpentes beget inparabola tolling speleology</Paragraph' }</Paragraph>
+        <Dialog.Plate isOpen size="sm">
+          <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" text="Cancel" />
+            <Button type="submit" text="Apply" />
+          </Dialog.Footer>
         </Dialog.Plate>
       ));
   });

diff --git a/src/atoms/Dialog/DialogFooter.js b/src/atoms/Dialog/DialogFooter.js
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { createStyledTag, createTheme } from '../../utils';
-import { Grid } from '../Grid';
-import { Button } from '../Button';
+import { createTheme } from '../../utils';
+import { Card } from '../Card';
+import { Row } from '../FlexLayout';
 
 type DialogFooterProps = {|
   children?: React$Node,
@@ -17,25 +17,16 @@ const theme = createTheme(name, {
   },
 });
 
-const StyledTag = createStyledTag(name, {
-  borderTop: '1px solid #EBEBEB',
-  padding: '1rem 1.5rem',
-});
-
 function DialogFooter({
   children,
-  actions = [],
   ...rest
   }: DialogFooterProps) {
   return (
-    <StyledTag { ...rest } tagName="div">
-      <Grid.Layout gap="xs" columns="1fr auto">
-        <Grid.Box column="1" />
-        { React.Children.toArray(
-          actions.map(({ text, onClick }, index) => <Grid.Box key={ index } column={ index + 2 }><Button kind={ index === 0 ? 'secondary' : 'primary' } text={ text } onClick={ onClick } /></Grid.Box>),
-        ) }
-      </Grid.Layout>
-    </StyledTag>
+    <Card.Footer offset="lg" { ...rest }>
+      <Row justifyContent="end">
+        { children }
+      </Row>
+    </Card.Footer>
   );
 }
 

diff --git a/src/atoms/Dialog/DialogHeader.js b/src/atoms/Dialog/DialogHeader.js
@@ -1,12 +1,12 @@
 import React from 'react';
 
 import { createStyledTag, createTheme } from '../../utils';
-import { Grid } from '../Grid';
+import { Card } from '../Card';
 import { Heading } from '../typography/Heading';
 
 type DialogHeaderProps = {|
   children?: React$Node,
-  heading: string,
+  title: string,
 |};
 
 const name = 'dialogHeader';
@@ -18,36 +18,30 @@ const theme = createTheme(name, {
   },
 });
 
-const StyledTag = createStyledTag(name, {
-  alignItems: 'center',
-  display: 'flex',
-  height: '4rem',
-  padding: '1.5rem',
-  position: 'relative',
-});
-
 const CloseStyledTag = createStyledTag(name, {
   cursor: 'pointer',
   userSelect: 'none',
+  position: 'absolute',
+  right: '2rem',
+  fontWeight: 600,
+  fontSize: '2rem',
+  color: '#d0d7dd',
+
+  '&:hover': {
+    color: '#8698a7',
+  },
 });
 
 function DialogHeader({
-  heading,
+  title,
   onClose,
   ...rest
   }: DialogHeaderProps) {
   return (
-    <StyledTag { ...rest } tagName="div">
-      <Grid.Layout columns="auto 1fr auto" stretch>
-        <Grid.Box>
-          <Heading type="h5" text={ heading } weight="semibold" />
-        </Grid.Box>
-        <Grid.Box />
-        <Grid.Box justifyContent="center">
-          <CloseStyledTag tagName="div" onClick={ onClose }>✕</CloseStyledTag>
-        </Grid.Box>
-      </Grid.Layout>
-    </StyledTag>
+    <Card.Header offset="lg" { ...rest }>
+      <Heading type="h3">{ title }</Heading>
+      <CloseStyledTag tagName="div" onClick={ onClose }>×</CloseStyledTag>
+    </Card.Header>
   );
 }
 

diff --git a/src/atoms/Dialog/DialogPlate.js b/src/atoms/Dialog/DialogPlate.js
@@ -2,17 +2,10 @@ import React from 'react';
 
 import { createStyledTag, createTheme } from '../../utils';
 import { Modal } from '../Modal';
-import { DialogHeader } from './DialogHeader';
-import { DialogBody } from './DialogBody';
-import { DialogFooter } from './DialogFooter';
+import { Card } from '../Card';
 
 type DialogPlateProps = {|
-  actions?: Array<{
-    onClick?: (event?: SyntheticMouseEvent) => void,
-    text?: string,
-  }>,
   children?: React$Node,
-  heading: string,
   isOpen?: boolean,
   onClose?: (any) => void,
   onOpen?: (any) => void,
@@ -24,9 +17,15 @@ const name = 'dialogPlate';
 const theme = createTheme(name, {
   modifiers: {
     size: {
+      sm: {
+        width: '400px',
+      },
       md: {
         width: '600px',
       },
+      lg: {
+        width: '800px',
+      },
     },
   },
   defaults: {
@@ -44,20 +43,19 @@ const StyledTag = createStyledTag(name, {
 
 function DialogPlate({
   children,
-  heading,
-  actions,
   isOpen,
   onOpen,
   onClose,
   shouldCloseOnOverlayClick,
+  size,
   ...rest
   }: DialogPlateProps) {
   return (
     <Modal isOpen={ isOpen } onOpen={ onOpen } onClose={ onClose } shouldCloseOnOverlayClick={ shouldCloseOnOverlayClick }>
-      <StyledTag tagName="div" { ...rest }>
-        <DialogHeader heading={ heading } onClose={ onClose } />
-        <DialogBody>{ children }</DialogBody>
-        <DialogFooter actions={ actions } />
+      <StyledTag tagName="div" size={ size }>
+        <Card.Plate { ...rest }>
+          { children }
+        </Card.Plate>
       </StyledTag>
     </Modal>
   );

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -1266,11 +1266,12 @@ exports[`Storyshots ATOMS/Card default 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  height: 8rem;
+  height: 6rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  position: relative;
   padding: 1.5rem;
 }
 
@@ -1338,11 +1339,12 @@ exports[`Storyshots ATOMS/Card with custom offsets 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  height: 8rem;
+  height: 6rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  position: relative;
   padding: 2.5rem;
 }
 
@@ -1410,11 +1412,12 @@ exports[`Storyshots ATOMS/Card without footer 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  height: 8rem;
+  height: 6rem;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  position: relative;
   padding: 1.5rem;
 }