feat: modernize Searchbar to Material Design 3

Aberta
  • Algo errado?
#4,978 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 11 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
45/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Pouca atividade
Stack de tecnologia
react-native, typescript
Domínio
frontend, mobile

Direção de pesquisa

Comece localizando a implementação de Searchbar e compare seus tokens, cores, tamanhos e modos atuais com as especificações vinculadas de Search do Material 3. Revise os padrões de modernização em TextInput/TextField, Switch, Checkbox e FAB. Considera-se concluído quando a checklist tiver sido atendida, os tokens específicos do componente e a estrutura de diretórios tiverem sido atualizados e o comportamento de foco e a terminologia corresponderem à especificação selecionada.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
TypeScript
Estrelas
14.5k
Forks
2.3k
Merge médio
13d 16h
PRs com merge (30d)
5

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-paper

Todas as issues de callstack/react-native-paper

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.