Checkbox with hidden label is not square

[lee-chase]

What package(s) are you using?

• carbon-components
• carbon-components-react
• carbon-components-vue

Detailed description

Describe in detail the issue you're having.
When hiding the label of the Checkbox component the component does not become square making it harder to align it horizontally.

Is this issue related to a specific component?

Checkbox

What did you expect to happen? What happened instead? What would you like to
see changed?

Checkbox should be square with the visual elements centred.

What browser are you working in?
Chrome

What version of the Carbon Design System are you using?
10.9

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Carbon-Components-Vue adding the hideLabel feature when shape of Checkbox was noticed carbon-design-system/carbon-components-vue#835

Steps to reproduce the issue

1. Go here https://react.carbondesignsystem.com/?path=/story/checkbox--checked
2. Hide the checkbox

E.g. https://codesandbox.io/s/peaceful-dawn-k9dpj

Additional information

[tw15egan]

Since we're using some pseudo-elements to create the checkbox, it's not going to take up any space, but I created a PR to move the padding to the label so it doesn't have any arbitrary padding when a label does not exist. Let me know if that works 👍

[lee-chase]

Made alternative suggestion in PR to keep space reserved.