feat: modernize Searchbar to Material Design 3

Ouverte
  • Quelque chose ne va pas ?
#4,978 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
45/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Calme
Stack technique
react-native, typescript
Domaine
frontend, mobile

Piste de recherche

Commencez par localiser l’implémentation de Searchbar et comparez ses tokens, couleurs, dimensions et modes actuels avec les spécifications Search de Material 3 liées. Examinez les modèles de modernisation dans TextInput/TextField, Switch, Checkbox et FAB. Le travail est considéré comme terminé lorsque la checklist est traitée, que les tokens spécifiques au composant et la structure des répertoires sont mis à jour, et que le comportement du focus ainsi que la terminologie correspondent à la spécification sélectionnée.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.3k
Merge moyen
3 j 14 h
PR mergées (30 j)
12

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de callstack/react-native-paper

Toutes les issues de callstack/react-native-paper

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

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