fix(fuselage): Modal improves (#776)

Co-authored-by: Tasso Evangelista <[email protected]> Co-authored-by: dougfabris <[email protected]> Co-authored-by: Guilherme Gazzo <[email protected]>
RocketChat · Jul 29, 2022 · 7660993 · 7660993
1 parent 615ebd4
commit 7660993
Show file tree

Hide file tree

Showing 12 changed files with 258 additions and 60 deletions.
diff --git a/packages/fuselage/src/components/Modal/Modal.stories.js b/packages/fuselage/src/components/Modal/Modal.stories.js
diff --git a/packages/fuselage/src/components/Modal/Modal.stories.tsx b/packages/fuselage/src/components/Modal/Modal.stories.tsx
@@ -0,0 +1,138 @@
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+
+import { Button, Modal } from '../..';
+
+export default {
+  title: 'Containers/Modal',
+  component: Modal,
+  parameters: {
+    jest: ['Modal/Modal.spec.tsx'],
+  },
+};
+
+export const Default = () => (
+  <Modal>
+    <Modal.Header>
+      <Modal.HeaderText>
+        <Modal.Title>Modal Header</Modal.Title>
+      </Modal.HeaderText>
+      <Modal.Close />
+    </Modal.Header>
+    <Modal.Content>Modal Body</Modal.Content>
+    <Modal.Footer>
+      <Modal.FooterControllers>
+        <Button>Cancel</Button>
+        <Button primary onClick={action('click')}>
+          Submit
+        </Button>
+      </Modal.FooterControllers>
+    </Modal.Footer>
+  </Modal>
+);
+
+export const _WithThumb = () => (
+  <Modal>
+    <Modal.Header>
+      <Modal.Thumb url='data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' />
+      <Modal.HeaderText>
+        <Modal.Title>Modal Header</Modal.Title>
+      </Modal.HeaderText>
+      <Modal.Close />
+    </Modal.Header>
+    <Modal.Content>Modal Body</Modal.Content>
+    <Modal.Footer>
+      <Modal.FooterControllers>
+        <Button>Cancel</Button>
+        <Button primary onClick={action('click')}>
+          Submit
+        </Button>
+      </Modal.FooterControllers>
+    </Modal.Footer>
+  </Modal>
+);
+
+export const _WithIcon = () => (
+  <Modal>
+    <Modal.Header>
+      <Modal.Icon name='info' />
+      <Modal.HeaderText>
+        <Modal.Title>Modal Header</Modal.Title>
+      </Modal.HeaderText>
+      <Modal.Close />
+    </Modal.Header>
+    <Modal.Content>Modal Body</Modal.Content>
+    <Modal.Footer>
+      <Modal.FooterControllers>
+        <Button>Cancel</Button>
+        <Button primary onClick={action('click')}>
+          Submit
+        </Button>
+      </Modal.FooterControllers>
+    </Modal.Footer>
+  </Modal>
+);
+
+export const _WithTagline = () => (
+  <Modal>
+    <Modal.Header>
+      <Modal.HeaderText>
+        <Modal.Tagline>Tagline</Modal.Tagline>
+        <Modal.Title>Modal Header</Modal.Title>
+      </Modal.HeaderText>
+      <Modal.Close />
+    </Modal.Header>
+    <Modal.Content>Modal Body</Modal.Content>
+    <Modal.Footer>
+      <Modal.FooterControllers>
+        <Button>Cancel</Button>
+        <Button primary onClick={action('click')}>
+          Submit
+        </Button>
+      </Modal.FooterControllers>
+    </Modal.Footer>
+  </Modal>
+);
+
+export const _WithIconAndTagline = () => (
+  <Modal>
+    <Modal.Header>
+      <Modal.Icon alignItems='end' name='info' />
+      <Modal.HeaderText>
+        <Modal.Tagline>Tagline</Modal.Tagline>
+        <Modal.Title>Modal Header</Modal.Title>
+      </Modal.HeaderText>
+      <Modal.Close />
+    </Modal.Header>
+    <Modal.Content>Modal Body</Modal.Content>
+    <Modal.Footer>
+      <Modal.FooterControllers>
+        <Button>Cancel</Button>
+        <Button primary onClick={action('click')}>
+          Submit
+        </Button>
+      </Modal.FooterControllers>
+    </Modal.Footer>
+  </Modal>
+);
+
+export const _WithAnnotation = () => (
+  <Modal>
+    <Modal.Header>
+      <Modal.HeaderText>
+        <Modal.Title>Modal Header</Modal.Title>
+      </Modal.HeaderText>
+      <Modal.Close />
+    </Modal.Header>
+    <Modal.Content>Modal Body</Modal.Content>
+    <Modal.Footer justifyContent='space-between'>
+      <Modal.FooterAnnotation>Anototation</Modal.FooterAnnotation>
+      <Modal.FooterControllers>
+        <Button>Cancel</Button>
+        <Button primary onClick={action('click')}>
+          Submit
+        </Button>
+      </Modal.FooterControllers>
+    </Modal.Footer>
+  </Modal>
+);
diff --git a/packages/fuselage/src/components/Modal/Modal.styles.scss b/packages/fuselage/src/components/Modal/Modal.styles.scss
@@ -2,14 +2,18 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
+$modal-container-margin: theme('modal-container-margin', lengths.size(32));
+
+$modal-margin: theme('modal-margin', auto);
+
 .rcx-modal {
   position: static;
 
   display: flex;
 
   width: 100%;
   max-height: 100%;
-  margin: 0 auto;
+  margin: $modal-margin;
 
   background: none;
 
@@ -24,21 +28,28 @@
     padding: 0;
 
     color: colors.foreground(default);
-    border-radius: 2px;
+    border-radius: theme('modal-border-radius', lengths.border-radius(2));
     background-color: colors.surface(light);
     @include typography.use-font-scale(p2);
   }
 
   &__header {
-    margin: 32px;
+    margin: $modal-container-margin;
+
+    &-text {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      flex-shrink: 1;
+      @include typography.use-text-ellipsis;
+    }
   }
 
   &__header-inner {
     display: flex;
     flex-wrap: nowrap;
-    align-items: center;
 
-    margin: -8px;
+    margin: -4px;
   }
 
   &__title {
@@ -52,6 +63,12 @@
     @include typography.use-font-scale(h2);
   }
 
+  &__tagline {
+    color: colors.neutral(600);
+
+    @include typography.use-font-scale(c2);
+  }
+
   &__backdrop {
     position: fixed;
 
@@ -65,11 +82,19 @@
   }
 
   &__footer {
-    margin: 32px;
+    display: flex;
+    align-items: center;
+
+    margin: $modal-container-margin;
+
+    &-annotation {
+      color: colors.neutral(600);
+      @include typography.use-font-scale(c1);
+    }
   }
 
   &__content-wrapper {
-    margin-inline: 32px;
+    margin-inline: $modal-container-margin;
   }
 
   @include on-breakpoint(sm) {

diff --git a/packages/fuselage/src/components/Modal/ModalFooter.tsx b/packages/fuselage/src/components/Modal/ModalFooter.tsx
@@ -5,6 +5,11 @@ import Box from '../Box';
 
 export type ModalFooterProps = ComponentProps<typeof Box>;
 
-export const ModalFooter = ({ children }: ModalFooterProps) => (
-  <Box rcx-modal__footer>{children}</Box>
+export const ModalFooter = ({
+  children,
+  justifyContent = 'end',
+}: ModalFooterProps) => (
+  <Box justifyContent={justifyContent} rcx-modal__footer>
+    {children}
+  </Box>
 );
diff --git a/packages/fuselage/src/components/Modal/ModalFooterAnnotation.tsx b/packages/fuselage/src/components/Modal/ModalFooterAnnotation.tsx
@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import Box from '../Box';
+
+export type ModalFooterAnnotationProps = ComponentProps<typeof Box>;
+
+export const ModalFooterAnnotation = ({
+  children,
+}: ModalFooterAnnotationProps) => (
+  <Box rcx-modal__footer-annotation>{children}</Box>
+);
diff --git a/packages/fuselage/src/components/Modal/ModalFooterControllers.tsx b/packages/fuselage/src/components/Modal/ModalFooterControllers.tsx
@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import { ButtonGroup } from '..';
+
+export type ModalFooterControllersProps = ComponentProps<typeof ButtonGroup>;
+
+export const ModalFooterControllers = ({
+  children,
+}: ModalFooterControllersProps) => (
+  <ButtonGroup medium align='end'>
+    {children}
+  </ButtonGroup>
+);
diff --git a/packages/fuselage/src/components/Modal/ModalHeader.tsx b/packages/fuselage/src/components/Modal/ModalHeader.tsx
@@ -9,7 +9,7 @@ export type ModalHeaderProps = ComponentProps<typeof Box>;
 export const ModalHeader = ({ children, ...props }: ModalHeaderProps) => (
   <Box rcx-modal__header is='header' {...props}>
     <Box rcx-modal__header-inner>
-      <Margins all='x8'>{children}</Margins>
+      <Margins all='x4'>{children}</Margins>
     </Box>
   </Box>
 );
diff --git a/packages/fuselage/src/components/Modal/ModalHeaderText.tsx b/packages/fuselage/src/components/Modal/ModalHeaderText.tsx
@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import Box from '../Box';
+
+export type ModalHeaderTextProps = ComponentProps<typeof Box>;
+
+export const ModalHeaderText = ({
+  children,
+  ...props
+}: ModalHeaderTextProps) => (
+  <Box rcx-modal__header-text {...props}>
+    {children}
+  </Box>
+);
diff --git a/packages/fuselage/src/components/Modal/ModalIcon.tsx b/packages/fuselage/src/components/Modal/ModalIcon.tsx
@@ -1,10 +1,20 @@
 import type { ComponentProps } from 'react';
 import React from 'react';
 
+import Box from '../Box';
 import { Icon } from '../Icon';
 
-export type ModalIconProps = ComponentProps<typeof Icon>;
+export type ModalIconProps = ComponentProps<typeof Box> & {
+  name: ComponentProps<typeof Icon>['name'];
+};
 
-export const ModalIcon = ({ size = 'x24', ...props }: ModalIconProps) => (
-  <Icon {...props} size={size} />
+export const ModalIcon = ({
+  size = 'x24',
+  name,
+  alignItems = 'center',
+  ...props
+}: ModalIconProps) => (
+  <Box {...props} display='flex' alignItems={alignItems}>
+    <Icon mb='x4' name={name} size={size} />
+  </Box>
 );
diff --git a/packages/fuselage/src/components/Modal/ModalTagline.tsx b/packages/fuselage/src/components/Modal/ModalTagline.tsx
@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import Box from '../Box';
+
+export type ModalTaglineProps = ComponentProps<typeof Box>;
+
+export const ModalTagline = ({ children, ...props }: ModalTaglineProps) => (
+  <Box rcx-modal__tagline {...props}>
+    {children}
+  </Box>
+);