Conversation
kylengn
requested review from
EnzalRad,
dvxam and
noe-charmet
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThe pull request introduces a new Sheet component—a Radix Dialog-based sliding overlay UI element with configurable sides and full subcomponent composition. Minor enhancements to existing components include replacing a hard-coded Esc label with a reusable Kbd component in ModalHeader and adding an optional container prop to SelectContent. The Sheet is exported at the library's public entry point and documented with five Storybook stories. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
libs/react/ui/src/components/sheet/sheet.tsx (1)
122-156: Consider making the breakpoint configurable.The
useMediaQueryhook uses a hard-coded breakpoint'(min-width: 768px)', while the similarModalHeadercomponent receives it as a prop via context. For consistency and flexibility, consider accepting a breakpoint prop or using a shared context pattern like Modal does.💡 Optional: Make breakpoint configurable
-function SheetHeader({ +function SheetHeader({ + breakpoint = '(min-width: 768px)', className, showEscIndicator = true, showClose = true, children, ...props -}: SheetHeaderProps) { - const isDesktop = useMediaQuery('(min-width: 768px)'); +}: SheetHeaderProps & {breakpoint?: string}) { + const isDesktop = useMediaQuery(breakpoint);Alternatively, you could introduce a SheetContext similar to ModalContext to share configuration across all Sheet subcomponents.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
libs/react/ui/src/components/index.tslibs/react/ui/src/components/modal/modal.tsxlibs/react/ui/src/components/select/select.tsxlibs/react/ui/src/components/sheet/index.tslibs/react/ui/src/components/sheet/sheet.stories.tsxlibs/react/ui/src/components/sheet/sheet.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*
⚙️ CodeRabbit configuration file
We handle errors at the edge of our applications in most cases. Do not recommend to add error handling around every single function. We prefer them to bubble up and be handled at upper layers.
Files:
libs/react/ui/src/components/index.tslibs/react/ui/src/components/modal/modal.tsxlibs/react/ui/src/components/select/select.tsxlibs/react/ui/src/components/sheet/index.tslibs/react/ui/src/components/sheet/sheet.tsxlibs/react/ui/src/components/sheet/sheet.stories.tsx
🧬 Code graph analysis (3)
libs/react/ui/src/components/modal/modal.tsx (1)
libs/react/ui/src/components/kbd/kbd.tsx (1)
Kbd(6-20)
libs/react/ui/src/components/sheet/sheet.tsx (4)
libs/react/ui/src/hooks/useMediaQuery.ts (1)
useMediaQuery(71-87)libs/react/ui/src/components/kbd/kbd.tsx (1)
Kbd(6-20)libs/react/ui/src/components/button/button.tsx (1)
Button(50-91)libs/react/ui/src/components/icon/icon.tsx (1)
Icon(86-90)
libs/react/ui/src/components/sheet/sheet.stories.tsx (6)
libs/react/ui/src/components/sheet/sheet.tsx (7)
Sheet(218-218)SheetTrigger(221-221)SheetContent(223-223)SheetHeader(224-224)SheetTitle(226-226)SheetDescription(227-227)SheetFooter(225-225)libs/react/ui/src/components/button/button.tsx (1)
Button(50-91)libs/react/ui/src/components/typography/text.tsx (1)
Text(27-50)libs/common/config/src/index.ts (1)
libs/react/ui/src/components/label/label.tsx (1)
Label(13-15)libs/react/ui/src/components/input/input.tsx (1)
Input(24-43)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Agent
- GitHub Check: Continuous integration
🔇 Additional comments (9)
libs/react/ui/src/components/modal/modal.tsx (1)
5-5: LGTM! Good refactor to use the reusable Kbd component.Replacing the hard-coded
<kbd>element with the reusableKbdcomponent improves consistency across the UI library and centralizes styling.Also applies to: 207-207
libs/react/ui/src/components/select/select.tsx (1)
96-106: LGTM! Container prop enables flexible portal mounting.The addition of the optional
containerprop allows consumers to control where the select dropdown is rendered in the DOM, which is useful for avoiding z-index conflicts or integrating with other overlay systems.libs/react/ui/src/components/sheet/sheet.tsx (3)
10-46: LGTM! Well-structured variant system for the Sheet component.The overlay and content variants provide clear animation states and support all four side positions (top, bottom, left, right) with appropriate transitions and borders.
88-115: LGTM! SheetContent correctly implements portal and overlay composition.The component properly wraps content in a portal with optional container support, renders the overlay, and applies the appropriate variant classes. The internal structure with shadow insets matches the Modal pattern.
200-215: LGTM! SheetBody properly handles scrolling content.The component correctly applies flex-1 for growth, overflow-y-auto for vertical scrolling, and includes the scrollbar class for styled scrollbars.
libs/react/ui/src/components/index.ts (1)
28-28: LGTM! Sheet component properly exported.The barrel export is correctly positioned alphabetically and makes the Sheet component available in the public API.
libs/react/ui/src/components/sheet/index.ts (1)
1-1: LGTM! Standard barrel export pattern.The re-export makes all Sheet components and types available from the sheet module index.
libs/react/ui/src/components/sheet/sheet.stories.tsx (2)
24-44: LGTM! Well-designed reusable helper for story play functions.The
openSheetAndScreenshothelper eliminates code duplication across stories and provides consistent visual regression testing. The step-by-step approach with proper waiting ensures stable screenshots.
58-277: LGTM! Comprehensive story coverage for the Sheet component.The five stories effectively demonstrate:
- Default right-side sheet with header, body, and footer
- Left-side variant
- Practical form usage
- Header without close button
- Long scrollable content
This provides excellent documentation and visual regression coverage for the component.
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
There was a problem hiding this comment.
Pull request overview
This PR introduces a new Sheet component to the UI library, providing a slide-in panel interface built on top of Radix UI's Dialog primitive. The Sheet component follows established patterns from the existing Modal component and integrates with the design system's styling tokens.
Key Changes:
- Added a fully-featured Sheet component with customizable slide directions (top, bottom, left, right)
- Refactored Modal component to use the new Kbd component for keyboard shortcut indicators
- Extended Select component to support custom container prop for portal rendering
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
libs/react/ui/src/components/sheet/sheet.tsx |
Main Sheet component implementation with subcomponents (Header, Footer, Body, Title, Description) and variant styling |
libs/react/ui/src/components/sheet/sheet.stories.tsx |
Comprehensive Storybook stories demonstrating various Sheet configurations and use cases |
libs/react/ui/src/components/sheet/index.ts |
Barrel export for Sheet components |
libs/react/ui/src/components/modal/modal.tsx |
Refactored to use shared Kbd component instead of inline kbd element |
libs/react/ui/src/components/select/select.tsx |
Added container prop to SelectContent for custom portal rendering |
libs/react/ui/src/components/index.ts |
Added Sheet to component exports |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
2 participants
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.