callstack / callstack/react-native-paper
feat: modernize Menu to the latest Material Design specs
- Ngôn ngữ chính
- TypeScript
- Star
- 14.5k
- Fork
- 2.2k
- Merge trung bình
- 5 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 12
Mô tả
- Modernize the Menu component to the latest specs. Reuse the newly introduced theme tokens (typography, motion, shape etc).
See https://m3.material.io/components/menus for the full picture.
- Extract component specific tokens for easier maintenance.
- Get inspired from TextInput/TextField, Switch, Checkbox, FAB components which have gone through modernization.
# Current State
## Menu
**MD3 spec:** Menus
**Specs link:** https://m3.material.io/components/menus/specs
### Color tokens
- Container background: `theme.colors.elevation[level2]` which resolves to `surfaceContainerLow` ✅ (standard color scheme)
- `Menu.Item` label text: `onSurface` ✅
- `Menu.Item` leading/trailing icon: `onSurfaceVariant` ✅
- `Menu.Item` disabled opacity: `stateOpacity.disabled` (0.38) ✅
- [ ] No selected item state: spec defines `tertiaryContainer` bg / `onTertiaryContainer` text+icon for selected menu items
- [ ] No vibrant color scheme (M3 Expressive): `tertiaryContainer` container / `onTertiaryContainer` icons+labels / `tertiary` selected bg / `onTertiary` selected text+icon
### Spacing / sizing
- Container `paddingVertical: 8` ✅
- Item min/max width: 112dp / 280dp ✅
- Item `paddingHorizontal: 12` ✅
- Icon leading margin: 12dp after icon ✅
- Item height: 48dp (standard), 32dp (dense) – baseline menu values ✅
- [ ] `Menu.Item` label text uses `bodyLarge`; spec requires `labelLarge`
- [ ] `Menu.Item` has no supporting text slot (`bodySmall`); spec anatomy includes optional supporting text per item
- [ ] `Menu.Item` has no trailing supporting text slot (`labelLarge`); spec anatomy includes optional trailing text per item
### Shape
- [ ] Container: `borderRadius: theme.roundness` = 4dp; spec `corner.large` = `4 * roundness` = 16dp ❌
- [ ] First child item: spec `corner.medium` top corners; not implemented
- [ ] Last child item: spec `corner.medium` bottom corners; not implemented
- [ ] Selected item: spec `corner.medium`; not implemented
- No per-item shape rounding at all; all items are rectangles
### Behavior
- Open/close: scale + opacity animation ✅ (but uses `Easing.bezier(0.4, 0, 0.2, 1)` from old M3 motion guidelines; M3 Expressive uses spring-based motion)
- Dismisses on outside press ✅
- Keyboard-aware positioning ✅
- RTL support ✅
- Escape key dismissal on web ✅
- Back handler on Android ✅
- [ ] No item selection state / active item support
- [ ] No grouped layout (gaps between item groups); current workaround uses `Divider` which is not the spec-aligned grouping mechanism for vertical menus
- [ ] No submenu support
- [ ] No badge support on items
- [ ] M3 Expressive vertical menu shape morphing (active container shape animates as focus moves to submenu) not implemented
### Notes
- The current component implements the baseline menu variant only. The M3 Expressive vertical menu is a largely new feature surface (new shapes, selection states, vibrant color scheme, submenu motion, grouped layout) that requires significant additions.
- The `borderRadius: theme.roundness` bug is a significant visual regression vs spec – the container should be visibly rounded.
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với component Menu hiện có và so sánh cách triển khai của nó với các component TextInput/TextField, Switch, Checkbox và FAB đã được hiện đại hóa. Sử dụng các đặc tả menu Material 3 được liên kết để ánh xạ các yêu cầu về màu khi chưa được chọn, kiểu chữ, hình dạng, lựa chọn, nhóm, submenu và văn bản hỗ trợ. Được xem là hoàn tất khi Menu cơ sở khớp với hành vi và kiểu dáng được chỉ định, đồng thời các tính năng biểu đạt được yêu cầu đã được xử lý hoặc xác định phạm vi rõ ràng.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- frontend, mobile
- Loại issue
- Tính năng
- Độ khó
- 5/5
- Thời gian dự kiến
- Hơn một tuần
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100