angular / angular/components

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

Offen
#28,371 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: material/tabs area: material/toolbar feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die Dichtedefinitionen in src/material/core/tokens/m2/mdc/_tab.scss und src/material/core/tokens/m2/mat/_toolbar.scss zu vergleichen. Reproduziere die Abweichung im verlinkten StackBlitz-Beispiel und prüfe die im Issue verlinkten Richtlinien von Material Design. Als abgeschlossen gilt die Bestimmung, ob zusätzliche Dichtestufen angemessen sind, sowie die Dokumentation oder Implementierung eines abgestimmten Ergebnisses.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
design, frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.