angular / angular/components

bug(form-field): label-offset-x is incorrectly computed when there is a prefix

Đang mở
#31,479 0 bình luận 1 reaction 0 người được giao Xem trên GitHub
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?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

Inside `_mdc-text-field-structure-overrides.scss`
https://github.com/angular/components/blob/7bb0a82a434c40d01a0d1aa35bcddaa3f725eccb/src/material/form-field/_mdc-text-field-structure-overrides.scss#L97
We can see that the variable `--mat-mdc-form-field-label-offset-x` is hardcoded to -16px (I guess it's coming from the fact that out of the box, form-field have a left-padding of 16px).

But for outlined form field, the left-padding could get bigger in some cases when using a large value for the border-radius.

This is because the left-padding is defined with `max(16px, var(--mdc-outlined-text-field-container-shape) + 4px)`

So if I want my outlined form-fields to be rounded like a pill, I have to override the border-radius with this
```
@include mat.form-field-overrides((
outlined-container-shape: 28px,
))
```

Which will set the left-padding to 32px and not 16px.

At this point everything looks good, and the label is correctly placed (when empty, it's aligned with the input value/placeholder)

Image

Image

But things start to break when you add a prefix as it will `translateX` the label to make room for the prefix.

This transform is based on the hardcoded value of `--mat-mdc-form-field-label-offset-x: -16px;`, so it works great for out-of-the-box form-field, but doesn't work for my pill form-field.

Because the padding is set to 32px, the `--mat-mdc-form-field-label-offset-x` should be -32px and not -16px.

So I end up with this:

Image

Image

As you can see, the empty pill form-field's label isn't aligned anymore with where the input's value is.

I know this can be fixed by overriding the `--mat-mdc-form-field-label-offset-x` myself by using `::ng-deep` to override the hardcoded value, but it's not something trivial to understand and fix, so I'd rather see a fix in the Angular Material repository.

### Reproduction

https://stackblitz.com/edit/tk7fhpq7-w7dz4vdj?file=src%2Fexample%2Fform-field.scss

### Expected Behavior

The label should be correctly placed when using a large border-radius value for outlined form-field, like the input value is.

I believe the solution would be to change this line of code:
```diff
- --mat-mdc-form-field-label-offset-x: -16px;
+ --mat-mdc-form-field-label-offset-x: max(16px, var(--mdc-outlined-text-field-container-shape, var(--mat-sys-corner-extra-small)) + 4px) * -1;
```

By the way, it would be nice to be able to control the "minimum" left & right padding to something else than the hardcoded 16px too 😅

### Actual Behavior

The label is not correctly aligned.

### Environment

- Angular: 20.0.4
- CDK/Material: 20.0.4
- Browser(s): Chrome 137
- Operating System: macOS

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

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

Hướng nghiên cứu

Bắt đầu trong src/material/form-field/_mdc-text-field-structure-overrides.scss tại khai báo label-offset-x được mô tả trong issue, sau đó sử dụng bản reproduction StackBlitz được liên kết với một outlined field, large container shape và prefix. Kiểm tra sự căn chỉnh của label so với input value đối với field trống; hoàn tất khi label vẫn được căn chỉnh chính xác trong cấu hình đó.

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, scss
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
Đặc tả rõ ràng
Mức phù hợp với người mới
72/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.