v8: Fix property settings styles

[bjarnef]

Prerequisites

• I have added steps to test this contribution in the description below

If there's an existing issue for this PR then this fixes: #4090

Description

This make the property settings datatype a bit prettier and with more interactions on hover.

[emmaburstow]

Good morning @bjarnef!

Thanks for the contribution. We'll take a look and let you know if we need anything.

Emma

[nielslyngsoe]

Hi Bjarne

Super great that you bring this one up. I definitely think we need to improve it, and I think we can take it even further than what you'r suggesting.

I would love to change the UX for this one quite a bit, especially now that we have the opportunity before v8 gets shipped.

Visually
First lets visually make the hole thing into one box. Let's have one box surrounding what we have today, and then get rid of the other boxes.

Then let's add a trash-bin icon beneath the edit-icon.

Interaction
The trash-pin icon will remove the data-type, bringing the data-type part back to the same state as when you just created the property.
Meaning you now can click "Add editor" to pick an editor.
— This does give the user another click to change a data-type, it does become more intuitive, and gives a nice impression of whats actually happening. Cause today it can be confusing for new comers whats going on.

The interaction of the data-type-icon and the editor-name and editor-type should then also be changed to do the same as the edit-icon.

Keyboard
For keyboard interaction it would be nice if you can focus on the edit-icon and the trash-icon.
if the user hits enter on the trash-icon, it would be nice if we can make sure that the "Add editor"-button is in focus after that. Meaning that you just have to press double enter on the trash-bin to pick another data-type.

I hope you find this feedback okay, thanks for bringing thise one up, and thanks a lot for you contributions.

Let me know if you have any questions

Best regards, the new UI/UX guy.

[bjarnef]

@nielslyngsoe if we change the layout further, I think Umbraco should ensure it is also updated in Umbraco Forms since it has same layout when adding fields.

It adding a trash icon, it should my maybe also use the umb-confirm-icon like on properties.

[nul800sebastiaan]

Hi @bjarnef, as Niels' feedback indicates, this a good topic and has led to us thinking about what is needed a bit more. Of course we should get Forms to look and behave the same way in due time too.

We're not quite happy with the proposed updates in this PR yet and it looks like this could be split up in 3 different PRs instead. But of course also awesome if it turns into a single one.

I'll close this for now but if you're going to work with the feedback then feel free to re-open it of course!

Thanks! 👍

[bjarnef]

@nul800sebastiaan okay, maybe it is also worth thinking about updating the macro editor (data type) picker to be consistent with this. Check this issue:
#4318