angular / angular/components

bug(MatList): matListItemMeta forces color onto any element under it

Offen
#27,144 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/list P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit den verlinkten Angular 15- und Angular 16-StackBlitz-Reproduktionen, insbesondere mit example-component.html, app.module.ts und app.component.html, um zu bestätigen, wie sich matListItemMeta auf verschachtelte Schaltflächen und Symbole auswirkt. Verfolge das Styling von matListItemMeta und überprüfe, dass aktivierte und deaktivierte Steuerelemente ihre vorgesehenen Farben beibehalten, während das bestehende Listenverhalten intakt bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

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