Make SpacingSizesControl more intuitive

[richtabor]

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

CleanShot.2024-07-25.at.21.33.32.mp4

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.

CleanShot.2024-07-25.at.21.35.13.mp4

Here's a prototype

[andrewserong]

Just a quick comment that I like the prototype! I always find the dropdown fiddly to use, so I really like the idea of removing that step.

[hanneslsm]

Big +1! Love the prototype!
Also love that in your proposal the order is more intuitive, which would solve #51680

I'm only not sure of the chain icon.
Maybe a chevron would fit better for more advanced controls, even though I am aware that would be a new UX pattern we haven't used before?
Or the ones that used to be used in GB 16.0?

[richtabor]

Maybe a chevron would fit better for more advanced controls, even though I am aware that would be a new UX pattern we haven't used before?

It's used for the border sides and border radius controls. Linking and unlinking is a relatively common UX pattern for this sort of interface.

[hanneslsm]

It's used for the border sides and border radius controls. Linking and unlinking is a relatively common UX pattern for this sort of interface.

True, I forget about those. If we use the chain icon already in this context, let's go with it. Nothing we couldn't change later if needed.

[bacoords]

I think this is an improvement!

There'd basically be no UI option for linking all four sides, right? I'm not saying there needs to be honestly, such an edge use case and you can achieve it with this UI, I just wanted to confirm this point. Looks like Figma more more less offers this same experience of linking/unlinking the inline/block spacing options not all four sides. 👍

[richtabor]

There'd basically be no UI option for linking all four sides, right? I'm not saying there needs to be honestly, such an edge use case and you can achieve it with this UI, I just wanted to confirm this point.

Only if the block's dimensions set them all as linked, like how block gap is for many blocks (but some have two controls). I'm not sure if padding/margin can all be linked but I'll look.

[ndiego]

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.
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.

I like where the prototype is headed. These two issues in the current implementation are very frustrating.

[daviedR]

+1 for this UI improvement.

I think, there is a UI issue we could improve on the SpacingSizesControl: #59135
Currently, the no value and zero value states on the preset slider are in the same UI style.

[jasmussen]

There's a bit of overlap with work in #62618, so we should consolidate. I'm happy to close that one in favor of this, and in case there's some icon reusage we can do there's a Figma linked there. But that's also to say, this seems a good improvement both functionally and visually.

[madhusudhand]

@richtabor The suggested functionality implemented in #65193

I can work on a follow up to update the suggested icons. Could you provide svg assets?

[richtabor]

Next steps:

• Change the order of the range controls to be Top, Bottom, Left, Right. This way when you break the connection, the controls with the same values are placed next to each other, giving you a better sense of what's what.
• Update sides icons:
  
• Consider updating the icon used for linking, and additional settings, to have a vertical orientation, which flows better vertically down the inspector, making it easier to identify both.