Skip to content
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

fix(checkbox): move padding to label instead of checkbox #5463

Merged
merged 4 commits into from
Feb 28, 2020

Conversation

tw15egan
Copy link
Collaborator

Closes #5461

Removes padding on the checkbox, and places it on the label so it only appears if the label is present.

Changelog

Changed

  • Moved padding-left from checkbox-label to checkbox-label-text

Testing / Reviewing

Ensure Checkbox still looks the same visually, and that nothing moves when hideLabel knob is checked.

@tw15egan tw15egan requested a review from a team as a code owner February 27, 2020 12:23
@ghost ghost requested review from emyarod and joshblack February 27, 2020 12:23
@netlify
Copy link

netlify bot commented Feb 27, 2020

Deploy preview for carbon-elements ready!

Built with commit 1bd6a22

https://deploy-preview-5463--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Feb 27, 2020

Deploy preview for carbon-components-react ready!

Built with commit 1bd6a22

https://deploy-preview-5463--carbon-components-react.netlify.com

@lee-chase
Copy link
Member

How about this instead @tw15egan so that space is still reserved

How about this instead

.bx--checkbox-label {
padding-left: 1.25rem;
}

.bx--checkbox-label-text {
padding-left: 0.4rem;
}

I have updated https://codesandbox.io/s/peaceful-dawn-k9dpj with .fixed-it class

Copy link
Member

@emyarod emyarod left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will you be splitting the padding between the label and label text?

@tw15egan
Copy link
Collaborator Author

@emyarod Yes, just updated 👍

Copy link
Member

@lee-chase lee-chase left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me

@tw15egan tw15egan merged commit 4df5fbf into carbon-design-system:master Feb 28, 2020
@tw15egan tw15egan deleted the checkbox-padding branch April 28, 2021 18:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Checkbox with hidden label is not square
5 participants