[Card Group] Add a Card Group component to facilitate selection and spacing of Card components

macandcheese commented 1 year ago

Description

As a user, I'd like to be able to use Card's current selectable functionality in a way that more closely resembles a radio / selectionMode="single" from other Calcite Components.

Unlike other components with selection, there is no parent container that determines selected items or provides them in a selectedItems property / through events. To create a set of selectable cards, currently each card must be selectable, and only multiple selection is provided to a user:

A containing Card Group component could be used to:

provide consistent spacing / flex handling of Card components
provide easier to use selection events / property with selectedItems
allow for the "usual suspects" of selectionMode expected across our components: single, multiple, single-persist, none (default)
better allow for handling and spacing of Cards at smaller viewports

A refactored Card component could help:

simplify the event story for Card selection (by replicating a checkbox with another visual element or limiting the emit of that internal event)
improve visual appearance of selection affordances

User Stories

As a user, I want to be able to allow a user to select one of many cards. Currently, I need to manage selectable property on each card, and need to build additional UI, controls, and user guidance around the limitation that only "multiple selection" is available.

Acceptance Criteria

A parent Card Group component is added that provides consistent spacing and selection modes to contained Cards.

Relevant Info

No response

Helpful Details

cc @justinprather

Priority impact

p3 - want for upcoming milestone

Esri team

ArcGIS Hub

github-actions[bot] commented 1 year ago

cc @ashetland, @SkyeSeitz

github-actions[bot] commented 7 months ago

Installed and assigned for verification.

geospatialem commented 7 months ago

Verified with https://codepen.io/mac_and_cheese/pen/gOEyZPz with 2.6.0-next.3 using keyboard, mouse, and Windows AT - JAWs and NVDA. :sparkles:

Esri / calcite-design-system