Skip to content

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

Open
@svg94

Description

@svg94

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions