feat: modernize Searchbar to Material Design 3

Offen
  • Stimmt etwas nicht?
#4,978 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 11 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
45/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
react-native, typescript
Bereich
frontend, mobile

Rechercherichtung

Beginne damit, die Searchbar-Implementierung zu lokalisieren, und vergleiche ihre aktuellen Tokens, Farben, Größen und Modi mit den verlinkten Material 3 Search-Spezifikationen. Prüfe die Modernisierungsmuster in TextInput/TextField, Switch, Checkbox und FAB. Als abgeschlossen gilt die Aufgabe, wenn die Checkliste abgearbeitet, die komponentenspezifischen Tokens und die Verzeichnisstruktur aktualisiert sind und das Fokusverhalten sowie die Terminologie der ausgewählten Spezifikation entsprechen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

v6
  • Modernize the Searchbar to the latest specs: https://m3.material.io/components/search/
  • Reuse newly introduced tokens (shape, motion, typography, color etc)
  • Extract component specific tokens for easier maintenance.
  • Get inspired from TextInput/TextField, Switch, Checkbox, FAB components which have gone through modernization.

Current State

Searchbar

MD3 spec: Search
Specs link: https://m3.material.io/components/search/specs

Color tokens
  • Container background: surfaceContainerHigh ✅
  • Leading icon: onSurfaceVariant ✅
  • Clear / trailing icons: onSurfaceVariant ✅
  • Cursor: primary ✅
  • Input text color: onSurfaceVariant; should be onSurface
  • Placeholder text color: onSurface; should be onSurfaceVariant – these two are swapped ❌
Spacing / sizing
  • Bar height: minHeight: 56 ✅
  • Bar border radius: 7 * roundness = 28dp (corner.extra-large) ✅ for baseline style
  • View mode border radius: 0 (corner.none) ✅ for divided style
  • Input font: bodyLarge (16sp, overrides fontSize: 18 in StyleSheet) ✅
Behavior
  • Leading icon, clear icon, trailing icon, custom right render prop ✅
  • mode="bar" maps to divided/baseline style with elevation ✅
  • mode="view" maps to divided search view with bottom Divider ✅
  • State layers on icons via IconButton + TouchableRipple ✅
  • No focus animation: M3 Expressive (Feb 2025) requires the bar container margins to change from 24dp (unfocused) to 12dp (focused), creating a grow-wider effect; not implemented
  • mode values ("bar" / "view") do not align with M3 spec terminology ("contained" / "divided (baseline)")
  • M3 Expressive contained style is now the recommended style; the component partially implements the shape but missing the focus margin transition
  • No results/suggestions container component: spec anatomy includes a “container for search suggestions or results” as element 6; consumers must build this themselves with no provided primitive
Notes
  • Should be moved to its own directory
  • The divided style is deprecated in M3 Expressive in favor of contained; mode="view" implements the divided style
  • Result grouping with gaps (M3 Expressive) is a consumer-level concern and does not need to be part of the component itself
Vorherrschende Sprache
TypeScript
Sterne
14.5k
Forks
2.3k
Ø Merge
13 T. 16 Std.
Gemergte PRs (30 T.)
5

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus callstack/react-native-paper

Alle Issues in callstack/react-native-paper

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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