calcite-design-system icon indicating copy to clipboard operation
calcite-design-system copied to clipboard

feat(card-group): Add Card Group component

Open macandcheese opened this issue 2 years ago • 1 comments

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 selectionMode paradigm from other components with values of multiple, single, single-persist, none (default).
  • Has a readOnly selectedItems property and calciteCardGroupSelect event.
  • 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 selectable from Card (direct replacement is a parent Card Group selectionMode: multiple)
  • Deprecates title, subtitle slots and adds heading and description to align with naming convention.
  • The calciteCardSelect event remains and will continue to work post-removal of selectable in a future breaking change release.
  • Adds deselect translated message.
  • Styling / alignment updates.

Todo:

  • Update css to use the updated token refactor from 7180 to prevent merge conflicts
  • Card stretch / wrap improvements

macandcheese avatar Feb 14 '24 18:02 macandcheese

Looks g2g from the design end! ✨

SkyeSeitz avatar Feb 22 '24 00:02 SkyeSeitz

Confirmed low-risk as it makes minor updates to card.

jcfranco avatar Feb 23 '24 19:02 jcfranco

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. 🤔❓

jcfranco avatar Feb 23 '24 19:02 jcfranco

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.

driskull avatar Feb 23 '24 20:02 driskull

Might be nice to beef up our conventions to talk about usage guidelines for the following as well:

  • requestAnimationFrame
  • componentOnReady
  • forceUpdate
  • readTask
  • writeTask

driskull avatar Feb 23 '24 20:02 driskull

@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.

macandcheese avatar Feb 27 '24 09:02 macandcheese