angular / angular/components

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

Ouverte
#33,355 1 commentaire 1 réaction 0 personnes assignées Voir sur GitHub
area: material/list gemini-triaged P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### 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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le composant MatList et reproduisez le problème dans Chrome avec des icônes en tête et du texte sur plusieurs lignes. Comparez le DOM rendu et le comportement visuel aux spécifications liées des listes Material Design 3, en vous concentrant sur l’alignement des icônes, le remplissage horizontal, la typographie, les espacements et le positionnement des actions. Le travail est considéré comme terminé lorsque les variantes de liste concernées respectent les exigences M3 indiquées.

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

Évaluation

Stack technique
angular, typescript
Domaine
design, frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

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