From 825f01e6464cb951213bce94c46947db624ba767 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 `Modal` component

---
 src/modal/modal-stories-components.tsx |  1 +
 src/modal/modal.module.css             | 11 +++++++----
 src/modal/modal.tsx                    |  2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

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