facebook / facebook/astryx

XDSScrollArea — other internal library migration (940 usages)

Open
#572 2 comments 0 reactions 0 assignees View on GitHub
component enhancement
Dominant language
TypeScript
Stars
13k
Forks
1.1k
Avg merge
1d 15h
Merged PRs (30d)
690

Description

## other internal library → XDS Migration Gap

**other internal library usage count:** 940

### What it does
Custom scrollbar styling container. other internal library uses `ScrollArea` heavily for panels, code blocks, chat views, and any content area that needs styled scrollbars. It provides a consistent cross-browser scrollbar appearance with custom track/thumb styling.

### Prior art in XDS
- #171 (XDSScrollableArea) — closed, not implemented

### Approach considerations
1. **Wrap Radix scroll-area** — Radix provides a well-tested accessible scroll container. XDS could wrap `@radix-ui/react-scroll-area` with XDS styling tokens.
2. **CSS-only approach** — Modern CSS `scrollbar-width`, `scrollbar-color`, and `::-webkit-scrollbar` pseudo-elements may be sufficient. Lighter weight, no JS runtime.
3. **Hybrid** — CSS-only by default with an optional JS-enhanced mode for custom thumb rendering.

### Key other internal library features to evaluate
- Vertical + horizontal scrolling
- Auto-hide scrollbars
- Custom scrollbar sizing
- Content overflow detection
- Composable with panels, dialogs, and sidebars

### Context
High-usage other internal library component (940 imports). Part of the other internal library → XDS OSS migration effort to ensure feature parity for teams migrating.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.