bug(MatList, IconButton): IconButton with matListItemMeta renders incorrectly for multiline mat list items
- 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
Adding an IconButton with `matListItemMeta` directive into the multine list item causes incorrect rendering of the hover shadow (see the screeshot attached)
```
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
Beitragsleitfaden
Rechercherichtung
Beginne mit der verknüpften StackBlitz-Reproduktion und vergleiche die Stile von MatList, matListItemMeta und matIconButton für mehrzeilige und einzeilige Elemente. Verfolge das Hover-Shadow-Layout für den nachfolgenden IconButton und überprüfe anschließend in Chrome, dass das Icon in beiden Fällen zentriert ist und die gemeldete Reproduktion nicht mehr auftritt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- design, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100