feat(card-group): Add Card Group component
Related Issue: #7223
Codepen preview of the new functionality: https://codepen.io/mac_and_cheese/pen/gOEyZPz?editors=1000
Summary
Adds a new Card Group component with a selectionMode capability.
- Follows
selectionModeparadigm from other components with values ofmultiple,single,single-persist,none(default). - Has a readOnly
selectedItemsproperty andcalciteCardGroupSelectevent. - Keyboard navigation between focused Card elements with arrow keys, using Space / Enter to interact.
- Mouse user can use the visual icon affordance - it is not included in tab order and focuses the card body.
Changes to Card:
- Monitors content in default slot and conditionally applies padding when needed.
- Deprecates
selectablefrom Card (direct replacement is a parent Card GroupselectionMode: multiple) - Deprecates
title,subtitleslots and addsheadinganddescriptionto align with naming convention. - The
calciteCardSelectevent remains and will continue to work post-removal ofselectablein a future breaking change release. - Adds
deselecttranslated message. - Styling / alignment updates.
Todo:
- Update css to use the updated token refactor from 7180 to prevent merge conflicts
- Card stretch / wrap improvements
Looks g2g from the design end! ✨
Confirmed low-risk as it makes minor updates to card.
we might need a "new component" checklist doc for this one.
@driskull Excellent idea! Do we have something along those lines we could use as a base? This seems familiar. 🤔❓
I think the conventions doc is what we got. Maybe we just add a new components section for ease of linking and finding. We can copy or link to the usage doc and stencil config parts.
Might be nice to beef up our conventions to talk about usage guidelines for the following as well:
- requestAnimationFrame
- componentOnReady
- forceUpdate
- readTask
- writeTask
@jcfranco made some updates to address feedback, @geospatialem I made some changes to better support JAWS / NVDA - can you give a test? Seems good on VM for a11y testing on my end.