Improve Select Menu spacing #844
Conversation
|
This pull request is automatically deployed with Now. Latest deployment for this branch: https://primer-css-git-select-menu-spacing.primer.now.sh |
|
One side effect of adding the icon as inline block is that there could be a "white space gap", depending how the markup is authored. Also the Primer docs remove the white space, but storybook doesn't.
There are a few options to remove it all the time. |
Add erb to example
simurai
moved this from Work in Progress
to Ready to release
in 📦 Primer CSS release tracking
Ok, I think this is now ready. /cc @shawnbot |
src/select-menu/select-menu.scss
Outdated
| position: absolute; | ||
| height: 1.5em; // Mimics line-height to vertically center the icon | ||
| margin-left: -20px; | ||
| width: 16px; // fixed width to make sure following content aligns |
There was a problem hiding this comment.
Just curious: why 16px here instead of $spacer-3?
There was a problem hiding this comment.
My thinking was that the fixed width has less to do with "spacing" and is more related to the maximal width of Octicons, which are 16px.
But yeah, I'll change it to $spacer-3 to avoid ✨ magic numbers.
This makes the check icons optional. Which means that if no check icons are added, the left padding is reduced and aligned with the title:
Closes #843