Show all of the split values in shorthand input for SplitChainedNumberInput

[lankaukk]

Note: The first half of the original issue has been moved into #6220 and completed

The border radius and padding controls in the inspector both use the SplitChainedNumberInput so that you can choose edit the shorthand css property, or each value individually.

However, when you set a shorthand property and then you condense it back to one value, it feels buggy because it appears as if no value for that property is set anymore. For example:

Solution:

• [ ] show all of the split values in the shorthand input when applied, separated by commas. You should be able to see this and type into the inputs this way for both padding and border-radius: (like padding in figma)

[liady]

@lankaukk regarding the second item - do we still want it this way? I feel like we need to decide first how we handle shorthand/expanded representation of these css props

[lankaukk]

@liady yes we still want it this way in the end. The way we handle the css props warrants a dev discussion 👍

[liady]

@lankaukk sounds good. So maybe I'll split this ticket to two different issues, so it will be easy to track (one of them is already in its own ticket)

[balazsbajorics]

hmm, I don't think I like this, this essentially introduces a second parallel way to edit the 4 properties individually! We have two more options IMO:

1. when the user changes the control to show fewer inputs, we could indicate the presence of mixed value (usually a grey -), and let them override with a single number
2. OR we turn the clicking of the (-) icon into a command which actually strips the values and replaces them with a common one. to me 1 feels less agressive