feat: add xsmall and xlarge modal sizes

toptal · Aug 8, 2023 · ba94b83 · ba94b83
1 parent a62e9c4
commit ba94b83
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
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,13 +92,22 @@ const Example = () => {
 
   return (
     <Container flex>
+      <Button onClick={showModalExtraSmall} data-testid='trigger-extra-small'>
+        Open extra-small (`xs`)
+      </Button>
+      <ModalDialog
+        open={isOpenExtraSmall}
+        onClose={hideModalExtraSmall}
+        size='xsmall'
+      />
+
       <Button onClick={showModalSmall} data-testid='trigger-small'>
-        Open small
+        Open small (`sm`)
       </Button>
       <ModalDialog open={isOpenSmall} onClose={hideModalSmall} size='small' />
 
       <Button onClick={showModalMedium} data-testid='trigger-medium'>
-        Open medium (default)
+        Open medium (`md`, default)
       </Button>
       <ModalDialog
         open={isOpenMedium}
@@ -97,10 +116,19 @@ const Example = () => {
       />
 
       <Button onClick={showModalLarge} data-testid='trigger-large'>
-        Open large
+        Open large (`lg`)
       </Button>
       <ModalDialog open={isOpenLarge} onClose={hideModalLarge} size='large' />
 
+      <Button onClick={showModalExtraLarge} data-testid='trigger-extra-large'>
+        Open extra-large (`xl`)
+      </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%',