[WEB-4729] dev: propel scrollarea#7748
Conversation
anmolsinghbhatia
requested review from
prateekshourya29 and
vamsikrishnamathala
|
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. Warning Rate limit exceeded@anmolsinghbhatia has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 10 minutes and 12 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
WalkthroughAdds a new ScrollArea component, its barrel export, Storybook stories, build entry inclusion, and a package.json subpath export for distribution. No changes to existing modules. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant App as App/UI
participant SA as ScrollArea (propel)
participant Base as @base-ui-components/react/scroll-area
User->>App: Interact with scrollable content
App->>SA: Render <ScrollArea orientation/size/scrollType>
SA->>Base: Render Root + Viewport
SA->>Base: Render ScrollBar (horizontal/vertical) + Thumb
SA->>Base: Render Corner
Note over SA,Base: Styling and behavior vary by size and scrollType
Base-->>User: Scrolling behavior and visuals
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks (2 warnings, 1 inconclusive)❌ Failed checks (2 warnings, 1 inconclusive)
Poem
✨ Finishing Touches
🧪 Generate unit tests
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 |
|
Pull Request Linked with Plane Work Items
Comment Automatically Generated by Plane |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new scrollarea component to the propel design system. The component provides customizable scroll behavior with multiple size variants, orientations, and scroll type configurations.
- Adds a new ScrollArea component with support for different sizes (sm, md, lg), orientations (horizontal, vertical), and scroll types (always, scroll, hover)
- Includes comprehensive Storybook stories for component documentation and testing
- Updates build configuration and package exports to include the new component
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/propel/src/scrollarea/scrollarea.tsx | Main ScrollArea component implementation with props interface and styling logic |
| packages/propel/src/scrollarea/scrollarea.stories.tsx | Storybook stories and documentation for the ScrollArea component |
| packages/propel/src/scrollarea/index.ts | Export barrel file for the scrollarea module |
| packages/propel/tsdown.config.ts | Adds scrollarea to build configuration entry points |
| packages/propel/package.json | Adds scrollarea export path to package.json exports |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
packages/propel/src/scrollarea/scrollarea.stories.tsx (1)
88-101: Add a horizontal demo to validate track sizing and corner behaviorInclude a second story to exercise
orientation: "horizontal"and long-width content.Apply:
export const Default: Story = { args: { className: "h-64 w-80 border rounded-lg", size: "md", scrollType: "always", orientation: "vertical", }, render: (args) => ( <ScrollArea {...args}> <LongTextContent /> </ScrollArea> ), }; + +export const Horizontal: Story = { + args: { + className: "h-32 w-80 border rounded-lg", + size: "md", + scrollType: "always", + orientation: "horizontal", + }, + render: (args) => ( + <ScrollArea {...args}> + <div className="p-4 w-[60rem]"> + This line is intentionally very wide to force horizontal overflow. Scroll sideways → + </div> + </ScrollArea> + ), +};packages/propel/src/scrollarea/scrollarea.tsx (2)
73-81: Apply orientation-specific margin to the track
mr-1should only apply to vertical bars; addmb-1for horizontal to avoid odd spacing.- "group/track mr-1 flex justify-center rounded bg-transparent opacity-0 transition-opacity delay-300 ", + "group/track flex justify-center rounded bg-transparent opacity-0 transition-opacity delay-300", + orientation === "vertical" && "mr-1", + orientation === "horizontal" && "mb-1", orientation === "vertical" && verticalSizeStyles[size], orientation === "horizontal" && horizontalSizeStyles[size],
16-36: Forward ref to Root for better composabilityForwarding the ref matches patterns used across libraries and enables focusing/measurement from consumers.
-function ScrollArea({ - className, - children, - orientation, - scrollType, - size = "md", - ...props -}: ScrollAreaProps) { - return ( - <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", className)} {...props}> +type ScrollAreaRootElement = React.ElementRef<typeof BaseScrollArea.Root>; +const ScrollArea = React.forwardRef<ScrollAreaRootElement, ScrollAreaProps>(function ScrollArea( + { className, children, orientation, scrollType, size = "md", ...props }, + ref +) { + return ( + <BaseScrollArea.Root + ref={ref} + data-slot="scroll-area" + className={cn("relative", className)} + {...props} + > <BaseScrollArea.Viewport data-slot="scroll-area-viewport" className="focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline" > {children} </BaseScrollArea.Viewport> <ScrollBar orientation={orientation} scrollType={scrollType} size={size} /> <BaseScrollArea.Corner /> - </BaseScrollArea.Root> - ); -} + </BaseScrollArea.Root> + ); +});
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/propel/package.json(1 hunks)packages/propel/src/scrollarea/index.ts(1 hunks)packages/propel/src/scrollarea/scrollarea.stories.tsx(1 hunks)packages/propel/src/scrollarea/scrollarea.tsx(1 hunks)packages/propel/tsdown.config.ts(1 hunks)
⏰ 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: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
packages/propel/package.json (1)
30-31: LGTM: public subpath export added correctlyThe new
"./scrollarea"export aligns with the tsdown entry and barrel index. No issues spotted.packages/propel/src/scrollarea/index.ts (1)
1-1: LGTM: barrel exportStraightforward re-export; matches package.json subpath.
packages/propel/tsdown.config.ts (1)
16-16: LGTM: build entry added
src/scrollarea/index.tsis included in the build. Good placement.packages/propel/src/scrollarea/scrollarea.stories.tsx (1)
1-2: No change required – this file’s Storybook types import from@storybook/react-vitematches all other stories inpackages/propeland is consistent within that package.packages/propel/src/scrollarea/scrollarea.tsx (1)
77-79: No adjustments needed for data-hovering and data-scrolling
Verified that@base-ui-components/react/scroll-areaemitsdata-hoveringanddata-scrollingon the Scrollbar/Thumb exactly as used in the classes.
Description
This PR introduces the scrollarea component in propel.
Media
Summary by CodeRabbit
New Features
Documentation
Chores