Adds prepend and append to the EuiColorPicker

[elizabetdev]

Summary

Part of the #2794

This PR adds a prepend and append to the EuiColorPicker.

More toggling options were added into the Forms Color Selection section of the docs.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[cchaos]

Thanks for adding this. The only visual issue I see is that the input still has rounded corners as seen in the focus and invalid states.

[elizabetdev]

Thanks, @cchaos. I just fixed the border-radius issue:

[thompsongl]

LGTM! Thanks for the test

.euiColorPicker__popoverAnchor { ... is still in here. Is this going to change at all?

[elizabetdev]

I just added the missing className euiColorPicker__popoverAnchor into the EuiPopover and the issue with the arrow overlaping is fixed:

This way I don't need to change the .euiColorPicker__popoverAnchor { ... css.

[cchaos]

Hmmm, sorry I didn't catch this before. But what do you think about where the dropdown happens? Where the left side of the popover is aligned with the prepend versus the actual input.

[thompsongl]

Hmmm, sorry I didn't catch this before. But what do you think about where the dropdown happens? Where the left side of the popover is aligned with the prepend versus the actual input.

I missed this, too. But, if we want the alignment to change, we'll need to modify how the popover service works. It currently doesn't accept enough params to account for positioning like that. (Certainly possible; it just may be need to be done in a separate issue)

[cchaos]

(Certainly possible; it just may be need to be done in a separate issue)

Ok, I'll create an issue. This PR 👍 LGTM!