From ade8d1363182769c90000e5a5df3ab8c907eb3a6 Mon Sep 17 00:00:00 2001
From: Ricardo Amaral <ricardo@doist.com>
Date: Wed, 28 Aug 2024 22:01:34 +0100
Subject: [PATCH] feat: Add `xsmall` size to the `Modal` component

---
 CHANGELOG.md                           |  4 ++++
 package-lock.json                      |  4 ++--
 package.json                           |  2 +-
 src/modal/modal-stories-components.tsx |  1 +
 src/modal/modal.module.css             | 11 +++++++----
 src/modal/modal.tsx                    |  2 +-
 6 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 33655f34b..d0ebb0990 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 2184d5ec6..262973ffd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@doist/reactist",
-    "version": "25.0.0",
+    "version": "25.1.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@doist/reactist",
-            "version": "25.0.0",
+            "version": "25.1.0",
             "hasInstallScript": true,
             "license": "MIT",
             "dependencies": {
diff --git a/package.json b/package.json
index 6cd305b35..384c795b0 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "25.0.0",
+    "version": "25.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {
diff --git a/src/modal/modal-stories-components.tsx b/src/modal/modal-stories-components.tsx
index e9e48e321..7dbfa0821 100644
--- 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
index 3088ec66e..b6847a7c6 100644
--- 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
index 560a5a660..e8c8761e8 100644
--- 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'
 
 //