[calcite-color-picker] add section for suggested colors

[jcfranco]

The color picker has a section for storing colors, but it would be nice to add a special section for groups of color suggestions. The color picker from Chrome dev tools has a nice experience for this:

The new Map Viewer has a concept of suggested colors that could leverage this as well.

[macandcheese]

Is above MVB example tied to a picker? Maybe allowing a calcite-color-swatch item / set to be used anywhere and placed in accordion panes could be a useful implementation as well.

[jcfranco]

It's disconnected, but there's a 'color picker' in the collapsed section below.

Maybe allowing a calcite-color-swatch item / set to be used anywhere and placed in accordion panes could be a useful implementation as well.

This could work for simple color selection use cases, but there's no component at the moment for that.

[jcfranco]

There's been interest in adding multiple sections of suggested colors (e.g., accessible, basemap colors), so this is something the design would need to take into consideration.

[samanthahunter]

+1 for this enhancement

Our customers would like quick access to their site's theme colors while editing it, set it once and reuse everywhere. Would it be possible to provide the 'theme' colors as the default options in the saved colors area?

One pattern I saw in the webflow editor was 'global colors' had a triangle on them. So we can combine 'theme' colors with 'saved' colors in the same area - yet theme colors would not be editable/removable from the picker.

[samanthahunter]

Per @macandcheese idea, instead of combining 'theme' and 'saved' colors, could also use an accordion for swatch groups (in our case the theme colors) under the 'saved' colors area - which could also be a knob in the component to turn on/off.

[macandcheese]

I think there's value in providing these "Swatch groups" outside of the Color Picker component itself. There may be times where these are used as the sole method of picking color (choose one from set of many), so let's make sure it's able to stand on its own (whether that's a swatch group / swatch component or otherwise), in addition to alongside the Color Picker.

This was an example from awhile ago of a few color swatch groups (in this case adjacent to a color picker, but it is easy to imagine just having the groups themselves as a method of entry) : https://codesandbox.io/s/calcite-color-picker-swatch-group-example-in-popover-l6qbu7

[zaramatheson]

Commenting on behalf of Russ:

• Users a requesting the color picking include a set of standard colors the mirrors Pro selection.
• Time frame would be for the R01 2024
• Prio - Must. We have had multiple users request a standard color picker selection in MV. This would be used inside symbol styler, label styling, background color for example.
• Sample image of the Pro ArcGIS Color picker that users reference.

[macandcheese]

I think many of these use cases speak to making the color swatch component public and adding a swatch group that can handle selection. These are definitely valid within a Color Picker but are valid on their own as well outside that context.

@zaramatheson the above screenshot can be achieved with current components if needed more immediately for a product feature.

In a world where those components exist, we could look at having a "swatch-group" slot within Color Picker to accept one or multiple Swatch Groups of recommended / pre-determined colors.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

This issue has been automatically closed due to inactivity.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ellenupp]

+1 for Dashboards. We are interested in offering groups of predefined colors in the color picker, for example a set of theme colors or data point colors.

cc @allyshah

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.