Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Caution Review failedThe pull request is closed. ℹ️ Recent review infoConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughReplaces the Sheet component with a new Drawer implementation across UI code, styles, tests, docs, examples, and public exports; adds Drawer primitives, types, demos, and a test suite; removes Sheet files and exports; updates Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App as Client App
participant DrawerRoot as Drawer.Root
participant Portal as Portal/Viewport
participant DrawerContent as Drawer.Content
User->>App: Click Trigger (open)
App->>DrawerRoot: set open=true (onOpenChange)
DrawerRoot->>Portal: mount Backdrop & Viewport
Portal->>DrawerContent: render panel (side)
DrawerContent-->>User: visible drawer (title/body/close)
User->>DrawerContent: Click Close / Escape / Backdrop
DrawerContent->>DrawerRoot: onOpenChange(false)
DrawerRoot->>Portal: unmount panel & backdrop
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/www/src/content/docs/components/drawer/demo.ts`:
- Around line 5-18: getCode currently passes all props to both <Drawer> and
<Drawer.Content> by calling getPropsString(props) twice; filter props into
rootProps and contentProps first (e.g., remove content-only keys like
showCloseButton from rootProps) and then call getPropsString(rootProps) for the
Drawer root and getPropsString(contentProps) for Drawer.Content so content-only
props aren’t added to the root and avoid React unknown-prop warnings. Ensure the
unique symbols referenced are getCode and getPropsString and specifically
exclude showCloseButton (and any other content-only keys) from the rootProps
set.
In `@apps/www/src/content/docs/components/drawer/index.mdx`:
- Around line 77-83: Update the "Accessibility" section to qualify behaviors
based on the Drawer component's modal prop: state that aria-modal="true" and
full focus trapping apply when modal is true, focus is restored on close when
trapping is enabled (modal === true or modal === 'trap-focus'), and that Escape
key and swipe-to-close gestures are supported regardless of modal mode; keep the
note that the title is announced via aria-labelledby and explicitly mention
which behaviors are conditional on modal vs non-modal modes.
In `@apps/www/src/content/docs/components/drawer/props.ts`:
- Around line 37-41: The docs currently type overlayProps as a minimal object
with only className and style which is inconsistent with DrawerContentProps
expecting DrawerPrimitive.Backdrop.Props; update the overlayProps declaration to
use the fuller Backdrop props type (e.g. overlayProps?:
DrawerPrimitive.Backdrop.Props) so handlers/ARIA and other attributes are
exposed, and ensure the JSDoc comment reflects "full backdrop props" rather than
just className/style; adjust imports or namespace references if necessary to
resolve DrawerPrimitive.Backdrop.Props.
In `@packages/raystack/components/drawer/__tests__/drawer.test.tsx`:
- Around line 1-4: Tests are failing due to missing PointerEvent in jsdom; add a
polyfill so PointerEvent exists during tests—either add it to your global test
setup (vitest setupFiles) or at the top of this test module (before using
fireEvent/userEvent) by defining global.PointerEvent/window.PointerEvent if
absent; ensure the polyfill extends MouseEvent and accepts type/props so
existing tests using fireEvent/userEvent behave normally (reference this test
module imports: fireEvent, render, screen, waitFor and userEvent).
In `@packages/raystack/components/drawer/drawer-root.tsx`:
- Around line 5-27: The sideToSwipeDirection mapping uses 'top'/'bottom' but
Base UI expects 'up'|'down'|'left'|'right', so update sideToSwipeDirection in
drawer-root.tsx to map top => 'up' and bottom => 'down' (keep left/right as
'left'/'right'), and ensure the type for sideToSwipeDirection/swipeDirection
(and the Side mapping) aligns with DrawerPrimitive.Root's expected
swipeDirection union used in DrawerRoot so the computed swipeDirection passed to
DrawerPrimitive.Root is valid.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (26)
apps/www/src/app/examples/page.tsxapps/www/src/components/playground/drawer-examples.tsxapps/www/src/components/playground/index.tsapps/www/src/components/playground/sheet-examples.tsxapps/www/src/content/docs/(overview)/index.mdxapps/www/src/content/docs/components/drawer/demo.tsapps/www/src/content/docs/components/drawer/index.mdxapps/www/src/content/docs/components/drawer/props.tsapps/www/src/content/docs/components/sheet/demo.tsapps/www/src/content/docs/components/sheet/index.mdxapps/www/src/content/docs/components/sheet/props.tspackages/raystack/README.mdpackages/raystack/components/drawer/__tests__/drawer.test.tsxpackages/raystack/components/drawer/drawer-content.tsxpackages/raystack/components/drawer/drawer-misc.tsxpackages/raystack/components/drawer/drawer-root.tsxpackages/raystack/components/drawer/drawer.module.csspackages/raystack/components/drawer/drawer.tsxpackages/raystack/components/drawer/index.tsxpackages/raystack/components/sheet/__tests__/sheet.test.tsxpackages/raystack/components/sheet/index.tsxpackages/raystack/components/sheet/sheet-content.tsxpackages/raystack/components/sheet/sheet.module.csspackages/raystack/components/sheet/sheet.tsxpackages/raystack/index.tsxpackages/raystack/package.json
💤 Files with no reviewable changes (9)
- packages/raystack/components/sheet/index.tsx
- apps/www/src/components/playground/sheet-examples.tsx
- packages/raystack/components/sheet/tests/sheet.test.tsx
- apps/www/src/content/docs/components/sheet/props.ts
- packages/raystack/components/sheet/sheet-content.tsx
- packages/raystack/components/sheet/sheet.tsx
- apps/www/src/content/docs/components/sheet/demo.ts
- packages/raystack/components/sheet/sheet.module.css
- apps/www/src/content/docs/components/sheet/index.mdx
paanSinghCoder
approved these changes
Feb 26, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR migrates Sheet component to use Base UI Drawer
Type of Change
How Has This Been Tested?
[Describe the tests that you ran to verify your changes]
Checklist:
Screenshots (if appropriate):
[Add screenshots here]
Related Issues
[Link any related issues here using #issue-number]
Summary by CodeRabbit
New Features
Documentation
Examples
Tests
Chores