Carbon: Component Design Audit v1.2 - Checkbox

[emyarod]

Checkbox

• [ ] Inside needs to be block versus rounded (is this do-able?) post-v10 at the earliest, if at all
• [ ] Investigate using SVG for checkbox icon (is this do-able?) post-v10 at the earliest, if at all
• [x] The stroke weight of the check is fatter than the dash
• [x] Vertical distance between checkbox groups should be 8px

• [x] remove margin-top from checkbox when placed below a label

[emyarod]

to resolve the first 3 points, we may need to open a discussion on whether or not we want to keep our checkboxes contained within pseudoelements

[emyarod]

regarding the first two points, I believe the level of effort for these changes would be beyond the v10 milestone. We can refactor our component to support those features, but before we dive into it we probably should have a greater discussion about the potential direction we would need to take to incorporate those changes

[asudoh]

@IBM/carbon-designers Are the assessments from @emyarod on "block vs. rounded" and SVG topics make sense to you...? Thanks!

[jeanservaas]

@emyarod -- just to make clear what this disscussion was about: the original intent for checkbox was that the 20px svg checkbox icon would be used in the component... we didn't do this because the stroke weight of that icon was 1.25px which could cause lack of crispness. Instead alison generated the icon at 1px stroke weight and added 2px radius to the corners.

Mike was asking if we could go back to using the icon, and if not could we have a 1px radius on the corners vs. 2px, which would allow for the inner corner be a square and outer corner a curve.

Just wanted to make sure that those two first points were clear. So even if we can't get the block vs. radius on the inside... would it at least be possible just to:

• [x] change corner radius from 2px to 1px

If not, it is fine to leave this issue for now if we can just adjust the stoke weight for v10.

Thanks!

[emyarod]

thanks for providing more context @jeanservaas! I've added the corner radius change.

For the remaining point, the main thing I would like to have clarified is if we just want the checkbox icon to appear like the SVG icons we have, or if we actually want to use the SVG asset itself in our checkboxes. It looks like right now we are creating the check mark entirely in CSS so it is not an actual SVG (but it has the same appearance as/similar appearance to our actual SVG icon). If we want to directly use our SVG assets, then there would be some follow up questions since this could be a larger change due to how we currently construct our checkboxes

[jeanservaas]

Hi @emyarod

I think ultimately what we care about is what it looks like, not so worried about whether we build in with css or use the svg. We were just thinking it might be harder to achieve the radius corner with the square inset in CSS... @shixiedesign mentioned we might just have to change the way it's built in CSS by overlaying two shapes on each other.

Anyway, figuring this out may be beyond the scope for v10, which I totally understand. Thanks for your help!

[emyarod]

yeah making that change ("Inside needs to be block versus rounded") would be a bit more involved but it's definitely possible, it would probably just take some time that's better set aside after v10

are there any remaining changes or issues regarding the second point ("Investigate using SVG for checkbox icon")?

[jeanservaas]

No we are good! Thanks!

[asudoh]

CC @tw15egan

[carbon-bot]

:tada: This issue has been resolved in version 9.82.13 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: