bug(MatList): matListItemMeta forces color onto any element under it
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### Is this a regression?
- [X] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
14.3.0
### Description
After the material migration to Angular 15, we have lost the ability to freely change the color elements within the matListItemMeta directive.
This means that if you put two buttons in an element of the list, one enabled and one disabled, they will both appear to be of the same color. This makes buttons appear disabled even when they're not.
Of course this directive didn't exist in Angular 14, but it is the only place to put these elements in this version.
I understand this might have been on purpose as it appears that this section might only be intended for text, but it makes a great drawer for buttons that perform actions on elements of the list, and it used to work perfectly for this.
### Reproduction
This happens both in Angular 15 and 16
Angular 15:
https://stackblitz.com/edit/components-issue-gvbxke?file=src%2Fapp%2Fexample-component.html
Angular 16:
https://stackblitz.com/edit/angular-16-material-starter-upzbq5?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.html
### Expected Behavior
When putting buttons or icons inside the matListItemMeta they should keep their color.
### Actual Behavior
When putting buttons or icons inside the matListItemMeta they change their color to grey (same exact color as a disabled button), affecting the usability of buttons.
### Environment
- Angular: 15&16
- CDK/Material: 15.2.9 (latest)
Package Manager: npm 8.19.2
- Operating System : Ubuntu 20.04.6 LTS
コントリビューションガイド
調査の方向性
リンクされた Angular 15 および Angular 16 の StackBlitz 再現例から始め、特に example-component.html、app.module.ts、app.component.html を確認して、matListItemMeta がネストされたボタンとアイコンにどのような影響を与えるかを確認します。matListItemMeta のスタイルを追跡し、有効なコントロールと無効なコントロールが意図した色を維持しながら、既存のリスト動作が損なわれていないことを検証します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100