UnitControl: Update unit select styles

[mirka]

What?

Makes the following improvements to the UnitControl unit select styles when in the 40px size:

• Adds field-sizing: content so the select can hug the width of the current unit label. This will make the whitespace look more consistent across units. (Consider this a progressive enhancement, because the field-sizing property is not implemented in Safari and Firefox yet.)
• Fixes the hover style, which didn't properly reflect the border radius.

Testing Instructions

See Storybook for UnitControl.

Screenshots or screencast

Before	After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: jameskoster <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ciampo]

LGTM 🚀

[ciampo]

I'd be curious to know the reason for using inset in the first place

[mirka]

I think it was copypasta from the older 36px size.

[github-actions]

Flaky tests detected in af44d19.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10504728508
📝 Reported issues:

• [Flaky Test] Sorting #64430 in /test/e2e/specs/site-editor/new-templates-list.spec.js

[jameskoster]

Nice :)

I'm curious about where the styling for the unit selector comes from, is it custom? It seems that we could save a little space by removing the padding and the min-width?

[mirka]

It seems that we could save a little space by removing the padding and the min-width?

@jameskoster Could you clarify to make sure I'm understanding you correctly? The padding is already the lowest we can go (4px), and a 24px min-width seems reasonable to maintain as a tap target.

[jameskoster]

I meant that if we remove the padding then the select width could be reduced slightly, which might be helpful in certain situations like the Content / Wide inputs we were discussing recently. We could save 4px:

(Top is current, bottom is 0 padding). It seems like the padding is only there to accommodate the hover style (outline), but that could easily be tweaked to something else like an underline.

and a 24px min-width seems reasonable to maintain as a tap target

Fair point!

[mirka]

I see, thanks for clarifying!

It seems like the padding is only there to accommodate the hover style (outline), but that could easily be tweaked to something else like an underline.

Personally, an underline for a hover/focus style seems quite foreign in our look & feel, like it comes from a different universe (Google Material). We can consider it separately from this PR if you want to propose it though!