fix(material-experimental): strong focus indicator clipped in checkbox and radio button #19423
Conversation
crisbeto
added
P3
googlebot
added
the
cla: yes
| @@ -58,6 +58,15 @@ | |||
| margin: 5px; | |||
| } | |||
|
|
|||
| // These components have to set `border-radius: 50%` in order to support density scaling | |||
| // which will clip a square focus indicator so we have to turn it into a circle. | |||
| .mat-mdc-radio-button, | |||
There was a problem hiding this comment.
Yeah, I noticed this as well. Regardless of the clipping, it looks better to render circular focus indicators on these controls. I'd go a step further and say we should render circular focus indicators on all components with circular ripples (i.e. mat-icon-button, mat-checkbox, mat-radio-button, mat-slide-toggle, date picker cells, etc) instead of just spot-fixing these two components. WDYT?
There was a problem hiding this comment.
I agree that the circular indicators look better, but I kind of like that the rectangular ones mimic the native browser focus outline. I don't feel strongly about it though.
There was a problem hiding this comment.
Sorry for the delayed response on this. I agree that it's nice that the rectangular ones somewhat match Chrome's default focus ring.
I still think the strong focus indicators should either be completely component-agnostic (and thus rectangular on every component), or match the shape of the component. It feels half-baked to have focus indicators circular on two components to work around some technical issues. Curious what @jelbourn thinks.
There was a problem hiding this comment.
I agree with Zack, I think if we're going to start making some of the indicators circular, we should just do it for all of the circular-ripple components
There was a problem hiding this comment.
I have no strong opinion; as long as they don't look broken it's fine with me
There was a problem hiding this comment.
I'm fine with merging this PR to fix the ones that look broken and just filing an issue to deal with the other ones that should be circular
…x and radio button In order to support density scaling, the MDC checkbox and radio button have `border-radius: 50%` on their ripple element which is also used as the strong focus indicator. Since the indicator is a square, it'll be clipped, unless we also make it into a circle.
crisbeto
force-pushed
the
mdc-radio-checkbox-strong-focus
branch
from
7504116 to
02e6fb4
Compare
|
LGTM |
…x and radio button (#19423) In order to support density scaling, the MDC checkbox and radio button have `border-radius: 50%` on their ripple element which is also used as the strong focus indicator. Since the indicator is a square, it'll be clipped, unless we also make it into a circle.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
In order to support density scaling, the MDC checkbox and radio button have
border-radius: 50%on their ripple element which is also used as the strong focus indicator. Since the indicator is a square, it'll be clipped, unless we also make it into a circle.For reference, here's what the circular indicators look like:
cc @zelliott