Create color picker component
With the creation of gitlab#287826 (closed) and it being used in gitlab#287827 (closed), we now have several label related places a color picker is being used.
To make sure these are using our full GitLab UI styling and to facilitate updates to this area in future, it would be a great idea to incorporate a generic color picker into GitLab UI.
The functionality of this color picker would be the same as the existing color picker for now:
- An input field to enter a color HEX value manually, requires
#
prefix to be entered - A preview tile next to this input field to show the color that has been entered
- A collection of preset colors to be shown below the color picker
- Clicking on one of these should update the input field with the selected HEX value and update the preview tile with the new color
However, we can make this even more versatile and usable for a wide-array of situations by:
- Change input so we prefix with
#
if it doesn't exist - Support more than just HEX. We could support RGB, RGBA, HSL and HSLA too.
- Give the option to hide the color input description and what it actually says
- Give the option to pick whether to show preset colors and whether to show them above or below the input
- Give the option to enter a preset colors description
- Give the option to pick whether the preset colors are spaced or compact (
/groups/[GROUP]-/labels/new
vsIssue labels -> Create project label
) - Give the option to pass in preset colors rather than using the defaults