Skip to content

bug(COMPONENT): Vertical mat-button-toggle layout is too round and truncate content #31010

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
1 task
PowerKiKi opened this issue May 2, 2025 · 0 comments · Fixed by #31084
Closed
1 task

bug(COMPONENT): Vertical mat-button-toggle layout is too round and truncate content #31010

PowerKiKi opened this issue May 2, 2025 · 0 comments · Fixed by #31084
Assignees
@crisbeto
Labels
area: material/button-toggle P4 A relatively minor issue that is not relevant to core functions

Comments

@PowerKiKi
Copy link
Contributor

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

Material v2

Description

With Material v3 and vertical="true", mat-button-toggle have a layout that is too round and truncates the label and/or the check mark. This was not the case with Material v2, as shown below:

Image

Image

Reproduction

Expected Behavior

I expect the vertical mode has less round broder, to be aesthetically more pleasing, but especially to never truncate content.

Actual Behavior

It is too round, aesthetically not so great looking, and truncates content.

Environment

  • Angular: 19.2.1
  • CDK/Material: 19.2.1
  • Browser(s): Chrome 136
  • Operating System (e.g. Windows, macOS, Ubuntu):
@PowerKiKi PowerKiKi added the needs triage This issue needs to be triaged by the team label May 2, 2025
@crisbeto crisbeto added P4 A relatively minor issue that is not relevant to core functions area: material/button-toggle and removed needs triage This issue needs to be triaged by the team labels May 2, 2025
@crisbeto crisbeto self-assigned this May 12, 2025
crisbeto added a commit to crisbeto/material2 that referenced this issue May 12, 2025
@crisbeto
fix(material/button-toggle): use smaller border radius
13603e1 
Currently the button toggle uses the `corner-full` value for its broder radius which starts too look weird for a vertical group with text inside the toggles.

These changes switch to using the `corner-extra-large` value instead.

Fixes angular#31010.
@crisbeto crisbeto mentioned this issue May 12, 2025
Merged
crisbeto added a commit that referenced this issue May 12, 2025
@crisbeto
fix(material/button-toggle): use smaller border radius (#31084)
90413f9 
Currently the button toggle uses the `corner-full` value for its broder radius which starts too look weird for a vertical group with text inside the toggles.

These changes switch to using the `corner-extra-large` value instead.

Fixes #31010.
crisbeto added a commit that referenced this issue May 12, 2025
@crisbeto
fix(material/button-toggle): use smaller border radius (#31084)
cbffce8 
Currently the button toggle uses the `corner-full` value for its broder radius which starts too look weird for a vertical group with text inside the toggles.

These changes switch to using the `corner-extra-large` value instead.

Fixes #31010.

(cherry picked from commit 90413f9)
crisbeto added a commit that referenced this issue May 12, 2025
@crisbeto
fix(material/button-toggle): use smaller border radius (#31084)
08f5fda 
Currently the button toggle uses the `corner-full` value for its broder radius which starts too look weird for a vertical group with text inside the toggles.

These changes switch to using the `corner-extra-large` value instead.

Fixes #31010.

(cherry picked from commit 90413f9)
wildcardalice pushed a commit to wildcardalice/components that referenced this issue May 12, 2025
@crisbeto @wildcardalice
fix(material/button-toggle): use smaller border radius (angular#31084)
015a668 
Currently the button toggle uses the `corner-full` value for its broder radius which starts too look weird for a vertical group with text inside the toggles.

These changes switch to using the `corner-extra-large` value instead.

Fixes angular#31010.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@crisbeto crisbeto

Labels
area: material/button-toggle P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/button-toggle): use smaller border radius crisbeto/material2
2 participants
@PowerKiKi @crisbeto