raystack / raystack/apsara

[ScrollArea] Add scrollbar customization and expose sub-component refs

Open
#631 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component triage
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.