angular / angular/components

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

オープン
#32,067 コメント 5 件 リアクション 4 件 担当者 0 名 GitHub で見る
area: material/list docs P3
主要言語
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)

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた StackBlitz の再現から始め、複数行の項目と1行の項目について MatList、matListItemMeta、matIconButton のスタイルを比較します。末尾の IconButton の hover-shadow レイアウトを追跡し、その後 Chrome で両方の場合にアイコンが中央揃えになっていること、また報告された再現が発生しなくなっていることを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
design, frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。