[ScrollArea] Add scrollbar customization and expose sub-component refs
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
ScrollArea wraps Base UI's ScrollArea primitive. Lacks configuration props for scrollbar appearance and missing accessibility attributes.
Improvements
3. Make overscroll-behavior configurable
Hardcoded to auto in viewport CSS. Should be a prop for controlling scroll chaining behavior.
4. Expose sub-component refs via compound pattern
Cannot access Viewport or Content refs. Cannot customize Content/Viewport classNames from parent.
5. Add corner element customization
Corner element is rendered but not customizable.
API Differences from Base UI
| Base UI | Apsara | Notes |
|---|---|---|
ScrollArea.Root |
ScrollArea |
Flattened naming |
ScrollArea.Viewport |
(internal) | Not exposed |
ScrollArea.Scrollbar |
ScrollArea.Scrollbar |
Wrapped with defaults |
ScrollArea.Thumb |
(internal) | Not exposed |
ScrollArea.Corner |
(internal) | Not exposed |
Moved to Cross-Cutting Issues
The following items have been moved to cross-cutting issues that address them across all components:
- Replace hardcoded CSS values with design tokens (#672)
- Accessibility baseline (#673)
Files
packages/raystack/raystack/components/scroll-area/
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the files under packages/raystack/raystack/components/scroll-area/ and compare the existing wrapper with the Base UI ScrollArea primitive. Trace the current Viewport, Content, Scrollbar, Thumb, and Corner usage, then verify that the requested props, refs, classNames, and corner customization are exposed without duplicating the cross-cutting work moved to issues #672 and #673.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100