bug(MatList, IconButton): IconButton with matListItemMeta renders incorrectly for multiline mat list items
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 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 复现开始,比较多行项目和单行项目的 MatList、matListItemMeta 和 matIconButton 样式。跟踪末尾 IconButton 的 hover-shadow 布局,然后在 Chrome 中验证两种情况下图标都处于居中位置,并且报告的复现不再发生。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- design, frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100