bug(MatList, IconButton): IconButton with matListItemMeta renders incorrectly for multiline mat list items
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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
コントリビューションガイド
調査の方向性
リンクされた StackBlitz の再現から始め、複数行の項目と1行の項目について MatList、matListItemMeta、matIconButton のスタイルを比較します。末尾の IconButton の hover-shadow レイアウトを追跡し、その後 Chrome で両方の場合にアイコンが中央揃えになっていること、また報告された再現が発生しなくなっていることを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- design, frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100