Skip to content

style: refine Drawer spacing, tokens, and close icon #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Fernando Jesus (fernandorjesus) wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

style: refine Drawer spacing, tokens, and close icon #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
11b232d
style: refine Drawer spacing, tokens, and close icon
fernandorjesus Jul 22, 2026
b4b5d8c
style: adjust Drawer header/main spacing, clean up story debug styling
fernandorjesus Jul 22, 2026
0a2f563
feat: lock Drawer to right direction, add header back button
fernandorjesus Jul 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 21 additions & 221 deletions src/components/ui/Drawer/Drawer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { Button } from "@/components/ui/Button";
import { Badge } from "../Badge";
import type { DrawerWidth } from "./Drawer";
import {
Drawer,
Expand All @@ -15,7 +14,6 @@ import {
} from "./Drawer";

interface DrawerStoryProps {
direction?: "top" | "bottom" | "left" | "right";
modal?: boolean;
width?: DrawerWidth;
open?: boolean;
Expand All @@ -32,13 +30,13 @@ interface DrawerStoryProps {
preventScrollRestoration?: boolean;
autoFocus?: boolean;
nested?: boolean;
hideBackButton?: boolean;
onOpenChange?: (open: boolean) => void;
onAnimationEnd?: (open: boolean) => void;
onClose?: () => void;
}

function DrawerStory({
direction = "right",
width = "default",
modal = true,
open,
Expand All @@ -55,6 +53,7 @@ function DrawerStory({
preventScrollRestoration = false,
autoFocus,
nested = false,
hideBackButton = false,
onOpenChange,
onAnimationEnd,
onClose,
Expand All @@ -65,7 +64,6 @@ function DrawerStory({
autoFocus={autoFocus}
closeThreshold={closeThreshold}
defaultOpen={defaultOpen}
direction={direction}
disablePreventScroll={disablePreventScroll}
dismissible={dismissible}
fixed={fixed}
Expand All @@ -89,16 +87,14 @@ function DrawerStory({
</DrawerTrigger>

<DrawerContent>
<DrawerHeader>
<Badge color="purple">New</Badge>
</DrawerHeader>

<DrawerMain>
<DrawerHeader hideBackButton={hideBackButton}>
<DrawerTitle>Drawer Title</DrawerTitle>
<DrawerDescription>
This is a description of the drawer content.
</DrawerDescription>
</DrawerMain>
</DrawerHeader>

<DrawerMain>main content</DrawerMain>

<DrawerFooter>
<DrawerClose asChild>
Expand All @@ -110,6 +106,7 @@ function DrawerStory({
</Drawer>
);
}
DrawerStory.displayName = "Drawer";

const meta: Meta<typeof DrawerStory> = {
title: "Components/Drawer",
Expand All @@ -120,11 +117,6 @@ const meta: Meta<typeof DrawerStory> = {
},
tags: ["autodocs"],
argTypes: {
direction: {
control: "select",
options: ["top", "bottom", "left", "right"],
description: "Direction from which the drawer slides in",
},
modal: {
control: "boolean",
description:
Expand All @@ -133,8 +125,7 @@ const meta: Meta<typeof DrawerStory> = {
width: {
control: "select",
options: ["default", "sm", "md", "lg", "xl", "full"],
description:
"Width of the drawer (only applies when direction is right or left)",
description: "Width of the drawer",
},
open: {
control: "boolean",
Expand Down Expand Up @@ -197,6 +188,10 @@ const meta: Meta<typeof DrawerStory> = {
control: "boolean",
description: "Use when drawer is nested inside another drawer",
},
hideBackButton: {
control: "boolean",
description: "When true, hides the DrawerHeader back button",
},
onOpenChange: {
description: "Called when the open state changes",
},
Expand All @@ -214,7 +209,6 @@ type Story = StoryObj<typeof DrawerStory>;

export const Default: Story = {
args: {
direction: "right",
modal: true,
width: "default",
defaultOpen: false,
Expand All @@ -227,60 +221,30 @@ export const Default: Story = {
disablePreventScroll: false,
preventScrollRestoration: false,
nested: false,
hideBackButton: false,
},
};

export const FromBottom: Story = {
export const WithLongContent: Story = {
args: {
direction: "bottom",
modal: true,
width: "default",
},
render: (args) => (
<Drawer {...args}>
<DrawerTrigger asChild>
<Button variant="outlined">Open from Bottom</Button>
</DrawerTrigger>

<DrawerContent>
<DrawerHeader>
<Badge color="purple">New</Badge>
</DrawerHeader>

<DrawerMain>
<DrawerTitle>Quick Actions</DrawerTitle>
<DrawerDescription>Choose an action below.</DrawerDescription>
</DrawerMain>

<DrawerFooter>
<DrawerClose asChild>
<Button variant="outlined">Close</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
),
};

export const FromTop: Story = {
args: {
direction: "top",
modal: true,
width: "default",
},
render: (args) => (
<Drawer {...args}>
<DrawerTrigger asChild>
<Button variant="outlined">Open from Top</Button>
<Button variant="outlined">Open Drawer</Button>
</DrawerTrigger>

<DrawerContent>
<DrawerHeader>
<Badge color="purple">New</Badge>
<DrawerTitle>Notifications</DrawerTitle>
<DrawerDescription>
You have 3 unread notifications.
</DrawerDescription>
</DrawerHeader>

<DrawerMain>
<DrawerTitle>Notifications</DrawerTitle>
<p>You have 3 unread notifications.</p>
<p>You have 3 unread notifications.</p>
<p>You have 3 unread notifications.</p>
Expand All @@ -296,175 +260,11 @@ export const FromTop: Story = {

<DrawerFooter>
<DrawerClose asChild>
<Button variant="outlined">Close</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
),
};

export const FromLeft: Story = {
args: {
direction: "left",
modal: true,
width: "default",
},
render: (args) => (
<Drawer {...args}>
<DrawerTrigger asChild>
<Button variant="outlined">Open from Left</Button>
</DrawerTrigger>

<DrawerContent>
<DrawerHeader>
<Badge color="purple">New</Badge>
</DrawerHeader>

<DrawerMain>
<DrawerTitle>Notifications</DrawerTitle>
<DrawerDescription>
You have 3 unread notifications.
</DrawerDescription>
</DrawerMain>

<DrawerFooter>
<DrawerClose asChild>
<Button variant="outlined">Close</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
),
};

export const FromRight: Story = {
args: {
direction: "right",
modal: true,
width: "default",
},
render: (args) => (
<Drawer {...args}>
<DrawerTrigger asChild>
<Button variant="outlined">Open from Right</Button>
</DrawerTrigger>

<DrawerContent>
<DrawerHeader>
<Badge color="purple">New</Badge>
</DrawerHeader>

<DrawerMain>
<DrawerTitle>Notifications</DrawerTitle>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
<p className="mb-1 bg-red-500">You have 3 unread notifications.</p>
</DrawerMain>

<DrawerFooter>
<DrawerClose asChild>
<Button variant="outlined">Close</Button>
<Button variant="outlined">Cancel</Button>
</DrawerClose>
<Button>Send</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
),
};

function AllDirectionsStory(props: DrawerStoryProps) {
const {
modal = true,
width = "default",
direction: _direction,
...drawerProps
} = props;
const directions = [
{ direction: "bottom" as const, title: "Bottom Drawer" },
{ direction: "top" as const, title: "Top Drawer" },
{ direction: "left" as const, title: "Left Drawer" },
{ direction: "right" as const, title: "Right Drawer" },
];

return (
<div className="flex flex-wrap gap-4">
{directions.map(({ direction, title }) => (
<Drawer
direction={direction}
key={direction}
modal={modal}
width={width}
{...drawerProps}
>
<DrawerTrigger asChild>
<Button variant="outlined">{title}</Button>
</DrawerTrigger>

<DrawerContent>
<DrawerHeader>
<Badge color="purple">New</Badge>
</DrawerHeader>

<DrawerMain>
<DrawerTitle>{title}</DrawerTitle>
<DrawerDescription>
This is a description of the drawer content.
</DrawerDescription>
<p className="text-muted-foreground text-sm">
Opens from the {direction}
</p>
</DrawerMain>

<DrawerFooter>
<DrawerClose asChild>
<Button variant="outlined">Close</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
))}
</div>
);
}

export const AllDirections: Story = {
args: {
modal: true,
width: "default",
},
render: (args) => <AllDirectionsStory {...args} />,
};
Loading