callstack / callstack/react-native-paper

feat: modernize Searchbar to Material Design 3

未关闭
#4,978 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
v6
主要语言
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

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。