feat: modernize Searchbar to Material Design 3

Đang mở
  • Có gì không ổn?
#4,978 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 11 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
45/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react-native, typescript
Lĩnh vực
frontend, mobile

Hướng nghiên cứu

Bắt đầu bằng cách xác định phần triển khai Searchbar và so sánh các token, màu sắc, kích thước và chế độ hiện tại của nó với các đặc tả Search của Material 3 được liên kết. Xem xét các mẫu hiện đại hóa trong TextInput/TextField, Switch, Checkbox và FAB. Được xem là hoàn tất khi checklist đã được xử lý, các token dành riêng cho component và cấu trúc thư mục đã được cập nhật, đồng thời hành vi focus và thuật ngữ khớp với đặc tả đã chọn.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.3k
Merge trung bình
13 ngày 16 giờ
Pull request đã merge (30 ngày)
5

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của callstack/react-native-paper

Tất cả issue của callstack/react-native-paper

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.