angular / angular/components

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

Abierto
#33,355 1 comentario 1 reacción 0 asignados Ver en GitHub
area: material/list gemini-triaged P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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](https://m3.material.io/components/lists/specs). 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](https://m3.material.io/components/lists/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

Guía de contribución

Abrir la guía de contribución

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.

Evaluación

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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.