bug(MatList): Angular Material List feature doesn't respect M3 specs
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
Beitragsleitfaden
Rechercherichtung
Beginne mit der MatList-Komponente und reproduziere das Problem in Chrome mit führenden Symbolen und mehrzeiligem Text. Vergleiche das gerenderte DOM und das visuelle Verhalten mit den verknüpften Spezifikationen für Listen von Material Design 3 und konzentriere dich dabei auf die Ausrichtung der Symbole, den horizontalen Innenabstand, die Typografie, die Abstände und die Positionierung der Aktionen. Als abgeschlossen gilt die Arbeit, wenn die betroffenen Listenvarianten den genannten M3-Anforderungen entsprechen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- design, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 42/100