Steps to replicate the issue (include links if applicable):
What happens?:
The button does not preserve a square aspect ratio.
What should have happened instead?:
The button should remain square—32px by 32px in the medium size.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Update Codex from v2.2.0 to v2.2.1 | mediawiki/core | master | +175 -111 | |
| Button, styles: Remove padding for icon-only Buttons | design/codex | main | +4 -11 |
I think the simplest solution would be to set padding: @spacing-horizontal-button on icon-only buttons. We currently set padding-left: @spacing-horizontal-button and padding-right: @spacing-horizontal-button for all buttons. Extending that to top and bottom for icon-only buttons will keep them square across font modes. They'll be the following sizes:
One concern here is that icon-only buttons would be taller than text buttons. If that's a problem, we could just apply the all-around padding for all buttons, meaning they'll all grow in height at the large and x-large font modes.
Alternately, if you want all buttons to be 32px tall at all font modes, you could reduce the horizontal padding at the large and x-large font modes to prevent the buttons from getting wider as the icon grows.
Thanks for providing this. Okay, so you feel this should be solved with padding only, not max-height, correct? At this point, until we can do a more responsive review of the scaling of components like Buttons and inputs, I think we should keep these components the same height at all font modes.
Change #1155804 had a related patch set uploaded (by Dtorsani; author: Dtorsani):
[design/codex@main] Button: Add max-width to icon-only Buttons
@AnneT I've put up a patch to at least start looking and providing feedback on something tangible. This might be just me but I found the padding solution to be more complicated, since it requires updating a component token (@spacing-horizontal-button-icon-only) across only specific font modes. Instead I've put up a patch that uses the same token (@min-size-interactive-pointer or @min-size-interactive-touch) to set a max-width next to the already set min-width to define the square size. This seems a lot more simple, but please enlighten me if this is not the right approach.
Change #1155804 merged by jenkins-bot:
[design/codex@main] Button, styles: Remove padding for icon-only Buttons
Change #1171718 had a related patch set uploaded (by Catrope; author: Catrope):
[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1
Change #1171718 merged by jenkins-bot:
[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1