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

[Checkbox] indicator is inline element #2716

Merged
merged 6 commits into from
Jul 24, 2018
Merged

Conversation

giladgray
Copy link
Contributor

@giladgray giladgray commented Jul 23, 2018

  • Checkbox alignment has always been a few pixels off from normal text, because the indicator relied heavily on line-height for centering (classic 2014).
  • In this PR, control indicator is now an inline element and does not rely on line-height for positioning.
  • Also refactor away from a bad @extend that generated very bloated CSS.

before

height: 16px. padding/position.
image

after

height: 18px (standard line-height). centered: perfect.
image

@blueprint-bot
Copy link

add disabled switch to xample

Preview: documentation | landing | table

@blueprint-bot
Copy link

move some blocks around

Preview: documentation | landing | table

Copy link
Contributor

@themadcreator themadcreator left a comment

Choose a reason for hiding this comment

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

Thanks for the disabled example

margin: 0;
display: inline-block;
position: relative;
margin-top: -3px;
Copy link
Contributor

Choose a reason for hiding this comment

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

does this depend of font size?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

😕 it does, but checkboxes were not designed to support arbitrary font size. that would require a different approach. i've been fiddling with a flex layout a la menu items (requiring wrapping children in a <span>) but i don't think it's worth the change just yet.

top: 0;
left: 0;
margin: 0;
display: inline-block;
Copy link
Contributor

Choose a reason for hiding this comment

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

this seems pretty major

Copy link
Contributor Author

Choose a reason for hiding this comment

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

it is, but it's also wholly contained inside the component. no API has been changed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants