UnitControl: Update unit select's focus styles

[aaronrobertshaw]

Related:

• BorderControl: Render border color/style dropdown as UnitControl prefix #42212

What?

Fixes the unit select's focus styling within the UnitControl component.

Why?

As it currently stands the UnitControl wrapper's border obscures focus styles. The focus border/box-shadow is a little inconsistent as well.

How?

• Brings in the style overrides previously applied to the unit select within the BorderControl component.
• The focus styles were initially outlined in Border Tools: Inconsistent focus borders #40897
• Removes 1px left/right margin from UnitSelect which caused inset box-shadow to expose the wrapper's border.

Testing Instructions

1. Take a look at the focus styling for the UnitControl in Storybook on trunk
2. Checkout this branch and ensure the unit select's focus styles are visible and consistent with the inputs
3. Repeat the process this time checking instances of the UnitControl within the editors

Screenshots or screencast

Before

Screen.Recording.2022-07-13.at.3.21.28.pm.mp4

After

Screen.Recording.2022-07-13.at.3.27.16.pm.mp4

[andreszs]

This PR looks perfect.

There seems to be an alarming increase in GUI flaws recently. Maybe some additional testing is required before adding more features in subsequent WP versions?

[glendaviesnz]

Tested well for me in Storybook and Editor

[mirka]

Thanks for bringing the fix "upstream", it looks a lot nicer!

The CSS sure looks painful though, maybe we'll sort it out one day if it becomes a common pattern.