Merge pull request #1624 from adevinta/drawer-final-spec-sync

feat(drawer): final spec sync
adevinta · Nov 10, 2023 · 2eaab6a · 2eaab6a
2 parents a0567ed + 900bf2a
commit 2eaab6a
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/drawer/package.json b/packages/components/drawer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/drawer",
-  "version": "0.3.5",
+  "version": "1.0.0",
   "description": "A panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.",
   "publishConfig": {
     "access": "public"

diff --git a/packages/components/drawer/src/Drawer.stories.tsx b/packages/components/drawer/src/Drawer.stories.tsx
@@ -1,11 +1,12 @@
 import { Button } from '@spark-ui/button'
+import { RadioGroup } from '@spark-ui/radio-group'
 import { Meta, StoryFn } from '@storybook/react'
 import { useState } from 'react'
 
 import { Drawer, type DrawerContentProps } from '.'
 
 const meta: Meta<typeof Drawer> = {
-  title: 'Experimental/Drawer',
+  title: 'Components/Drawer',
   component: Drawer,
 }
 
@@ -43,11 +44,17 @@ export const Usage: StoryFn = () => {
             ))}
           </Drawer.Body>
 
-          <Drawer.Footer className="flex justify-end gap-md">
-            <Button intent="neutral" design="outlined" onClick={() => setOpen(false)}>
+          <Drawer.Footer className="flex justify-between gap-md">
+            <Button intent="basic" design="ghost" onClick={() => setOpen(false)}>
               Cancel
             </Button>
-            <Button>Submit</Button>
+
+            <div className="flex gap-md">
+              <Button intent="basic" design="outlined" onClick={() => setOpen(false)}>
+                Disagree
+              </Button>
+              <Button>Submit</Button>
+            </div>
           </Drawer.Footer>
 
           <Drawer.CloseButton aria-label="Close edit profile" />
@@ -62,21 +69,23 @@ export const Sizes = () => {
   const [open, setOpen] = useState(false)
 
   return (
-    <>
-      <Drawer open={open} onOpenChange={setOpen}>
-        <div className="flex gap-md">
-          <Drawer.Trigger asChild>
-            <Button onClick={() => setSize('sm')}>Small</Button>
-          </Drawer.Trigger>
-
-          <Drawer.Trigger asChild>
-            <Button onClick={() => setSize('md')}>Medium</Button>
-          </Drawer.Trigger>
+    <div>
+      <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="fullscreen">Fullscreen</RadioGroup.Radio>
+      </RadioGroup>
 
-          <Drawer.Trigger asChild>
-            <Button onClick={() => setSize('lg')}>Large</Button>
-          </Drawer.Trigger>
-        </div>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <Drawer.Trigger asChild>
+          <Button>Open drawer</Button>
+        </Drawer.Trigger>
 
         <Drawer.Portal>
           <Drawer.Overlay />
@@ -112,7 +121,7 @@ export const Sizes = () => {
           </Drawer.Content>
         </Drawer.Portal>
       </Drawer>
-    </>
+    </div>
   )
 }
 
@@ -122,24 +131,21 @@ export const Side = () => {
 
   return (
     <>
+      <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>
       <Drawer open={open} onOpenChange={setOpen}>
-        <div className="flex gap-md">
-          <Drawer.Trigger asChild>
-            <Button onClick={() => setSide('right')}>Right</Button>
-          </Drawer.Trigger>
-
-          <Drawer.Trigger asChild>
-            <Button onClick={() => setSide('left')}>Left</Button>
-          </Drawer.Trigger>
-
-          <Drawer.Trigger asChild>
-            <Button onClick={() => setSide('top')}>Top</Button>
-          </Drawer.Trigger>
-
-          <Drawer.Trigger asChild>
-            <Button onClick={() => setSide('bottom')}>Bottom</Button>
-          </Drawer.Trigger>
-        </div>
+        <Drawer.Trigger asChild>
+          <Button>Open drawer</Button>
+        </Drawer.Trigger>
 
         <Drawer.Portal>
           <Drawer.Overlay />

diff --git a/packages/components/drawer/src/DrawerBody.tsx b/packages/components/drawer/src/DrawerBody.tsx
@@ -11,7 +11,7 @@ export const DrawerBody = forwardRef(
     <div
       ref={ref}
       className={cx(
-        ['px-xl', 'py-md', 'flex-grow', 'overflow-y-auto'],
+        ['px-xl', 'py-lg', 'flex-grow', 'overflow-y-auto'],
         ['outline-none', 'focus-visible:u-ring'],
         className
       )}

diff --git a/packages/components/drawer/src/DrawerCloseButton.tsx b/packages/components/drawer/src/DrawerCloseButton.tsx
@@ -25,7 +25,7 @@ export const DrawerCloseButton = forwardRef<CloseButtonElement, DrawerCloseButto
   ) => (
     <DrawerClose
       ref={ref}
-      className={cx(['absolute', 'top-sm', 'right-sm'], className)}
+      className={cx(['absolute', 'top-sm', 'right-xl'], className)}
       asChild
       {...rest}
     >

diff --git 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: '',
+        fullscreen: 'h-screen w-screen',
       },
       side: {
         right: [
@@ -52,12 +53,12 @@ export const drawerContentStyles = cva(
       {
         side: ['right', 'left'],
         size: 'md',
-        class: ['w-sz-640', 'max-w-full'],
+        class: ['w-sz-672', 'max-w-full'],
       },
       {
         side: ['right', 'left'],
         size: 'lg',
-        class: ['w-sz-768', 'max-w-full'],
+        class: ['w-sz-864', 'max-w-full'],
       },
       {
         side: ['top', 'bottom'],
@@ -67,12 +68,12 @@ export const drawerContentStyles = cva(
       {
         side: ['top', 'bottom'],
         size: 'md',
-        class: ['h-sz-640', 'max-h-full'],
+        class: ['h-sz-672', 'max-h-full'],
       },
       {
         side: ['top', 'bottom'],
         size: 'lg',
-        class: ['h-sz-768', 'max-h-full'],
+        class: ['h-sz-864', 'max-h-full'],
       },
     ],
     defaultVariants: {