angular / angular/components

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

Ouverte
#32,067 5 commentaires 4 réactions 0 personnes assignées Voir sur GitHub
area: material/list docs 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

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et comparez les styles de MatList, matListItemMeta et matIconButton pour les éléments multilignes et sur une seule ligne. Suivez la disposition de hover-shadow pour l’IconButton final, puis vérifiez dans Chrome que l’icône est centrée dans les deux cas et que la reproduction signalée ne se produit plus.

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é
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

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