callstack / callstack/react-native-paper

feat: modernize progress indicators

Đang mở
#4,971 0 bình luận 0 reaction 1 người được giao Được @adrcotfas nhận Xem trên GitHub
v6
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

- 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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.