bug(COMPONENT): mat-icon-button needs to be wrapped to apply density
- 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?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
When applying custom density (via a custom CSS class) using Angular Material Theme API directly to Angular Material button (e.g., mat-flat-button, mat-stroked-button), the height is adjusted as expected. However, when the custom density context (the same CSS class as for mat-stroked-button etc) is applied directly to a button mat-icon-button, the size of it remains unchanged. The density changes are only applied if the mat-icon-button is wrapped in an element with the density class.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/sb1-41rfph?file=src%2Fapp%2Fapp.component.scss
StackOverflow link: https://stackoverflow.com/questions/79227144/mat-icon-button-needs-to-be-wrapped-to-apply-density
Steps to reproduce:
1. Create css class:
`.ui-high-density {
@include mat.icon-button-density(-2);
}`
2. Apply css class .ui-high-density to button:
A. mat-flat-button
`Some text`
B. mat-icon-button
`Some text`
### Expected Behavior
The size of height on both, mat-flat-button and mat-icon-button, will change.
### Actual Behavior
The height change only on mat-flat-button and mat-icon-button stay the same.
When I wrapped mat-icon-button into div with class ui-hight-density, the height of button changed.
`
` `
` home`
` `
`
### Environment
- Angular: 18.2.11
- CDK/Material: 18.2.13
- Browser(s): Google Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS Sonoma
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện StackBlitz trong src/app/app.component.scss và mixin mat.icon-button-density(-2) được mô tả trong issue. So sánh cách density được áp dụng trực tiếp cho mat-flat-button với trường hợp trực tiếp của mat-icon-button, sau đó xác minh rằng icon button thay đổi kích thước mà không cần wrapper và bản tái hiện khớp với hành vi mong đợi.
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, scss, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100