callstack / callstack/react-native-paper

feat: modernize App bar to MD3

Ouverte
#4,973 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
v6
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

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

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.