bug(MatList): Angular Material List feature doesn't respect M3 specs

Abierto
#33,355 1 comentario 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
42/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
angular, typescript
Área
design, frontend

Línea de trabajo

Comienza con el componente MatList y reproduce el problema en Chrome usando iconos iniciales y texto de varias líneas. Compara el DOM renderizado y el comportamiento visual con las especificaciones vinculadas de listas de Material Design 3, centrándote en la alineación de los iconos, el relleno horizontal, la tipografía, los espacios y la posición de las acciones. Se considera terminado cuando las variantes de lista afectadas cumplen los requisitos indicados de M3.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

area: material/list gemini-triaged P3
Is this a regression?
  • Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was

No response

Description

The MatList component in Angular Material does not fully adhere to the Material Design 3 (M3) specifications for Lists. Specifically:

  • Icon alignment: Leading icons are not vertically centered as per M3 specs (should be 16px from the top/bottom of the list item).
  • Padding: List items do not use the correct horizontal padding (16px for single-line, 24px for two-line).
  • Typography: Text styles (e.g., mat-line) do not match M3’s typography tokens (e.g., body-large for primary text).
  • etc...

In general, the visual consistency with the M3 design system is broken especially with "mutline" list items or with meta and/or actions (primary, secondary, menu). Furthermore, override API cannot help with some aspects like gaps and positionning.

Reproduction

Steps to reproduce:

  1. Create a MatList with leading icons and multi-line text.
  2. Inspect the rendered DOM and compare with M3 List specs.
  3. Observe misalignment in icon positioning, incorrect padding, or typography mismatches.
Expected Behavior

M3 spec is respected.

Actual Behavior

Lots of "legacy" M2 (?) design choices applied.

Environment
  • Angular: 22
  • CDK/Material: 22
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 2 h
PR fusionados (30 d)
81

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.