Add Eye Dropper Color Picker as a datatype

[bjarnef]

Prerequisites

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

Description

Now that we have <umb-color-picker> component since Umbraco v8.10.0 #8812 and we also use this for configuration of background and icon color in Block List editor #9056 it would be nice to have a basic color picker property editor.

We already have the "Approved Color" datatype instance using "Color Picker" property editor, which work great most of the time. However for various projects we have had the need using a wider range of colors, where the current color property editor might not always fit the needs.

This PR implement a Eyedropper Color Picker (naming is hard, so we might want to rename this - however "Color Picker" and "colorpicker" alias is already reserved by the current property editor).

Configuration
Limited to just the most basic configuration.

Content

[bjarnef]

Not sure if a better name than "Eyedropper" might fit this color picker. Maybe "Compact Color Picker" or "Tiny Color Picker"?
Feel free to add more suggestions 🤓

[bjarnef]

"Color Palette Picker", "Palette Color Picker", "Spectrum Color Picker",..?

[bjarnef]

I have changed the alias of the picker to Umbraco.ColorPicker.EyeDropper .. a bit similar to format of Umbraco.Dropdown.Flexible alias.

I also considered the name "Spectrum Color Picker" with alias Umbraco.ColorPicker.Spectrum.

[bjarnef]

@nielslyngsoe maybe you have some feedback on this PR? 🙂

[bjarnef]

Mandatory property:

Mandatory property with custom message:

It seems the validation styling on the property label isn't consistent when using default vs custom validation message, but we can look at that in another PR.

[nul800sebastiaan]

We're loving it! Thanks for the work @bjarnef - looking really good and works well! 👍

[vaskinhu]

Any plans on making the Palette configurable?

[nielslyngsoe]

@bjarnef
Yeah the styling with the custom message seems wrong. I'm not sure if the red text color serves any purpose as the tooltip already is quite dramatic, so that might just need to go away.

[bjarnef]

Yeah the styling with the custom message seems wrong. I'm not sure if the red text color serves any purpose as the tooltip already is quite dramatic, so that might just need to go away

@nielslyngsoe I believe the red messages is just the core UI ... I recall these where later changes to a yellow/warning style instead.

I think what @vaskinhu is asking for regarding making the Palette configurable, is that the default palette in the color picker does have this option to add specific colors (instead of the default ones), e.g. red, green, blue, yellow, orange and purple, but not sure we want that in core to keep it simple. However it is always possible to create a custom property editor with more configuration options.