Skip to content
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

bug(Checkbox): strong-focus-indicators do not have a radius of 50% as default #30326

Open
richardsengers opened this issue Jan 14, 2025 · 0 comments · May be fixed by #30332
Open

bug(Checkbox): strong-focus-indicators do not have a radius of 50% as default #30326

richardsengers opened this issue Jan 14, 2025 · 0 comments · May be fixed by #30332
Assignees
@crisbeto
Labels
area: material/checkbox P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@richardsengers
Copy link

richardsengers commented Jan 14, 2025 •
edited
Loading

I think checkboxes should have a 50% border-radius as a default.

it now looks like this:

Image

Reproduction

StackBlitz link: https://stackblitz.com/edit/3teh9fg3?file=src%2Fstyles.scss

Expected Behavior

Expected:

Image

Actual Behavior

Image

Environment

Angular CLI: 19.0.5
Node: 22.3.0
Package Manager: yarn 1.22.17
OS: win32 x64

Angular: 19.0.4
... 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.1900.5 (cli-only)
@angular-devkit/schematics 19.0.5
@angular/cdk 19.0.3
@angular/cli 19.0.5
@angular/material 19.0.3
@angular/material-date-fns-adapter 19.0.3
@schematics/angular 19.0.5
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0
@richardsengers richardsengers added the needs triage This issue needs to be triaged by the team label Jan 14, 2025
@richardsengers richardsengers changed the title bug(Checkbox | Radiobutton): strong-focus-indicators do not have a radius of 50% as default bug(Checkbox): strong-focus-indicators do not have a radius of 50% as default Jan 14, 2025
@crisbeto crisbeto self-assigned this Jan 15, 2025
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/checkbox and removed needs triage This issue needs to be triaged by the team labels Jan 15, 2025
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 15, 2025
@crisbeto
fix(material/checkbox): ensure focus indicator has the correct shape
d04931a 
The specificity for the checkbox's focus indicator was very low which means that if the ripple styles are loaded later, it can be overwritten.

Fixes angular#30326.
@crisbeto crisbeto linked a pull request Jan 15, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@crisbeto crisbeto

Labels
area: material/checkbox P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/checkbox): ensure focus indicator has the correct shape crisbeto/material2
2 participants
@richardsengers @crisbeto