feat: Add xsmall size to the Modal component

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v25.1.0
+
+-   [Feat] Add `xsmall` size to the `Modal` component
+
 # v25.0.0
 
 -   [BREAKING] Upgrade Ariakit from legacy package to the newer @ariakit/react

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "25.0.0",
+    "version": "25.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

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>

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;
     }

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'
 
 //