angular / angular/components

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

オープン
#28,371 コメント 0 件 リアクション 1 件 担当者 0 名 GitHub で見る
area: material/tabs area: material/toolbar feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### 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_

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、src/material/core/tokens/m2/mdc/_tab.scss と src/material/core/tokens/m2/mat/_toolbar.scss の密度定義を比較します。リンクされている StackBlitz の例で不一致を再現し、issue にリンクされている Material Design のガイダンスを確認します。追加の密度レベルが適切かどうかを判断し、整合した結果を文書化または実装することが完了の条件です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
design, frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。