From 7e5ce5d28f0082de65f6f8442f0a1f6bf5eabe3f Mon Sep 17 00:00:00 2001
From: soykje <jean-paul.lescouzeres@adevinta.com>
Date: Thu, 25 Jan 2024 13:31:25 +0100
Subject: [PATCH 1/3] feat(drawer): add fluid size

---
 package-lock.json                             |  1 +
 packages/components/drawer/src/Drawer.doc.mdx | 16 +++++------
 .../components/drawer/src/Drawer.stories.tsx  | 27 ++++++++++++-------
 .../drawer/src/DrawerContent.styles.tsx       | 11 ++++++++
 4 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ef9d5dd62..b4bff3c76 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2399,6 +2399,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/packages/components/drawer/src/Drawer.doc.mdx b/packages/components/drawer/src/Drawer.doc.mdx
index 8bee70bf9..4b8ac44d6 100644
--- a/packages/components/drawer/src/Drawer.doc.mdx
+++ b/packages/components/drawer/src/Drawer.doc.mdx
@@ -91,9 +91,15 @@ import { Drawer } from '@spark-ui/drawer'
 
 <Canvas of={stories.Usage} />
 
-### Sizes
+### Side
+
+Pick a side among `right`, `left`, `top` and `bottom`.
+
+<Canvas of={stories.Side} />
+
+### Size
 
-Pick a size among `sm`, `md`, `lg`.
+Pick a size among `sm`, `md`, `lg`, `fluid` and `fullscreen`.
 
 <Canvas of={stories.Sizes} />
 
@@ -103,12 +109,6 @@ When set to `true`, this option will remove the internal padding of the `Drawer.
 
 <Canvas of={stories.Inset} />
 
-### Side
-
-Pick a side among `right`, `left`, `top` and `bottom`.
-
-<Canvas of={stories.Side} />
-
 ## Accessibility
 
 Adheres to the [Drawer WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/drawermodal).
diff --git a/packages/components/drawer/src/Drawer.stories.tsx b/packages/components/drawer/src/Drawer.stories.tsx
index b7eb6887a..279524e2c 100644
--- a/packages/components/drawer/src/Drawer.stories.tsx
+++ b/packages/components/drawer/src/Drawer.stories.tsx
@@ -79,6 +79,7 @@ export const Sizes = () => {
         <RadioGroup.Radio value="sm">Small</RadioGroup.Radio>
         <RadioGroup.Radio value="md">Medium</RadioGroup.Radio>
         <RadioGroup.Radio value="lg">Large</RadioGroup.Radio>
+        <RadioGroup.Radio value="fluid">Fluid</RadioGroup.Radio>
         <RadioGroup.Radio value="fullscreen">Fullscreen</RadioGroup.Radio>
       </RadioGroup>
 
@@ -98,16 +99,22 @@ export const Sizes = () => {
             <Drawer.Body className="flex flex-col gap-lg">
               <Drawer.Description>Please select a drawer size</Drawer.Description>
 
-              {Array.from({ length: 10 }, (_, index) => (
-                <p key={index}>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                  irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                  officia deserunt mollit anim id est laborum.
-                </p>
-              ))}
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+              {size !== 'fluid' && (
+                <>
+                  {Array.from({ length: 5 }, (_, index) => (
+                    <p key={index}>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+                      eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+                      in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                  ))}
+                </>
+              )}
             </Drawer.Body>
 
             <Drawer.Footer className="flex justify-end gap-md">
diff --git a/packages/components/drawer/src/DrawerContent.styles.tsx b/packages/components/drawer/src/DrawerContent.styles.tsx
index 5844f9438..b26cf0812 100644
--- a/packages/components/drawer/src/DrawerContent.styles.tsx
+++ b/packages/components/drawer/src/DrawerContent.styles.tsx
@@ -11,6 +11,7 @@ export const drawerContentStyles = cva(
         sm: '',
         md: '',
         lg: '',
+        fluid: '',
         fullscreen: 'h-screen w-screen',
       },
       side: {
@@ -54,6 +55,11 @@ export const drawerContentStyles = cva(
         size: 'lg',
         class: ['w-sz-864', 'max-w-full'],
       },
+      {
+        side: ['left', 'right'],
+        size: 'fluid',
+        class: ['w-auto', 'max-w-full'],
+      },
       {
         side: ['top', 'bottom'],
         size: 'sm',
@@ -69,6 +75,11 @@ export const drawerContentStyles = cva(
         size: 'lg',
         class: ['h-sz-864', 'max-h-full'],
       },
+      {
+        side: ['top', 'bottom'],
+        size: 'fluid',
+        class: ['h-auto', 'max-h-full'],
+      },
     ],
     defaultVariants: {
       side: 'right',

From 1887ca54a150e183f9949a8bfa3105ba31e7e94e Mon Sep 17 00:00:00 2001
From: soykje <jean-paul.lescouzeres@adevinta.com>
Date: Fri, 26 Jan 2024 15:53:39 +0100
Subject: [PATCH 2/3] test(drawer): add sandbox for testing purpose

---
 packages/components/drawer/src/Drawer.doc.mdx |  4 +
 .../components/drawer/src/Drawer.stories.tsx  | 82 +++++++++++++++++++
 2 files changed, 86 insertions(+)

diff --git a/packages/components/drawer/src/Drawer.doc.mdx b/packages/components/drawer/src/Drawer.doc.mdx
index 4b8ac44d6..1a261c92c 100644
--- a/packages/components/drawer/src/Drawer.doc.mdx
+++ b/packages/components/drawer/src/Drawer.doc.mdx
@@ -109,6 +109,10 @@ When set to `true`, this option will remove the internal padding of the `Drawer.
 
 <Canvas of={stories.Inset} />
 
