feat: add xsmall and xlarge modal sizes

toptal · Aug 9, 2023 · 8be81c2 · 8be81c2
1 parent 83c013a
commit 8be81c2
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 15 deletions.
diff --git a/cypress/component/Modal.spec.tsx b/cypress/component/Modal.spec.tsx
@@ -217,21 +217,24 @@ describe('Modal', () => {
     const { width } = happoTarget
 
     describe(`when screen has ${width}px width`, () => {
-      Cypress._.each(['small', 'medium', 'large', 'full-screen'], modalSize => {
-        it(`renders ${modalSize} size modal`, () => {
-          cy.viewport(width, 1000)
-
-          cy.mount(
-            <TestModalOverflown size={modalSize as ModalProps['size']} />
-          )
-
-          cy.get('body').happoScreenshot({
-            component,
-            variant: `modal-${modalSize}-size/${width}-default`,
-            targets: [happoTarget],
+      Cypress._.each(
+        ['xsmall', 'small', 'medium', 'large', 'xlarge', 'full-screen'],
+        modalSize => {
+          it(`renders ${modalSize} size modal`, () => {
+            cy.viewport(width, 1000)
+
+            cy.mount(
+              <TestModalOverflown size={modalSize as ModalProps['size']} />
+            )
+
+            cy.get('body').happoScreenshot({
+              component,
+              variant: `modal-${modalSize}-size/${width}-default`,
+              targets: [happoTarget],
+            })
           })
-        })
-      })
+        }
+      )
     })
   })
 })
diff --git a/packages/picasso/src/Modal/Modal.tsx b/packages/picasso/src/Modal/Modal.tsx
@@ -39,7 +39,9 @@ export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
   /** Whether modal should be displayed */
   open: boolean
   /** Width of modal */
-  size?: SizeType<'small' | 'medium' | 'large'> | 'full-screen'
+  size?:
+    | SizeType<'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'>
+    | 'full-screen'
   /** Callback executed when backdrop was clicked */
   onBackdropClick?: () => void
   /** If `true`, clicking the backdrop will not fire `onClose` or `onBackdropClick` */

diff --git a/packages/picasso/src/Modal/story/Sizes.example.tsx b/packages/picasso/src/Modal/story/Sizes.example.tsx
@@ -59,6 +59,11 @@ const ModalDialog = ({
 )
 
 const Example = () => {
+  const {
+    showModal: showModalExtraSmall,
+    hideModal: hideModalExtraSmall,
+    isOpen: isOpenExtraSmall,
+  } = useModal()
   const {
     showModal: showModalSmall,
     hideModal: hideModalSmall,
@@ -74,6 +79,11 @@ const Example = () => {
     hideModal: hideModalLarge,
     isOpen: isOpenLarge,
   } = useModal()
+  const {
+    showModal: showModalExtraLarge,
+    hideModal: hideModalExtraLarge,
+    isOpen: isOpenExtraLarge,
+  } = useModal()
   const {
     showModal: showModalFullscreen,
     hideModal: hideModalFullscreen,
@@ -82,6 +92,15 @@ const Example = () => {
 
   return (
     <Container flex>
+      <Button onClick={showModalExtraSmall} data-testid='trigger-extra-small'>
+        Open extra-small ("xsmall")
+      </Button>
+      <ModalDialog
+        open={isOpenExtraSmall}
+        onClose={hideModalExtraSmall}
+        size='xsmall'
+      />
+
       <Button onClick={showModalSmall} data-testid='trigger-small'>
         Open small
       </Button>
@@ -101,6 +120,15 @@ const Example = () => {
       </Button>
       <ModalDialog open={isOpenLarge} onClose={hideModalLarge} size='large' />
 
+      <Button onClick={showModalExtraLarge} data-testid='trigger-extra-large'>
+        Open extra-large ("xlarge")
+      </Button>
+      <ModalDialog
+        open={isOpenExtraLarge}
+        onClose={hideModalExtraLarge}
+        size='xlarge'
+      />
+
       <Button onClick={showModalFullscreen} data-testid='trigger-full-screen'>
         Open full-screen
       </Button>

diff --git a/packages/picasso/src/Modal/styles.ts b/packages/picasso/src/Modal/styles.ts
@@ -32,6 +32,9 @@ export default ({ screens, sizes }: Theme) =>
         maxWidth,
       },
     },
+    xsmall: {
+      width: '20.5rem',
+    },
     small: {
       width: '32.5rem',
     },
@@ -41,6 +44,9 @@ export default ({ screens, sizes }: Theme) =>
     large: {
       width: '50rem',
     },
+    xlarge: {
+      width: '75rem',
+    },
     'full-screen': {
       height: '100%',
       width: '100%',