angular / angular/components

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

Đang mở
#27,144 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/list P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với các bản tái hiện Angular 15 và Angular 16 được liên kết trên StackBlitz, đặc biệt là example-component.html, app.module.ts và app.component.html, để xác nhận matListItemMeta ảnh hưởng như thế nào đến các nút và biểu tượng lồng nhau. Theo dõi kiểu dáng của matListItemMeta và xác minh rằng các điều khiển được bật và bị tắt vẫn giữ nguyên màu sắc dự kiến, trong khi hành vi hiện có của danh sách vẫn được giữ nguyên.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.