angular / angular/components

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

Đang mở
#32,067 5 bình luận 4 reaction 0 người được giao Xem trên GitHub
area: material/list docs P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện StackBlitz được liên kết và so sánh các style của MatList, matListItemMeta và matIconButton đối với các item nhiều dòng và một dòng. Theo dõi layout hover-shadow của IconButton ở cuối, sau đó xác minh trong Chrome rằng icon được căn giữa trong cả hai trường hợp và bản tái hiện được báo cáo không còn xảy ra.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
design, frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.