angular / angular/components

bug(MatSelectionList): Spacing too large between checkbox / radio when set to togglePosition="before"

Đang mở
#27,775 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: material/list P4
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

15

### Description

Using a `` component, and setting the options with `` results in too much space between the toggle and the content. According to [the Material spec](https://m3.material.io/components/lists/specs#ff521a61-bab9-4e75-bded-dee94fd31f61) for lists, the spacing between toggle and content should be 16px. Currently its about 35px all in.

Screenshot from stackblitz:
![image](https://github.com/angular/components/assets/8093223/c0e21709-ba3e-46df-bbfa-c42fa3906cec)

Screenshot from the Material spec:
![image](https://github.com/angular/components/assets/8093223/622866bf-c97c-4639-bf56-b089fdee30f5)

### Reproduction

StackBlitz link: https://stackblitz.com/edit/v9ccty?file=src%2Fapp%2Flist-selection-example.html

### Expected Behavior

There should be a total of 16px of space between the toggle and the content.

### Actual Behavior

There is approximately 35px of space between the toggle and the content.

### Environment

Angular CLI: 16.2.0
Node: 18.14.0
Package Manager: yarn 3.2.0
OS: darwin arm64

Angular: 16.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package Version
----------------------------------------------------------
@angular-devkit/architect 0.1602.0
@angular-devkit/build-angular 16.2.0
@angular-devkit/core 16.2.0
@angular-devkit/schematics 16.2.0
@angular-devkit/schematics-cli 16.2.0
@angular/flex-layout 15.0.0-beta.42
@schematics/angular 16.2.0
ng-packagr 16.2.0
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.1

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 bản tái hiện StackBlitz được liên kết, đặc biệt là src/app/list-selection-example.html, và kiểm tra hành vi của mat-selection-list khi togglePosition="before". So sánh khoảng cách được hiển thị với Material list specification. Được xem là hoàn tất khi khoảng cách từ toggle đến nội dung là 16px mà không gây hồi quy cho bố cục của selection-list.

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
Lĩnh vực
design, 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
38/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.