feat: modernize Searchbar to Material Design 3

未關閉
  • 哪裡不對？
#4,978 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

維護者通常 1 天內回覆

還沒有人認領這個 Issue。

評估

難度
5/5
預估耗時
一週以上
新手友好度
45/100
Issue 類型
功能
描述清晰度
基本清楚
活躍度
冷清
技術堆疊
react-native, typescript
領域
frontend, mobile

研究方向

首先定位 Searchbar 的實作，並將其目前的 tokens、色彩、尺寸與模式與連結的 Material 3 Search 規格進行比較。檢視 TextInput/TextField、Switch、Checkbox 與 FAB 中的現代化模式。完成的標準是 checklist 已處理、元件專用 tokens 與目錄結構已更新，且焦點行為與術語符合所選規格。

由索引模型根據 Issue 內容生成。

描述

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
主要語言
TypeScript
星號
14.5k
分支
2.3k
平均合併
3 天 14 小時
30 天內合併 PR
12

環境準備

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

callstack/react-native-paper 的其他 Issue

查看 callstack/react-native-paper 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。