+### Sandbox
+
+<Canvas of={stories.Sandbox} />
+
 ## Accessibility
 
 Adheres to the [Drawer WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/drawermodal).
diff --git a/packages/components/drawer/src/Drawer.stories.tsx b/packages/components/drawer/src/Drawer.stories.tsx
index 279524e2c..3e30d0db3 100644
--- a/packages/components/drawer/src/Drawer.stories.tsx
+++ b/packages/components/drawer/src/Drawer.stories.tsx
@@ -184,6 +184,7 @@ export const Side = () => {
         <RadioGroup.Radio value="top">Top</RadioGroup.Radio>
         <RadioGroup.Radio value="bottom">Bottom</RadioGroup.Radio>
       </RadioGroup>
+
       <Drawer open={open} onOpenChange={setOpen}>
         <Drawer.Trigger asChild>
           <Button>Open drawer</Button>
@@ -226,3 +227,84 @@ export const Side = () => {
     </>
   )
 }
+
+export const Sandbox = () => {
+  const [size, setSize] = useState<ExcludeNull<DrawerContentProps>['size']>('md')
+  const [side, setSide] = useState<ExcludeNull<DrawerContentProps>['side']>('right')
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div>
+      <RadioGroup
+        className="mb-lg flex gap-md"
+        value={side}
+        orientation="horizontal"
+        onValueChange={value => setSide(value as ExcludeNull<DrawerContentProps>['side'])}
+      >
+        <RadioGroup.Radio value="right">Right</RadioGroup.Radio>
+        <RadioGroup.Radio value="left">Left</RadioGroup.Radio>
+        <RadioGroup.Radio value="top">Top</RadioGroup.Radio>
+        <RadioGroup.Radio value="bottom">Bottom</RadioGroup.Radio>
+      </RadioGroup>
+
+      <RadioGroup
+        className="mb-lg flex gap-md"
+        value={size}
+        orientation="horizontal"
+        onValueChange={value => setSize(value as ExcludeNull<DrawerContentProps>['size'])}
+      >
+        <RadioGroup.Radio value="sm">Small</RadioGroup.Radio>
+        <RadioGroup.Radio value="md">Medium</RadioGroup.Radio>
+        <RadioGroup.Radio value="lg">Large</RadioGroup.Radio>
+        <RadioGroup.Radio value="fluid">Fluid</RadioGroup.Radio>
+        <RadioGroup.Radio value="fullscreen">Fullscreen</RadioGroup.Radio>
+      </RadioGroup>
+
+      <Drawer open={open} onOpenChange={setOpen}>
+        <Drawer.Trigger asChild>
+          <Button>Open drawer</Button>
+        </Drawer.Trigger>
+
+        <Drawer.Portal>
+          <Drawer.Overlay />
+
+          <Drawer.Content size={size} side={side}>
+            <Drawer.Header>
+              <Drawer.Title>Edit size</Drawer.Title>
+            </Drawer.Header>
+
+            <Drawer.Body className="flex flex-col gap-lg">
+              <Drawer.Description>Please select a drawer size</Drawer.Description>
+
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+              {size !== 'fluid' && (
+                <>
+                  {Array.from({ length: 5 }, (_, index) => (
+                    <p key={index}>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+                      eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+                      in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                  ))}
+                </>
+              )}
+            </Drawer.Body>
+
+            <Drawer.Footer className="flex justify-end gap-md">
+              <Button intent="neutral" design="outlined" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button>Submit</Button>
+            </Drawer.Footer>
+
+            <Drawer.CloseButton aria-label="Close edit size" />
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer>
+    </div>
+  )
+}

From fdf1f401141845b5424c4e48ee24c6186fabd4ee Mon Sep 17 00:00:00 2001
From: soykje <jean-paul.lescouzeres@adevinta.com>
Date: Fri, 26 Jan 2024 16:27:28 +0100
Subject: [PATCH 3/3] docs(drawer): fix broken a11y link in doc

---
 packages/components/drawer/src/Drawer.doc.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/drawer/src/Drawer.doc.mdx b/packages/components/drawer/src/Drawer.doc.mdx
index 1a261c92c..2efb72665 100644
--- a/packages/components/drawer/src/Drawer.doc.mdx
+++ b/packages/components/drawer/src/Drawer.doc.mdx
@@ -115,7 +115,7 @@ When set to `true`, this option will remove the internal padding of the `Drawer.
 
 ## Accessibility
 
-Adheres to the [Drawer WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/drawermodal).
+Adheres to the [Dialog WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/).
 
 ### Guidelines