callstack / callstack/react-native-paper
feat: modernize App bar to MD3
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
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
贡献指南
调研方向
先阅读当前的 App bar 实现和链接的 MD3 App bars 规范,然后将现有的 theme tokens 使用情况与 issue 中每一项未勾选的行为进行对比。完成的标准是:组件涵盖缺失的灵活变体、更新后的 mode 和 elevation 行为、subtitle、image/logo 以及对 filled trailing buttons 的支持,并重命名为 TopAppBar。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- design, frontend, mobile
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100