Card Convergence

[andrefcdias]

Preparation:

• Started prep
• Open UI Research complete
  • Adding research page for the Card component openui/open-ui#134
  • https://open-ui.org/components/card.research
• Comparison on v8 and v0 complete
• Gather open GitHub issues related to component
  • v8
    • DocumentCard has dual border outlines when hovered #19131
    • DocumentCard: parent container is no longer focusable and now has role=group to improve a11y experience #17806
    • DocumentCard has nested interactive items, structure, and very long link/button names #17718
    • DocumentCard with multiple items, commands, and views: HTML doesn't parse #11635
    • Add IIconProps property to IDocumentCardPreviewImage interface #5315
  • v0
    • Card component in northstar is styled with height:100%  #17952
  • vNext
    • react-card: Top padding not removed for CardPreview when used as a first child of a Card #21649
• react-* package scaffolded
  • react-card: Move ownership to cxe-prg team #19340
  • react-card: Scaffolding #19338
  • https://github.com/microsoft/fluentui/tree/master/packages/react-card
• Component Spec authored and reviewed
  • react-card: Spec #19410
  • https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-card/Spec.md
• Deliverable: Reviewed component spec

Implementation

https://github.com/microsoft/fluentui/tree/master/packages/react-card

• Started impl
• Implement component
  • react-card - Phase 1 #19646
  • react-card - CardPreview top padding fix #20030
  • react-card - Phase 2 #20132
  • fix(react-card): top padding not removed for CardPreview #21685
  • feat(react-card): add appearance prop implementation #21264
  • feat(react-card): add focusMode prop #22312
  • feat(react-card): add size prop #22915
  • feat(react-card): add orientation prop #23037
  • feat(react-card): add new selectable feature #24486
  • chore(react-card): add basic API documentation #23410
  • fix(react-card): refactor CardHeader to use grid display #23449
  • feat: extend CardPreview logo slot to allow img elements #23902
• Add storybook stories
  • react-card - Move story into stories folder #20051
  • chore(react-card): stories cleanup #22451
  • chore(react-card): add design templates to stories #23841
• Using hooks
• Using makeStyles
• Respects Figma tokens (and using provider)
• Respects API principles, shorthands and slots handling
• No dependency on v0/v7
• Add tests - Conformance, Unit, and VR
  • Bundle size fixtures
    • react-card - Bundle size fixtures #20029
  • Conformance tests
  • Unit tests
  • VR tests
    • Prop tests
    • Design templates added
  • Accessibility behavior tests
• Pending resolution
  • Card header - text formatting #21909
• Write README.md covering basic usage
  • docs(react-card): add information to README file #23888
• Write MIGRATION guide (include v8 and v0)
  • docs(Card): V0 migration guide #23981
  • docs(Card): V8 migration guide #24020
• Set component ownership in CODEOWNERS
• Deliverable: Experimental component ready for partner use, component re-exported in react-components

Validation

• Started validating
• Add and validate in UI Builder
• Add and validate in docs site
• Validate with token pipeline
• Validate in product
• Finalize migration guide
  • Author codemods
• Deliverable: Preview component ready for broader/3rd party use

[andrefcdias]

Tracking: #21649