angular / angular/components

bug(Density): Setting the density via mat.all-component-densities gives different result than setting via mat.theme density

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

説明

### 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 defining the density via mat.theme, e.g.
```
@include mat.theme(
(
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: Roboto,
density: (
scale: 0,
),
)
);
```

the button height is 40px (`--mdc-text-button-container-height`).

However, using the `mat.all-component-densities(0)` mixin results in button height equals to 36px.

Similar issue applies to other densities - setting the density through the mixin results in different height values than setting it through the `mat.theme` mixin.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/czrubf43?file=src%2Fstyles.scss
Steps to reproduce:
1. inspect the button height without setting the density. Height is 40px
2. set the density height with the dropdown to 0. Height changes to 36px.

changing density through the dropdown adds respectively classes to the body: .density0, .density-1 ... .density-5

the scss for those is (see styles.scss)
```
.body {
&.density0 {
@include mat.all-component-densities(0);
}

...

&.density-5 {
@include mat.all-component-densities(-5);
}

}
```

### Expected Behavior

densities (component heights) set through `mat.all-component-densities(0)` should be the same when set through
`mat.theme((density: 0))`

### Actual Behavior

densities (component heights) set through `mat.all-component-densities(0)` are different when set through
`mat.theme((density: 0))`

### Environment

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

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

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

調査の方向性

StackBlitz の再現例とその styles.scss から始め、mat.all-component-densities(0) によって生成される CSS を mat.theme に渡される density 設定と比較します。0 および他のスケールにおけるボタンの高さと対応する density 値を確認します。両方の設定パスで同じコンポーネントの高さが生成されれば完了です。

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

評価

技術スタック
angular, sass
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

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

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