angular / angular/components

bug(form-field): difficult to customize shape with tokens

Open
#31,059 0 comments 0 reactions 0 assignees View on GitHub
P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

19

### Description

When using mat-form-field in filled appearance, I want to shape the border-radius. I use this token
--mdc-filled-text-field-container-shape: 4px !important;
But it only applies to the top corners and not the bottom corners because this token uses the wrong container to set radius. It sets the radius on a level where the div for hints and errors is also included.
And by that the bottom corners are not set with that token

### Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

### Expected Behavior

Apply radius also to bottom corners

### Actual Behavior

not applying radius to bottom corners

### Environment

- Angular: 19
- CDK/Material: 19
- Browser(s): firefox
- Operating System (e.g. Windows, macOS, Ubuntu): windows

Contributor guide

Open the contributing guide

Research direction

Start by examining the Angular Material mat-form-field filled appearance and how --mdc-filled-text-field-container-shape is applied. Reproduce the reported styling with Angular 19, then trace which container owns the bottom corners; done means the token consistently applies the requested radius to all corners, including when hints or errors are present.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, css, typescript
Domain
design, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.