feat: revise drawer component

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## Added
+
+- Revise `Drawer` to have a more consistent spacing with the rest of the components.
+
 ## Fixed
 
 - Fixed an issue with the `Button` component where the `text` variant had the wrong line height.

src/components/drawer.ts

@@ -0,0 +1,29 @@
+import { modalAnatomy as parts } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'
+
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(parts.keys)
+
+const baseStyle = definePartsStyle({
+  header: {
+    px: { base: 4, md: 6 },
+    pt: 6,
+    pb: 0,
+    fontSize: 'md',
+    fontWeight: 'normal',
+  },
+  body: {
+    px: { base: 4, md: 6 },
+    py: 6,
+  },
+  footer: {
+    px: { base: 4, md: 6 },
+    py: 4,
+    display: 'block',
+  },
+  dialog: {
+    bg: 'bg.surface',
+    boxShadow: 'lg',
+  },
+})
+
+export default defineMultiStyleConfig({ baseStyle })

src/components/index.ts

@@ -5,6 +5,7 @@ export { default as CloseButton } from './close-button'
 export { default as Container } from './container'
 export { default as CustomSelect } from './custom-select'
 export { default as Divider } from './divider'
+export { default as Drawer } from './drawer'
 export { default as FormLabel } from './form-label'
 export { default as Heading } from './heading'
 export { default as Input } from './input'

src/stories/drawer.stories.tsx

@@ -0,0 +1,35 @@
+import {
+  Box,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react'
+import type { Meta } from '@storybook/react'
+
+const meta: Meta = {
+  title: 'Components / Drawer',
+}
+
+export default meta
+
+export const Basic = () => {
+  return (
+    <Drawer isOpen={true} placement="right" onClose={() => void 0}>
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerHeader bg="red.100">
+          <Box bg="red.500">Header</Box>
+        </DrawerHeader>
+        <DrawerBody bg="green.100">
+          <Box bg="green.500">Body</Box>
+        </DrawerBody>
+        <DrawerFooter bg="blue.100">
+          <Box bg="blue.500">Footer</Box>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}