bug(mat-dialog): mat-dialog-title adds a space in front of the header text when HTML is formatted
- 主要语言
- 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
When using a header tag as a mat-dialog-title, there is a space at the beginning of the title, resulting in the dialog title not being aligned with the content:

This only happens if the content of the header tag in the HTML file is placed on a new line.
When using a header tag that contains a long expression, the default formatting (by Prettier, for example) puts the content of the header tag on the next line (as header tags are block elements), like so:
```
{{ getTitleThisFunctionHasAVeryLongNameSoPrettierPutsItOnANewLine() }}
```
This results in a space being inserted in the HTML. However, since the browser ignores whitespace at the beginning of the element, the space is not visible (cf. HTML spec).
Sinde Material 15 however, elements containing `mat-dialog-title` have a `::before` element. This element causes the browser to render the whitespace, which is inconsistent with default browser behavior and default formatting for block elements.
### Reproduction
Steps to reproduce:
1. Create a mat-dialog
2. Add a header tag with mat-dialog-title
3. As a header text, insert an expression that is quite long, causing Prettier to put it on the next line
The problem is illustrated in [this Stackblitz](https://stackblitz.com/edit/angular-copgcv?file=src/app/dialog-content-example-dialog.html).
Removing the `::before` element of the `mat-dialog-title`, removes the whitespace, but causes the header height to be too small.
### Expected Behavior
No whitespace should be visible, according to default behavior of both the browser and block element formatting.
### Actual Behavior
Whitespace is visible at the beginning of the title.
### Environment
- Angular: 15.1
- CDK/Material: 15.1.2
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS Ventura
贡献指南
调研方向
先从链接的 StackBlitz 及其在 src/app/dialog-content-example-dialog.html 中的复现开始,然后检查涉及 ::before 元素的 mat-dialog-title 样式。当跨行格式化的标题不显示前导空白,同时保留正确的标题高度时,修复就完成了。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 45/100