[WEB-2278] dev: scroll area enhancement#6612
Merged
sriramveeraghanta merged 6 commits intopreviewfrom Feb 17, 2025
Merged
Conversation
Contributor
WalkthroughThis update enhances the UI customization and navigation behavior across multiple parts of the codebase. In the Tailwind CSS configuration, a new Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant SA as ScrollArea Component
participant RRoot as RadixScrollArea.Root
participant RViewport as RadixScrollArea.Viewport
participant RScrollbar as RadixScrollArea.Scrollbar
participant RThumb as RadixScrollArea.Thumb
U->>SA: Render ScrollArea (with props)
SA->>RRoot: Initialize scroll area container
RRoot->>RViewport: Render content area
SA->>RScrollbar: Render vertical and horizontal scrollbars
RScrollbar->>RThumb: Render and style scroll thumb (hover/active states)
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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: 0
🧹 Nitpick comments (3)
packages/ui/src/scroll-area.tsx (2)
17-27: Consider extracting size styles to constants.The size styles objects could be moved outside the component to avoid recreation on each render.
+const SCROLLBAR_SIZE_STYLES = { + sm: "p-[0.112rem] data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:h-2.5", + md: "p-[0.152rem] data-[orientation=vertical]:w-3 data-[orientation=horizontal]:h-3", + lg: "p-[0.225rem] data-[orientation=vertical]:w-4 data-[orientation=horizontal]:h-4", +}; + +const THUMB_SIZE_STYLES = { + sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2", + md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:min-w-14 before:-translate-x-1/2 before:-translate-y-1/2", + lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2", +}; export const ScrollArea: FC<TScrollAreaProps> = (props) => { const { type = "always", className = "", scrollHideDelay = 600, size = "md", children } = props; - - const sizeStyles = { - sm: "p-[0.112rem] data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:h-2.5", - md: "p-[0.152rem] data-[orientation=vertical]:w-3 data-[orientation=horizontal]:h-3", - lg: "p-[0.225rem] data-[orientation=vertical]:w-4 data-[orientation=horizontal]:h-4", - }; - - const thumbSizeStyles = { - sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2", - md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:min-w-14 before:-translate-x-1/2 before:-translate-y-1/2", - lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2", - };
29-65: Enhance accessibility with ARIA attributes.The scroll area could benefit from additional ARIA attributes to improve accessibility.
return ( <RadixScrollArea.Root type={type} - className={cn("group overflow-hidden", className)} + className={cn("group overflow-hidden", className)} + aria-orientation="vertical" + aria-label="Scrollable content" scrollHideDelay={scrollHideDelay} > - <RadixScrollArea.Viewport className="size-full">{children}</RadixScrollArea.Viewport> + <RadixScrollArea.Viewport className="size-full" role="region">{children}</RadixScrollArea.Viewport> <RadixScrollArea.Scrollbar className={cn( "group/track flex touch-none select-none bg-transparent transition-colors duration-[160ms] ease-out", - sizeStyles[size] + SCROLLBAR_SIZE_STYLES[size] )} orientation="vertical" + aria-label="Vertical scrollbar" > <RadixScrollArea.Thumb className={cn( "relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active", - thumbSizeStyles[size] + THUMB_SIZE_STYLES[size] )} /> </RadixScrollArea.Scrollbar> <RadixScrollArea.Scrollbar className={cn( "group/track flex touch-none select-none bg-transparent transition-colors duration-[160ms] ease-out", - sizeStyles[size] + SCROLLBAR_SIZE_STYLES[size] )} orientation="horizontal" + aria-label="Horizontal scrollbar" > <RadixScrollArea.Thumb className={cn( "relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active", - thumbSizeStyles[size] + THUMB_SIZE_STYLES[size] )} /> </RadixScrollArea.Scrollbar> </RadixScrollArea.Root> );packages/tailwind-config/tailwind.config.js (1)
206-210: Consider using CSS variables for scrollbar colors.For consistency with other color definitions in the theme, consider using CSS variables instead of hardcoded RGBA values.
scrollbar: { - neutral: "rgba(96, 100, 108, 0.1)", - hover: "rgba(96, 100, 108, 0.25)", - active: "rgba(96, 100, 108, 0.7)", + neutral: convertToRGBA("--color-scrollbar-neutral", 0.1), + hover: convertToRGBA("--color-scrollbar-hover", 0.25), + active: convertToRGBA("--color-scrollbar-active", 0.7), },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (5)
packages/tailwind-config/tailwind.config.js(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/index.ts(1 hunks)packages/ui/src/scroll-area.tsx(1 hunks)web/core/components/workspace/sidebar/project-navigation.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (3)
packages/ui/src/index.ts (1)
28-28: LGTM!The new export follows the established pattern and makes the ScrollArea component available for use.
web/core/components/workspace/sidebar/project-navigation.tsx (1)
157-157: LGTM!The change to use
i18n_keyinstead ofkeyfor active state determination is a good practice for internationalization.packages/ui/package.json (1)
37-37: Dependency Addition for ScrollArea ComponentThe new dependency
"@radix-ui/react-scroll-area": "^1.2.3"has been correctly added to support the newScrollAreacomponent. Please verify that this version is compatible with your overall UI library and that no breaking changes occur with updates from Radix UI.
gakshita
reviewed
Feb 17, 2025
gurusainath
approved these changes
Feb 17, 2025
gakshita
approved these changes
Feb 17, 2025
sriramveeraghanta
approved these changes
Feb 17, 2025
lifeiscontent
pushed a commit
that referenced
this pull request
Aug 18, 2025
* chore: radix-ui react-scroll-area added to plane ui package * chore: scrollbar color token added to tailwind config * dev: scroll area component * chore-scroll-area-component-improvement * fix: build error * chore: code refactor
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
4 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.
Summary
This PR introduces the ScrollArea component. Previously, the native scrollbar occupied its own space, causing content shifts and flickering. Additionally, its behavior was inconsistent across different browsers.
Type of Change
References
[WEB-2278]
Summary by CodeRabbit
New Features
Bug Fixes
Chores
@radix-ui/react-scroll-area.