Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

feat: modernize Menu to the latest Material Design specs

Aberta
  • Algo errado?
#4,977 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 7 dias

@matkoson já está trabalhando nisso.

Desde 22/7/2026.

  • #1 de @matkoson — fechado sem integrar
  • #2 de @matkoson — aberto
  • #5037 de @matkoson — fechado sem integrar
  • #5073 de @mikolajadamowicz — aberto

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
35/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Pouca atividade
Stack de tecnologia
react-native, typescript
Domínio
frontend, mobile

Direção de pesquisa

Comece com o componente Menu existente e compare sua implementação com os componentes modernizados TextInput/TextField, Switch, Checkbox e FAB. Use as especificações vinculadas do Material 3 para menus para mapear os requisitos de cor quando não selecionado, tipografia, forma, seleção, agrupamento, submenu e texto de apoio. Considera-se concluído quando o Menu básico corresponder ao comportamento e ao estilo especificados, e os recursos expressivos solicitados tiverem sido implementados ou claramente delimitados.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.
Linguagem predominante
TypeScript
Estrelas
14.5k
Forks
2.3k
Merge médio
6d 2h
PRs com merge (30d)
1

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-paper

Todas as issues de callstack/react-native-paper

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.