feat: Add xsmall size to Modal component

Doist · Aug 28, 2024 · 825f01e · 825f01e
1 parent 6cb179a
commit 825f01e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/modal/modal-stories-components.tsx b/src/modal/modal-stories-components.tsx
@@ -121,6 +121,7 @@ function ModalOptionsForm({ title }: { title?: React.ReactNode }) {
             </SelectField>
 
             <SelectField label="width" name="width" value={width} onChange={onChange}>
+                <option value="xsmall">xsmall</option>
                 <option value="small">small</option>
                 <option value="medium">medium</option>
                 <option value="large">large</option>

diff --git a/src/modal/modal.module.css b/src/modal/modal.module.css
@@ -65,7 +65,10 @@
     width: 580px;
 }
 .small .container {
-    width: 450px;
+    width: 480px;
+}
+.xsmall .container {
+    width: 448px;
 }
 
 @media (min-width: 992px) {
@@ -87,16 +90,16 @@
 }
 
 @media (max-width: 580px) {
-    .overlay:not(.small) .container {
+    .overlay:not(.xsmall):not(.small) .container {
         width: 100% !important;
         max-height: none;
     }
-    .overlay.expand:not(.small) > [data-focus-lock-disabled] {
+    .overlay.expand:not(.xsmall):not(.small) > [data-focus-lock-disabled] {
         padding-left: 0;
         padding-right: 0;
         padding-bottom: 0;
     }
-    .overlay.expand:not(.small) .container {
+    .overlay.expand:not(.xsmall):not(.small) .container {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }

diff --git a/src/modal/modal.tsx b/src/modal/modal.tsx
@@ -15,7 +15,7 @@ import { IconButtonProps, IconButton } from '../button'
 import styles from './modal.module.css'
 import type { ObfuscatedClassName } from '../utils/common-types'
 
-type ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'
+type ModalWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'
 type ModalHeightMode = 'expand' | 'fitContent'
 
 //