feat(react): `Drawer` by junghyeonsu · Pull Request #1463 · daangn/seed-design

junghyeonsu · 2026-04-15T06:47:31Z

요약

상하좌우 4방향 슬라이드 패널을 지원하는 Drawer 컴포넌트 추가
Size variant: small (480px), medium (720px), large (960px) — 좌우 방향 전용
StyleProps 오버라이드로 커스텀 너비/높이 지원 (Fluid 모드)
전체 파이프라인: rootage spec → qvism recipe → React 컴포넌트 → snippet 레이어 → 문서 → storybook → stackflow activity

디자인 결정

Size 네이밍: small/medium/large (SEED Design 전체 일관성, 디자이너 확인 완료)
full variant 없음: StyleProps (width="100%")로 커버
Placement: left/right/top/bottom (RTL은 시스템 전체 전환 시 함께 대응)
상하 방향 max-height: 내부 기본값 90vh, StyleProps로 오버라이드 가능

변경 내역

Rootage: packages/rootage/components/drawer.yaml
Recipe: packages/qvism-preset/src/recipes/drawer.ts (4방향 애니메이션, size variant)
React: packages/react/src/components/Drawer/ (discriminated union 타입)
Snippet: docs/registry/ui/drawer.tsx
예제: 9개 (preview, trigger, controlled, direction, size, dismissible, show-close-button, custom-width, non-modal)
Storybook: Light/Dark/FontScaling 스토리
문서: React 컴포넌트 문서 + Design 가이드라인 문서
Stackflow: ActivityDrawer + ActivityDrawerActivity

테스트

bun packages:build 통과
bun test:all — 673 pass, 0 fail
Storybook 시각 확인 (Light, Dark, Font Scaling)
Stackflow SPA 수동 확인 (direction × size 조합)
Modal/non-modal 동작
StyleProps 오버라이드 (커스텀 width/maxHeight)

🤖 Generated with Claude Code

Add a new Drawer component that slides in from any edge of the screen. Unlike BottomSheet (mobile-only, bottom direction), Drawer supports all four directions and provides size presets (small/medium/large) for horizontal drawers. Includes: rootage spec, qvism recipe, React styled component, snippet layer, 9 examples, Storybook stories, React/Design docs, and Stackflow activity. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

changeset-bot · 2026-04-15T06:47:36Z

⚠️ No Changeset found

Latest commit: 8b8f2d7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-04-15T06:48:54Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3ebfa99e-b588-499f-868f-34cbaedeecd9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch drawer-component

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-04-15T06:50:13Z

Alpha Preview (Storybook)

Branch Preview URL: https://drawer-component.seed-design-storybook.pages.dev
Preview URL: https://176fed55.seed-design-storybook.pages.dev
Commit: 8b8f2d7

Merge origin/alpha into drawer-component, resolve minified CSS conflicts, regenerate CSS, and add drawer snippet to stackflow-spa. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-04-15T06:54:53Z

Alpha Preview (Stackflow SPA)

Branch Preview URL: https://drawer-component.seed-design-stackflow-spa.pages.dev
Preview URL: https://70ab9639.seed-design-stackflow-spa.pages.dev
Commit: 8b8f2d7

- Remove cornerRadius from content (no border on drawer panels) - Remove body paddingX (full bleed, user controls via StyleProps) - Header: add paddingX x6, fix gap x2→x1.5 - Footer: fix paddingX global-gutter→x6, paddingTop x3→x4, paddingBottom x4→x6, add gap x2 - Remove description paddingX (inherits from header) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Positioner is a plain fixed container. Content uses position: absolute with direction-based inset (top/bottom/left/right) instead of flex alignment on positioner — fixes direction being inverted. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-04-15T08:22:05Z

Alpha Preview (Docs)

Branch Preview URL: https://drawer-component.seed-design.pages.dev
Preview URL: https://d5a1e4f3.seed-design.pages.dev
Commit: 8b8f2d7

- Add drawer-close-button.yaml with ghost-style tokens (transparent bg, 52px, r3 radius) - Replace bottomSheetCloseButton vars with dedicated drawerCloseButton vars in recipe - Add --seed-box-width/height/max-width/max-height --responsive declarations to content slot (fixes custom width/height props not working via withStyleProps) - Add pressed state and consistent corner radius to close button - Add DrawerCloseButton.displayName (was missing) - Fix dismissible example: add controlled state + close button so users can dismiss - Rename custom-width example to custom-size (covers both width and height) - Add scroll example with ScrollFog (bottom) + Divider (on scroll) pattern Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…xample - Add ::after pseudo-element to content slot for all 4 directions to prevent background gap when dragging (matches BottomSheet pattern) - right: extends right with width 100vw - left: extends left with width 100vw - bottom: extends down with height 200vh - top: extends up with height 200vh - Update custom-size example with enough content to demonstrate maxHeight Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add maxWidth: 100vw to left/right direction content slots so drawer size variants (480px/720px/960px) don't exceed the viewport on mobile. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

merge: resolve conflicts with origin/alpha

4945fa9

Merge origin/alpha into drawer-component, resolve minified CSS conflicts, regenerate CSS, and add drawer snippet to stackflow-spa. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

junghyeonsu and others added 3 commits April 15, 2026 16:34

fix(drawer): update snippet dependency versions from alpha to 1.3.0

9562a69

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

junghyeonsu self-assigned this Apr 15, 2026

junghyeonsu changed the title ~~feat(drawer): add Drawer component with direction and size variants~~ feat(drawer): Drawer Apr 15, 2026

junghyeonsu changed the title ~~feat(drawer): Drawer~~ feat: Drawer Apr 15, 2026

junghyeonsu changed the title ~~feat: Drawer~~ feat(react): Drawer Apr 15, 2026

junghyeonsu marked this pull request as draft April 15, 2026 08:47

junghyeonsu and others added 3 commits April 15, 2026 19:21

fix(drawer): cap left/right drawer width to viewport on mobile

8b8f2d7

Add maxWidth: 100vw to left/right direction content slots so drawer size variants (480px/720px/960px) don't exceed the viewport on mobile. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react): `Drawer`#1463

feat(react): `Drawer`#1463
junghyeonsu wants to merge 8 commits intoalphafrom
drawer-component

junghyeonsu commented Apr 15, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Apr 15, 2026 •

edited

Loading

Review skipped

Uh oh!

github-actions bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

junghyeonsu commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

요약

디자인 결정

변경 내역

테스트

Uh oh!

changeset-bot bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Storybook)

Uh oh!

github-actions bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Stackflow SPA)

Uh oh!

github-actions bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Docs)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

junghyeonsu commented Apr 15, 2026 •

edited

Loading

changeset-bot bot commented Apr 15, 2026 •

edited

Loading

coderabbitai bot commented Apr 15, 2026 •

edited

Loading

github-actions bot commented Apr 15, 2026 •

edited

Loading

github-actions bot commented Apr 15, 2026 •

edited

Loading

github-actions bot commented Apr 15, 2026 •

edited

Loading