[Bug]: Inconsistent Checkbox

[fabpico]

Package

@carbon/elements

Browser

Chrome

Package version

^10.33.0

React version

^16.8.6

Description

According to https://www.carbondesignsystem.com/components/checkbox/usage/ , checkboxes should look like

On https://www.carbondesignsystem.com/components/checkbox/code , checkbox is not rounded and the icon is not centered

On https://www.carbondesignsystem.com/components/checkbox/usage#live-demo , checkbox is not rounded

When implementing it, its not rounded

The implementation should be the same as on the first screenshot, since the designer expect such implementation.

CodeSandbox example

https://codesandbox.io/s/weathered-cdn-d5nju?file=/src/index.js

Steps to reproduce

Read description.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

cc @carbon-design-system/design can you take a look at this and see if either the code or documentation needs to be updated?

[laurenmrice]

@tw15egan There is a visual difference because in code the checkbox is drawn and is not using the icon asset, which has straight corners. In design the Sketch kit and images on the website use the checkbox icon asset, which has rounded corners.

I believe this was originally drawn in code because it is not actually possible to use an icon with the native checkbox component. What we could do to align the drawn checkbox in code is to edit it to round the corners of it. Alison may have some insight on how to do this because she originally worked on it.

[alisonjoseph]

I believe this component has been refactored since I last worked on it many years ago. 😅 However I don't see any reason why we couldn't add a border radius to match the icon if that is what is expected? (although maybe not exact since the icon is only rounded on the outside edge not inside, not sure if that's possible with css or not)

[fabpico]

I want to remind that the issue is not only about the corners, but also the alignment of the check-icon. Now on both mentioned examples, the icon is vertically too much down (previously it was only on the first example).

https://carbondesignsystem.com/components/checkbox/code/
https://carbondesignsystem.com/components/checkbox/usage/#live-demo

Chrome Version 101.0.4951.67 (Official Build) (64-bit)
Windows 10

[sstrubberg]

hey @fabpico, thanks for submitting the issue. This has been triaged and we'll be weighing it's priority against competing work-streams. If you're feeling up to it, and would like to submit a PR based on @alisonjoseph's recommendation with the border-radius, we'd be happy to review it.