bug(MatList): Angular Material List feature doesn't respect M3 specs
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 42/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Tranquilla
- Stack tecnologico
- angular, typescript
Direzione di ricerca
Inizia con il componente MatList e riproduci il problema in Chrome usando icone iniziali e testo su più righe. Confronta il DOM renderizzato e il comportamento visivo con le specifiche collegate delle liste di Material Design 3, concentrandoti sull’allineamento delle icone, sul padding orizzontale, sulla tipografia, sugli spazi e sul posizionamento delle azioni. Il lavoro è completato quando le varianti di lista interessate corrispondono ai requisiti M3 indicati.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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:
- Create a MatList with leading icons and multi-line text.
- Inspect the rendered DOM and compare with M3 List specs.
- 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
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 1h
- PR unite (30g)
- 84
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di angular/components
-
area: material/tree docs gemini-triaged needs triage
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
angular/components#33832 ·
-
area: material/datepicker gemini-triaged P4
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
angular/components#33763 · 2 commenti · 3 reazioni ·
-
area: material/table gemini-triaged P4
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 88/100
angular/components#33709 · 1 commento ·
-
area: material/table docs gemini-triaged P4
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
angular/components#33455 ·
-
area: material/core gemini-triaged P3
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 78/100
angular/components#33059 · 2 commenti ·
Tutte le issue di angular/components
Issue simili
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 85/100
-
Mend: dependency security vulnerability untriaged
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100