callstack / callstack/react-native-paper
feat: modernize progress indicators
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
- Modernize progress indicators according to the MD3 Specs and reuse existing MD theme foundation tokens (motion, shape etc) where appropriate.
- Extract component tokens to a separate file for easier maintenance
# Current State
Existing "Activity Indicator" and "Progress Bar" components correspond to MD3 Progress Indicators.
## Activity Indicator
**MD3 spec:** Progress indicators (Circular)
**Specs link:** https://m3.material.io/components/progress-indicators/specs
### Color tokens
- [ ] No track color. MD3 requires a track arc behind the indicator (token: `secondaryContainer`); only `primary` is rendered
### Spacing / sizing
- [ ] Stroke width is `size / 10` (2.4dp @ small, 4.8dp @ large). MD3 specifies a fixed 4dp stroke for both indicator and track
### Behavior
- [ ] Arc ends are square (border clipping technique). MD3 requires rounded stroke caps
- [ ] No track rendered. MD3 always shows the inactive track arc
- [ ] M3 Expressive wavy circular and linear indicators not implemented
### Notes
- Rename to match MD3: **`CircularProgressIndicator`** and move to a “Progress Indicators” directory together with Linear Progress Indicator.
- Entire rendering approach is MD2-era (two clipped half-border views). MD3-compliant implementation needs SVG or canvas-based arc for rounded caps and track
## Progress Bar
**MD3 spec:** Linear progress indicator
**Specs link:** https://m3.material.io/components/progress-indicators/specs
### Color tokens
- Active indicator: `color || theme.colors.primary` ✅
- [ ] Track: `theme.colors.surfaceVariant`; spec requires `secondaryContainer` ❌
- [ ] No stop indicator rendered; spec defines a stop indicator at 100% (color `primary`)
### Spacing / sizing
- Height: 4dp ✅
- [ ] Track has no `borderRadius`; spec `corner.full` requires `borderRadius: 2` for 4dp height
- [ ] Active indicator fill has no `borderRadius`; same issue as track
- [ ] No 4dp horizontal inset from screen edges; spec shows 4dp padding on each side
- [ ] Configurable thickness not supported (M3 Expressive)
- [ ] Wavy shape (amplitude 3dp, wavelength 40dp, height 10dp) not supported (M3 Expressive)
### Behavior
- Determinate mode: progress value animates via `scaleX` ✅
- Indeterminate mode: looping translate + scaleX animation ✅
- Visibility fade in/out ✅
- RTL support ✅
- [ ] Stop indicator not shown at the end of the track
### Notes
- Should be renamed `LinearProgressIndicator` and placed in a shared `ProgressIndicator/` directory alongside `ActivityIndicator` (circular), matching MD3 naming
- `ProgressBar` name and the `color` prop (which bypasses the token system) are library-level issues to address at rename time
Contributor guide
Assessment
This issue has not been assessed yet.