callstack / callstack/react-native-paper

feat: modernize App bar to MD3

Đang mở
#4,973 0 bình luận 0 reaction 0 người được giao 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ả

The goal is to modernize the current App bar implementation according to the latest MD3 specs. Reuse the already existing theme tokens (typography, colors etc).

# Current state

## Appbar

**MD3 spec:** App bars (Top app bar)
**Specs link:** https://m3.material.io/components/app-bars/specs

### Color tokens

- Container background `surface` (flat) ✅
- `surfaceContainer` when `elevated` prop is set ✅
- Leading icon `onSurface` ✅
- Trailing icons `onSurfaceVariant` ✅
- Headline `onSurface` ✅

### Spacing / sizing

- Small height 64dp ✅
- Baseline medium height 112dp ✅
- Baseline large height 152dp ✅
- Typography per mode (`titleLarge` / `headlineSmall` / `headlineMedium`) ✅

### Behavior

- [ ] Medium flexible and Large flexible variants not implemented. Both are part of the M3 Expressive spec (Search app bar is covered by the separate `Searchbar` component)
- [ ] `medium` and `large` modes implement the baseline variants, which are explicitly not recommended in M3 Expressive. Flexible counterparts should be added and baselines deprecated
- [ ] `center-aligned` is a separate `mode` value. M3 Expressive merges it into `small` as a text-alignment configuration
- [ ] `elevated` is a static boolean. MD3 specifies the container color transitions reactively on scroll (`surface` to `surfaceContainer`); no scroll-reactive API is provided
- [ ] Subtitle support is `@deprecated` in v5. M3 Expressive medium flexible and large flexible variants restore subtitle as a supported element
- [ ] Image/logo in the container not supported. M3 Expressive anatomy includes image/logo as an optional element
- [ ] Filled trailing icon button not supported. M3 Expressive allows a single filled (primary or tonal) icon button in the trailing area

### Notes

- Current implementation covers the original M3 set (small, center-aligned, medium baseline, large baseline) but is missing the full M3 Expressive set
- Should be renamed to TopAppBar

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

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

Hướng nghiên cứu

Start by reading the current App bar implementation and the linked MD3 App bars specification, then compare the existing theme-token usage with every unchecked behavior in the issue. Done means the component covers the missing flexible variants, updated mode and elevation behavior, subtitle, image/logo, and filled trailing-button support, and is renamed to TopAppBar.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
design, frontend, mobile
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

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.