Multi-select chip group affordance enhancement

[mattdente]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

The current multi-select chip group's affordance is not entirely clear. Rounded selection indicators could be perceived as single-select radio buttons.

After consulting with Adam, he proposed an enhancement for multi-selection chips where by the selection indicator is a square/box which looks more like a checkbox (i.e. a better affordance we suspect).

Acceptance Criteria

The proposed new design would function in the same way as it currently does, but instead of presenting a round selection indicator, the multi-select chips would present a square selection indicator.

Relevant Info

No response

Which Component

Chip group (https://developers.arcgis.com/calcite-design-system/components/chip-group/)

Example Use Case

In Data Pipelines, when a user "runs" a pipeline, the "run details" can produce a long list of results. We're using the multi-select chip filter to allow users to filter by run detail message type like so:

Priority impact

p3 - want for upcoming milestone

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[macandcheese]

I think this would be a good improvement for system consistency. Might require a double check of https://github.com/Esri/calcite-design-system/issues/7425 to ensure the new icon glyph still works at small scales.

cc @ashetland @SkyeSeitz

[ashetland]

I think this would be a good improvement for system consistency. Might require a double check of #7425 to ensure the new icon glyph still works at small scales.

cc @ashetland @SkyeSeitz

Agreed. Might make sense to pair with #7425 for the double-check.

[ashetland]

Here's the design spec for this one https://www.figma.com/design/HB1Ollf1D1Csy2PtXJ3Hai/Chip-selection-affordance-%26-padding?node-id=501-15580&m=dev

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[mattdente]

Nice. I can't tell by looking at this spec, so just want to confirm, the component will allow you to show an unselected checkbox or radio button state?

[ashetland]

@mattdente This would update the multi-select appearance. If you'd like to see an empty state in the selection-mode="single", would you be able to log a new issue?

[mattdente]

Thanks for clarifying, @ashetland. I do think the same affordance (unselected radio button state) for the single select group would be an improvement. If you, and @macandcheese both agree, I can write up the issue.

[macandcheese]

I hesitate to change the behavior of the single / single-persist modes. I think this change makes sense for multiple, where we just adjust the icon affordance used, but I'm not sure I agree it's needed in the single / single-persist.

[mattdente]

Makes sense. I'll stay tuned for any feedback I may see during usability studies on the single-select behavior, it may be just fine. I have no direct observations of that being a problem. It does feel inconsistent with multi-select, but perhaps that's not a problem either.