Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

feat: modernize Badge according to MD3

Aperta
#4,974 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 7 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
58/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react-native, typescript
Ambito
mobile

Direzione di ricerca

Inizia con il componente Badge esistente e confronta le sue dimensioni attuali, il padding, la tipografia e il comportamento di overflow con le specifiche dei badge di Material Design 3 collegate. Il lavoro è completato quando i badge senza figli vengono renderizzati come punti da 6dp, i badge con etichetta come pill da 16dp, la spaziatura e la dimensione del testo usano i valori specificati e le etichette lunghe rispettano il limite di 16x34dp.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

v6

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
Lingua principale
TypeScript
Stelle
14.5k
Fork
2.2k
Merge medio
6g 12h
PR unite (30g)
5

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di callstack/react-native-paper

Tutte le issue di callstack/react-native-paper

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.