Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

feat: modernize Menu to the latest Material Design specs

Ouverte
  • Quelque chose ne va pas ?
#4,977 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 7 jours

@matkoson y travaille déjà.

Depuis le 22/7/2026.

  • #1 par @matkoson — fermée sans fusion
  • #2 par @matkoson — ouverte
  • #5037 par @matkoson — fermée sans fusion
  • #5073 par @mikolajadamowicz — ouverte

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
35/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Calme
Stack technique
react-native, typescript
Domaine
frontend, mobile

Piste de recherche

Commencez par le composant Menu existant et comparez son implémentation avec celle des composants modernisés TextInput/TextField, Switch, Checkbox et FAB. Utilisez les spécifications Material 3 liées concernant les menus pour déterminer les exigences relatives à la couleur lorsqu'il n'est pas sélectionné, à la typographie, à la forme, à la sélection, au regroupement, aux sous-menus et au texte d'accompagnement. Le travail est considéré comme terminé lorsque le Menu de base correspond au comportement et au style spécifiés, et que les fonctionnalités expressives demandées ont été prises en charge ou clairement délimitées.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.3k
Merge moyen
8 j 2 h
PR mergées (30 j)
4

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de callstack/react-native-paper

Toutes les issues de callstack/react-native-paper

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.