Add nudge to include name for Custom Color Palette

[annezazu]

What problem does this address?

This is pulled from the eleventh call for testing for the FSE Outreach Program:

I actually missed that I needed to add a name to the color at all 😅 Since there’s no placeholder text in the area where the color name should be added, I completely overlooked it and assumed I would just add the color, click Done, and voilà! However, it looks like not adding a color name at all means the colors won’t get saved. Adding some directive placeholder text next to the colors – or even an error message after clicking Done – might have helped me move past that.

& another person:

Just like @evarlese observed (and thanks for the precious notes!), the way to deal with the Custom Color Palette is not straight forward, at all. She already explained it really well, so adding my +1 also to the proposed solutions. Kudos Erica!

Custom.Colors.testing.mp4

What is your proposed solution?

Rather than resetting the custom color and not saving it, add in a prompt or warning to have someone include a name for the color. Perhaps it could be as simple as highlighting the field if it's empty or adding in placeholder text for where the name needs to go:

To make it less jarring, could just add a weighted border that's black to point it out more as a field:

I'll leave it to designers :D

[noisysocks]

We should also add validation to this field. Names containing a space don't work for me when I use the custom colour. (Might be browser specific, I'm testing with Safari.)

[javierarce]

Rather than resetting the custom color and not saving it, add in a prompt or warning to have someone include a name for the color. Perhaps it could be as simple as highlighting the field if it's empty or adding in placeholder text for where the name needs to go

Depending on how much time we have to fix this UI, I can propose different solutions. Here's the quickest one:

Similar to what @annezazu proposes, I suggest adding a temporary color name using "color" plus the number of items on the list.

The reason for this suggestion is that right now, when the user clicks the + button to add a new color, we immediately show the popover, and then we close it when they click outside. At the same time, we hide the input field, so I fear that some people will forget to change the "enter name" prompt.

Another important thing I would add right away is the hover state for the input fields when they aren't active:

Hover.mp4

[colorful-tones]

There may be some overlap here with Color naming conflict for theme variables #36360. Especially with mention of color name validation.

[richtabor]

I like the idea of having the intiial label for a color being "Color $count", so the user doesn't have to think of/provide a label, and it is required.

[jiteshdhamaniya]

I'd just create a PR for it.

[ramonjd]

I've started a PR over at #36940

It only adds the default name for new colors so far, but I can look at validation and onHover effect mentioned in #36473 (comment) as well.

[ramonjd]

Another important thing I would add right away is the hover state for the input fields when they aren't active:

Getting the hover state width right is difficult since the input width, when editing, is constrained by the minus button.

The minus button isn't rendered when the item isn't in editable mode.

Getting it this far required a minimal change however: