Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Update buttons and icons buttons size and consistency #19058
I've noticed that our current Button components have inconsistent sizes (between IconButton and regular Button), So I was working on consolidating the APIs and making sure everything is consistent.
While doing so we have to make some decisions about the size of the default buttons, small and large.
I decided to remove the large size because it doesn't make sense when the default button size is 36px.
Once this PR lands, we should follow-up with a Core ticket for consistency across all WP-Admin.
I also added a story to show all the different variations in one single place.
There's a few style breaking changes, I don't think these will have big impacts on third party usage though.
Impressive work simplifying things here. This is the most visible change as the publish/preview buttons are now 2px taller:
Paired with other spacing efforts, this is good, as it moves the default button closer to the grid system.
The icon buttons should remain square, though, regardless of size, with the vertical ellipsis currently being the only intentional exception to that rule:
I was about to report the issues with misplaced icons in the icon button but you were faster with 994654f.
I couldn't find any regressions in comparison with recent refactorings. Awesome work. There is still one issue with spacing in the toolbar for buttons, but it exists in master so it should be tackled separately:
I noticed also a slight change in the hover state for menu items. It brings consistency so I don't think it's concerning. However, it should be approved by designers.
I think that's perhaps a simplistic take. I agree in code purity principle, but due to how browsers render text, we often have to massage the paddings and make exceptions. There are some gnarly details in https://youtu.be/jnV1u67_yVg?t=642
The padding left and right for normal buttons here does seem a little tight, honestly I think it could be much more relaxed, but I acknowledge your iconbutton point. It's probably worth moving forward with what we have here as it's not terrible, and we need to acknowledge that Mobile is a factor in making the buttons wider.
But perhaps in a followup PR, I would love to tweak the horizontal padding further for buttons to make it more harmonious. This horizontal padding additionally serves the purpose of ambiguating from an input field, which is especially important given the more minimalist style of buttons currently.
@jasmussen what would get us to the grid system size now on buttons and could that come in with this? I am conscious we have a lot of little changes, which are great but moving together on toolbar and interaction points like buttons seems sensible.
I'm thinking of an 8px grid system with options for 4 and 12px usage. With icons being 24px and a block toolbar being 48px, 36px is compatible (9x4). Right now there's 28px some places, and 34px in others, so it's a bit messy. 12/24/36/48 is technically base12 but is 8px grid compatible it feels like.
I don't think it's necessarily something that has to happen with this PR, other than the capacity in which it already is (small = 24px, large = 36px). I think Dave Whitley had created a grid scale that might be a good next step?
Sorry for not catching this, but this PR appears to have caused a small issue with the button colors.
The gray color is #555d66 (which is $dark-gray-500).
The color here is unset and defaults to what the browser provides, which is a semi-opaque black that translates to #222222 on a white background.
The last HEAD that worked was the one before this one in the commitlist,