bug(typography): h4 not using subtitle-2 as described in the docs
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
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
Contributor guide
Research direction
Start with the typography documentation at the linked typography-levels guide and the referenced _typography.scss rules. Reproduce the issue with a custom mat.define-typography-config and an h4 element, then determine whether the documented subtitle-2 mapping or the SCSS behavior should change. Done means the h4 styling and documentation agree.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, scss
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100