angular / angular/components

bug(MatList, IconButton): IconButton with matListItemMeta renders incorrectly for multiline mat list items

Aperta
#32,067 5 commenti 4 reazioni 0 assegnatari Vedi su GitHub
area: material/list docs P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

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

Adding an IconButton with `matListItemMeta` directive into the multine list item causes incorrect rendering of the hover shadow (see the screeshot attached)

Image

```


Incorrect Trailing Icon 1
Second line
Third line

info

```

### Reproduction

StackBlitz link: https://stackblitz.com/edit/hexovpvm?file=src%2Fexample%2Flist-variants-example.html,src%2Fexample%2Flist-variants-example.ts&startScript=start
Steps to reproduce:
1. Hover over the IconButton next to the first two list items. Notice, that the icon isn't centered
2. Hover over the IconButton next to the last list item. Notice, that in case of one-line list items the icon is rendered correctly

### Expected Behavior

The icon should always be centered inside hover shadow

### Actual Behavior

The icon isn't centered inside hover shadow

### Environment

- Angular: 20.2.8
- CDK/Material: 20
- Browser(s): chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla riproduzione StackBlitz collegata e confronta gli stili di MatList, matListItemMeta e matIconButton per gli elementi multilinea e su una sola riga. Traccia il layout hover-shadow per l’IconButton finale, quindi verifica in Chrome che l’icona sia centrata in entrambi i casi e che la riproduzione segnalata non si verifichi più.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
design, frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.