BorderControl: Fix focus styling

[aaronrobertshaw]

Fixes: #40897

• Border Tools: Inconsistent focus borders #40897

What?

Makes the inner component focus styles and border radii consistent.

Why?

The small details matter.

How?

Updated focus styles and border radii including RTL styling.

UnitSelect

• Fixed RTL border radii
• Fixed inconsistent focus box-shadow and border

BorderControlDropdown

• Fixed z-index causing focus styles to be clipped

InputControl's BackdropUI

• Fixed RTL border radii
• Fixed focus box-shadow

Testing Instructions

1. Start up Storybook & visit BorderControl page
   • npm run storybook:dev
2. Optional: Zoom the page in as far as possible to more clearly see styling changes.
3. Select the input within the control then tab/shift-tab through the parts of the control, ensuring correct border radii and that the outline looks correct
4. Switch to RTL mode and repeat the process paying close attention to the border radii

Screenshots or screencast

Screen.Recording.2022-05-10.at.11.25.21.am.mp4

[andrewserong]

Nice work putting up these PRs to fine-tune the UI @aaronrobertshaw! The border radii are looking good to me, but the border width looks slightly inconsistent to me compared to similar components (e.g. InputControl) where the focus style doesn't change the overall size of the field — I was wondering if setting inset will fix it (and / or if the border-width needs to be slightly heavier?)

[aaronrobertshaw]

This PR now reworks the application of borders to the BorderControl's inner components. This allows for simpler focus styles and an inset box shadow for greater consistency with the common UnitControl.

Screen.Recording.2022-05-10.at.6.57.15.pm.mp4

[shaunandrews]

This looks great! Thanks for tackling it. I did notice that the left border radii are different from the rest:

[aaronrobertshaw]

I did notice that the left border radii are different from the rest:

Nice catch. Thank you.

I missed tweaking the button's border radii after refactoring the styling in ec58f46. That's been fixed now.

[andrewserong]

Excellent, thanks for reworking this @aaronrobertshaw, that's looking really solid now! ✨

✅ Works nicely in the editor and the focus style is consistent with the nearby UnitControls
✅ Tested in Storybook that it looks good in RTL mode

LGTM! 🚀