callstack / callstack/react-native-paper
feat: modernize Searchbar to Material Design 3
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
- 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
贡献指南
调研方向
首先定位 Searchbar 的实现,并将其当前的 tokens、颜色、尺寸和模式与链接的 Material 3 Search 规范进行比较。检查 TextInput/TextField、Switch、Checkbox 和 FAB 中的现代化模式。完成的标准是 checklist 已得到处理,组件专用 tokens 和目录结构已更新,并且焦点行为和术语与所选规范一致。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react-native, typescript
- 领域
- frontend, mobile
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100