angular / angular/components

bug(option): mat-options with long text lack of gap since v15

未关闭
#26,701 1 条评论 4 个 reaction 已指派 0 人 在 GitHub 查看
area: material/select P3 regression
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14

### Description

Before v15, `mat-option`s with long text were truncated so their height was always 48px and naturally, a gap was there to well separate each option.

Now the text is no more truncated but a min-height of 48px is applied. If the text of a `mat-option` take only one line the gap remains and there is no problem. But with 2 lines of more, the gap is no more and reading becomes more difficult

### Reproduction

https://stackblitz.com/edit/angular-hjwez5?file=src/styles.scss

### Expected Behavior

![image](https://user-images.githubusercontent.com/23034761/221603790-430f1dbb-2142-409d-b93f-07d719ef8216.png)

```css
.mat-mdc-option {
padding-top: 12px;
padding-bottom: 12px;
box-sizing: border-box;
}
```

### Actual Behavior

![image](https://user-images.githubusercontent.com/23034761/221603654-56faf2c9-17e7-4fda-9af6-b95369301b1b.png)

### Environment

- Angular: 15.2.0
- CDK/Material: 15.2.0
- Browser(s): All
- Operating System (e.g. Windows, macOS, Ubuntu): All

贡献指南

打开贡献指南

调研方向

从链接的 StackBlitz 复现开始,尤其检查 src/styles.scss,并检查多行文本的 mat-option 样式。完成的标准是恢复具有一行或多行的选项之间可见的垂直间距,同时保留单行选项预期的 48px 间距。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, css, typescript
领域
design, frontend
Issue 类型
缺陷
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
描述清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。