angular / angular/components

bug(mat-dialog): mat-dialog-title adds a space in front of the header text when HTML is formatted

オープン
#26,539 コメント 7 件 リアクション 20 件 担当者 0 名 GitHub で見る
area: material/dialog P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
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:

image

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

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

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