bug(MatList): Angular Material List feature doesn't respect M3 specs
- 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?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
The MatList component in Angular Material does not fully adhere to the [Material Design 3 (M3) specifications for Lists](https://m3.material.io/components/lists/specs). Specifically:
- Icon alignment: Leading icons are not vertically centered as per M3 specs (should be 16px from the top/bottom of the list item).
- Padding: List items do not use the correct horizontal padding (16px for single-line, 24px for two-line).
- Typography: Text styles (e.g., mat-line) do not match M3’s typography tokens (e.g., body-large for primary text).
- etc...
In general, the visual consistency with the M3 design system is broken especially with "mutline" list items or with meta and/or actions (primary, secondary, menu). Furthermore, override API cannot help with some aspects like gaps and positionning.
### Reproduction
Steps to reproduce:
1. Create a MatList with leading icons and multi-line text.
2. Inspect the rendered DOM and compare with [M3 List specs](https://m3.material.io/components/lists/specs).
3. Observe misalignment in icon positioning, incorrect padding, or typography mismatches.
### Expected Behavior
M3 spec is respected.
### Actual Behavior
Lots of "legacy" M2 (?) design choices applied.
### Environment
- Angular: 22
- CDK/Material: 22
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với component MatList và tái hiện vấn đề trong Chrome bằng cách sử dụng các biểu tượng ở đầu và văn bản nhiều dòng. So sánh DOM được render và hành vi trực quan với các đặc tả List của Material Design 3 được liên kết, tập trung vào căn chỉnh biểu tượng, khoảng đệm ngang, kiểu chữ, khoảng cách và vị trí của các action. Được xem là hoàn tất khi các biến thể list bị ảnh hưởng khớp với các yêu cầu M3 đã nêu.
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
- design, frontend
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 42/100