-
-
Notifications
You must be signed in to change notification settings - Fork 787
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.
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
Radio input checked state #786
Comments
SVG use is consistent in radio and checkbox, so I'd like to maintain that consistency and find a better solution that works for both (and future) components. A couple ideas:
<span part="checked-icon" class="radio__icon">
<svg part="checked-icon-image" viewBox="0 0 16 16">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill="currentColor">
<circle cx="8" cy="8" r="3.42857143"></circle>
</g>
</g>
</svg>
</span> Again, I'm reluctant to get rid of the SVG as it keeps things consistent and it's much easier to style things like checkmarks with vector images than CSS hacks. |
After thinking about this more, there's only one instance of this in the library (Image Comparer) and I'm thinking of removing it to prevent such a pattern from propagating. It's inelegant, and a better solution for replacing default SVGs would be some kind of registry similar to Icon Libraries or the Animation Registry. However, I'm not convinced this is something many users are going to want, so it's probably not worth the extra boilerplate, modules, and confusion it will take to pull that off.
This is the approach I took. I removed the After looking at some other components (e.g. the caret SVG in Button, the ring SVG in Progress Ring, and the spinner SVG in Spinner), all components are consistently applying parts so you can override them by hiding the SVG and styling the <sl-checkbox>Checkbox</sl-checkbox>
<style>
sl-checkbox[checked]::part(checked-icon) {
display: none;
}
sl-checkbox[checked]::part(control) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' part='checked-icon' class='checkbox__icon' viewBox='0 0 16 16'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round'%3E%3Cg stroke='lime' stroke-width='2'%3E%3Cg transform='translate(3.428571, 3.428571)'%3E%3Cpath d='M0,5.71428571 L3.42857143,9.14285714'%3E%3C/path%3E%3Cpath d='M9.14285714,0 L3.42857143,9.14285714'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
</style> This example uses the same SVG that's baked into checkbox, but you can use any SVG. Alas, we can't use <sl-checkbox>Checkbox</sl-checkbox>
<style>
sl-checkbox[checked]::part(checked-icon) {
display: none;
}
sl-checkbox[checked]::part(control) {
background: red;
clip-path: polygon(
20% 0%,
0% 20%,
30% 50%,
0% 80%,
20% 100%,
50% 70%,
80% 100%,
100% 80%,
70% 50%,
100% 20%,
80% 0%,
50% 30%
);
}
</style> |
What issue are you having?
It is difficult to theme the checked state of the Radio Input since it uses an SVG element. So even for minor adjustments, the whole SVG needs to be overwritten.
https://github.com/shoelace-style/shoelace/blob/next/src/components/radio/radio.ts
Describe the solution you'd like
Instead of an SVG the checked state could be styled using CSS. Either by using a border styling or pseudo element. This would allow for the checked state to be easily customizable since pseudo elements and classes can be themed using CSS Parts.
Example using border styling:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#styling_radio_inputs
Example using pseudo elements:
Describe alternatives you've considered
We considered swapping the entire SVG element using the CSS Part provided (
checked-icon
).The text was updated successfully, but these errors were encountered: