callstack / callstack/react-native-paper

feat: modernize Searchbar to Material Design 3

Abierto
#4,978 0 comentarios 0 reacciones 0 asignados Ver en GitHub
v6
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

- 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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Start by locating the Searchbar implementation and compare its current tokens, colors, sizing, and modes with the linked Material 3 Search specs. Review the modernization patterns in TextInput/TextField, Switch, Checkbox, and FAB. Done means the checklist is addressed, component-specific tokens and directory structure are updated, and the focus behavior and terminology match the selected specification.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native, typescript
Área
frontend, mobile
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.