angular / angular/components

bug(typography): h4 not using subtitle-2 as described in the docs

Offen
#26,351 2 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: theming P2
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

[Here](https://material.angular.io/guide/typography#typography-levels) the documentation states that `subtitle-2` is corresponding to the `

`. I found that the ` tag is actually using the `body-1` styling as you can see in the following code snipped copied from the `_typography.scss` file.
```css
.mat-h4,
.mat-body-1,
#{$selector} .mat-h4,
#{$selector} .mat-body-1,
#{$selector} h4 {
@include typography-utils.typography-level($config, body-1);
margin: 0 0 16px;
}
```

and subtitle-2 is not corresponding to any heading:

```css
.mat-body-strong,
.mat-subtitle-2,
#{$selector} .mat-body-strong,
#{$selector} .mat-subtitle-2 {
@include typography-utils.typography-level($config, subtitle-2);
}
```

### Reproduction

* Define a custom typography config with `mat.define-typography-config`
* Define `$subtitle-2`
* Use a `

` tag in your template (with or without explicitly defining the class `mat-h4` on the element)
* Style of `subtitle-2` is not applied to the `

` tag.

### Expected Behavior

`

` tags should either use `subtitle-2` or the documentation should be updated

### Actual Behavior

`

` is using `body-1` styling

### Environment

- Angular: 15.0.3
- CDK/Material: 15.0.3
- Browser(s): Chromium based (Brave, Chrome)
- Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verlinkten typography-levels-Dokumentation und den referenzierten _typography.scss-Regeln. Reproduziere das Problem mit einer benutzerdefinierten mat.define-typography-config und einem h4-Element und ermittle dann, ob die dokumentierte subtitle-2-Zuordnung oder das SCSS-Verhalten geändert werden sollte. Als abgeschlossen gilt die Aufgabe, wenn die h4-Stylisierung und die Dokumentation übereinstimmen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, scss
Bereich
design, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.