angular / angular/components

bug(Typography): Default font settings on `.mat-typography` is `body-2` instead of `body-1`

Đang mở
#27,112 13 bình luận 3 reaction 0 người được giao Xem trên GitHub
area: theming P5
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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 a theme is configured according to the docs, and typography is set up by adding this line:
`@include mat.typography-hierarchy(mat.define-typography-config())`
https://v15.material.angular.io/guide/typography#using-typography-styles-in-your-application

Applying the `.mat-typography` class on the body element defines `body-2` as the default font for the application:
https://github.com/angular/components/blob/16.0.1/src/material/core/typography/_typography.scss#L273

body-1 has a font-size of 16px.
body-2 has a font-size of 14px;

The docs say:
`body-1` | Base body text.
`body-2` | Secondary body text.
https://github.com/angular/components/blob/16.0.1/guides/typography.md?plain=1#L54

If `body-1` is considered `base body text`, I expect it to apply when using the `mat-typography` css class, and not `body-2`.

### Reproduction

1. Follow the docs to set up typography styles in a brand new Angular + Angular Material app:
https://v15.material.angular.io/guide/typography#using-typography-styles-in-your-application

2. Add `mat-typography` to the `body` tag.

3. Inspect font-size on the `body` tag.

### Expected Behavior

I expect `body-1` to be the default font settings which apply when using `mat-typography` (since the docs claim this is `base body text`).

### Actual Behavior

`body-2` is the default font settings when using `@include mat.typography-hierarchy(mat.define-typography-config())` instead of `body-1`.

### Environment

- Angular: 15.2.9
- CDK/Material: 15.2.9
- Browser(s): Chrome / Edge
- Operating System (e.g. Windows, macOS, Ubuntu): macOS / Windows

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu trong src/material/core/typography/_typography.scss tại selector được liên kết và so sánh nó với guides/typography.md cùng tài liệu về typography. Thực hiện các bước tái hiện trong một ứng dụng Angular Material mới; được xem là hoàn tất khi `.mat-typography` áp dụng các thiết lập văn bản thân bài cơ sở được ghi trong tài liệu thay vì các thiết lập thứ cấp.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.