Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

feat: modernize Menu to the latest Material Design specs

Aperta
  • Qualcosa non va?
#4,977 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react-native, typescript
Ambito
frontend, mobile

Direzione di ricerca

Inizia con il componente Menu esistente e confronta la sua implementazione con i componenti modernizzati TextInput/TextField, Switch, Checkbox e FAB. Usa le specifiche Material 3 collegate per i menu per mappare i requisiti relativi al colore non selezionato, alla tipografia, alla forma, alla selezione, al raggruppamento, ai sottomenu e al testo di supporto. Il lavoro è completato quando il Menu di base corrisponde al comportamento e allo stile specificati e le funzionalità espressive richieste sono state implementate o chiaramente delimitate.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

v6
  • 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.
Lingua principale
TypeScript
Stelle
14.5k
Fork
2.2k
Merge medio
3g 22h
PR unite (30g)
8

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di callstack/react-native-paper

Tutte le issue di callstack/react-native-paper

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.