angular / angular/components

bug(mat-label): trailing white-space between text and asterisk

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

### Description

It's all in the title.

image

Might be related to https://github.com/angular/components/issues/27722.

### Reproduction

https://stackblitz.com/edit/vcau9e

### Expected Behavior

White-space should be trimmed (e. g. by making mat-label `display: inline-block`).

### Actual Behavior

I see UI being dependent on html formatting.

### Environment

```
Angular CLI: 16.2.9
Node: 18.12.0
Package Manager: yarn 1.22.19
OS: win32 x64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1602.9
@angular-devkit/build-angular 16.2.9
@angular-devkit/core 16.2.9
@angular-devkit/schematics 16.2.9
@angular/cdk 16.2.11
@angular/cli 16.2.9
@angular/fire 7.6.1
@angular/material 16.2.11
@angular/material-moment-adapter 16.2.11
@schematics/angular 16.2.9
rxjs 7.8.1
typescript 5.1.6
webpack 5.89.0
zone.js 0.13.3
```

Also reproducible in version 15.

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 và so sánh cách mat-label được render như đã báo cáo trong các phiên bản Angular Material 14–16. Truy vết component mat-label và phần styling của nó để xác định tại sao định dạng HTML ảnh hưởng đến khoảng cách trước dấu hoa thị. Công việc được xem là hoàn tất khi markup label tương đương được render mà không có khoảng trắng ở cuối và một regression test bao phủ hành vi này.

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
35/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.