angular / angular/components

feat(Toolbar & Tabs): support more density scale levels in Toolbar or Tabs

Đang mở
#28,371 0 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: material/tabs area: material/toolbar feature P3
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ả

### Feature Description

Currently there are these densities supported for Tabs:

https://github.com/angular/components/blob/a7f87a80a18a62d75a8c5621fd89dbc2cf28a865/src/material/core/tokens/m2/mdc/_tab.scss#L69

![image](https://github.com/angular/components/assets/15703819/eb7d56e0-9669-4c37-8c95-95f0e93828da)

and these for Toolbar:

https://github.com/angular/components/blob/a7f87a80a18a62d75a8c5621fd89dbc2cf28a865/src/material/core/tokens/m2/mat/_toolbar.scss#L38

![image](https://github.com/angular/components/assets/15703819/d86718dd-4303-4e2d-b068-9e737a7464de)

From these `scale levels vs height in pixels` maps we can see that the highest Tabs have their Tab Header 48px high and the lowest Toolbar is 52px high (on desktop). This means these two components never get the same height regardless the density applied.

In case they are used next to each other, when Tabs are used as kind of a 'toolbar' on a screen, it causes a visual discrepancy. Here is a demonstration where default 0 density is used for Tabs and -3 density used for Toolbars:

https://stackblitz.com/edit/egbtbh?file=src%2Ftheme.scss

![image](https://github.com/angular/components/assets/15703819/605962a4-0db7-40cf-832a-7bec85e248fc)

This may look as a tiny problem, but the Design, Business or QA departments may have very attentive eyes and report this as a visual bug (as it happened in my team). I am trying to avoid changing the heights with some custom CSS as this is not an approach recommended by Angular Material team as per this section in the official docs: https://material.angular.io/guide/customizing-component-styles#targeting-custom-styles

![image](https://github.com/angular/components/assets/15703819/534edb36-b9a9-4043-a112-2a3f8c22fa1c)

Therefore my question is, would it be please possible to add more density scale levels for either Tabs or Toolbar and still be compliant to the Material Design specs? Or maybe the whole use case of having Tabs next to a Toolbar is not correct from the Material Design specs point of view and I should ask our Design department to fix the designs?

### Use Case

_No response_

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

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

Hướng nghiên cứu

Bắt đầu bằng cách so sánh các định nghĩa về mật độ trong src/material/core/tokens/m2/mdc/_tab.scss và src/material/core/tokens/m2/mat/_toolbar.scss. Tái hiện sự không khớp trong ví dụ StackBlitz được liên kết và xem lại hướng dẫn Material Design được liên kết trong issue. Hoàn thành nghĩa là xác định liệu các mức mật độ bổ sung có phù hợp hay không, đồng thời ghi lại hoặc triển khai một kết quả thống nhất.

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, typescript
Lĩnh vực
design, frontend
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/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.