callstack / callstack/react-native-paper

feat: modernize Badge according to MD3

Offen
#4,974 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
v6
Vorherrschende Sprache
TypeScript
Sterne
14.5k
Forks
2.2k
Ø Merge
5 T. 23 Std.
Gemergte PRs (30 T.)
12

Beschreibung

The goal is to modernize the Badge component to the latest Material Design specs by reusing theme tokens (shape, typography, colors etc).

# Current state

## Badge

**MD3 spec:** Badges
**Specs link:** https://m3.material.io/components/badges/specs

### Color tokens

- Background `error` ✅
- Label text `onError` ✅

### Spacing / sizing

- [ ] Default `size` is 20dp. MD3 defines small badge at 6dp (no label) and large badge at 16dp (with label)
- [ ] No small/large distinction. Size should be determined automatically: 6dp when no children, 16dp when children are present
- [ ] `paddingHorizontal: 3`. Spec requires 4dp between badge edge and text
- [ ] `fontSize = size * 0.5` yields 8sp at 16dp. Spec requires 11sp for large badge label text
- [ ] Large badge max character count size (16x34dp) not handled; text currently overflows unconstrained

### Behavior

- [ ] No automatic small vs large variant. Component should render as a 6dp dot when childless and as a 16dp pill when a label is provided

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.