New Component: calcite-input-color-picker

[jcfranco]

Description

This component will help present a compact, inline experience for picking colors.

cc @mitc7862

User Stories

Acceptance Criteria

• Allows users to save and remove colors
• The 3 color swatches on the inline section are ordered from most recent to oldest
• When the active color is pressed, it presents the color picker in a popover
  • The active color should update when the user clicks "done" after interacting with the color picker

Out of Scope

Helpful Details

Related issue: #950

[bstifle]

existing design. clicking the red would launch calcite-color-picker in a popover

related issue #1934

[jcfranco]

@bstifle I'm not sure I follow. Would #1934 replace this one? Would it be used as a base?

[eriklharper]

I prefer the name calcite-input-color over calcite-input-color-picker for the same reason I prefer calcite-input-time over calcite-input-time-picker. No need to have the -picker at the end when the last word is sufficient for communicating the type of input it is.

Also, the designs do appear to conflict between this issue and #1934. Do both designs need to be accommodated in the same component or is one more current than the other? I honestly prefer the simpler more compact design of #1934.

[jcfranco]

@eriklharper You bring up a good point. The main purpose of these components is to provide a way to quickly input the value. The picking part is more of a next step when fine-tuning the value. I'm going to move this discussion to #2512.

WRT to the design, I have no preference as long as both match functionality.

[github-actions]

cc @geospatialem, @brittneytewks

[geospatialem]

Blocked by #10288