The current experience of editing a specific sides of the SpacingSizesControl is difficult to parse.

Here's why:

1. The "controlName options" icon (the DropdownMenu that lists the individual sides) has a very similar icon to the icons to the left of the RangeControls for each. It's not clear what this icon does, and because it's so similar it's easy to mistake the other icons for this (and vise versa).
2. We're prioritizing applying one side at a time, over any side at once.
3. If you switch to any of the individual sides, the UI will only show that current side. You can have a value applied to others, but the UI only shows the current side.
4. If you switch to any of the individual sides and want to change another, you have to switch back to another state to change another. The alternative is to always change to the "Custom" option, which shows all sides.
5. We have the notion of "Link sides" and "Unlink sides" settings, as seen in the border and border radius controls. Why should SpacingSizesControl perform differently? It's the only control with an additional DropdownMenu to switch views within the component.

The original effort to only show one side at a time was an effort to save vertical space in the Inspector, but with the current improvements to this UI, I think we can afford to use this space—to make it much more intuitive to use.

Current

Proposed

You select the "Unlink sides" icon and the sides are unlinked. No DropdownMenu to invoke singular sides. I've also updated icons to make them easier to scan and follow a vertical line.

Here's a prototype