Open afercia opened 5 days ago
Quickly looking at a few buttons instances in the codenase, it appears there's some room for some CSS clean-up. For example, the X close button of the tabs panel uses the small
variant. That should be sufficient to render the button with the 24 pixels size but there's still some CSS overriding in place, which I assume it's a leftover and should be removed. See below, where the $icon-size
variable is 24 pixels:
This close button appears to have been changed to a small size by #61331.
cc @WordPress/gutenberg-design
I agree the buttons should be the same size, as should the spacing between them and the horizontal padding of their containers. This consistency would make alignment much simpler to achieve and in most cases the default meaning we can remove some ad hoc styling.
Description
See conversation on https://github.com/WordPress/gutenberg/pull/63243
Recent changes in https://github.com/WordPress/gutenberg/pull/61331 and other PRs standardized the size of various X Close buttons to the
small
variant, which is 24 by 24 pixels.While standardizing is good, unnecessarily reducing the target size isn't.
Whenever possible, given the constraints ofd the layout and containers where the buttons live, the target size should be as large as possible.
Additionally, the 24px size is inconsistent with other buttons that may be displayed close to the X button. A few examples where I used background colors to illustrate the inconsistency:
In the Styles panel header: 3 buttons use the
compact
size (32 pixels) and the X button uses thesmall
size (24 pixels):Similarly, in the PLugins panel, one button is
compact
and the X button issmall
:A good point was made on https://github.com/WordPress/gutenberg/pull/63243#issuecomment-2422641020 that these buttons should be horizontally aligned with other controls in the UI so that the right padding of the containers should be adjusted. In the screenshot below, observe that besides the inconsistent size, the container right padding is inconsistent as well:
Additionally: all the other X close buttons e.g. within modal dialogs should be at least
compact
(32 by 32 pixels).It is worth reminding that the WCAG Target Size (Minimum) requires a size of at least 24 by 24 CSS pixels. That's the minimum though. There's no reason not to make these buttons bigger, when possible. The editor should aim to provide the best possible experience and not be limited to meet the minimum requirements.
Step-by-step reproduction instructions
small
.compact
, while the X close button issmall
.small
. Observe there is enough space to make itcompact
.one and observe the X close button is
small. Observe there is enough space to make it
compact`.Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.