feat(react-headless-components-preview): add Card component#36005
Conversation
📊 Bundle size report✅ No changes found |
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
@copilot resolve the merge conflicts in this pull request |
dmytrokirpa
force-pushed
the
feat/headless-components-preview-card
branch
from
5a84fe2 to
00770ba
Compare
|
@copilot resolve the merge conflicts in this pull request |
1 similar comment
|
@copilot resolve the merge conflicts in this pull request |
mainframev
left a comment
mainframev
left a comment
There was a problem hiding this comment.
@dmytrokirpa should we include specs for all headless components or only where there are more heavy a11y requirements & nuances like Dialog, Popover etc?
Adds a headless Card with CardHeader, CardFooter, and CardPreview subcomponents that wrap the base hooks from @fluentui/react-card. Selection works (selected, defaultSelected, onSelectionChange, auto-rendered checkbox / floatingAction slots, click and Enter toggling, disabled handling). focusMode is intentionally omitted from CardProps because tabster groupper-style Tab-trap semantics cannot be expressed with the WICG focusgroup polyfill the headless package relies on. Includes Default, Selectable, and Disabled Storybook examples.
dmytrokirpa
force-pushed
the
feat/headless-components-preview-card
branch
from
63ed479 to
d4c8b51
Compare
That's a good question. I added specs for new components such as Dialog, and we should definitely create one for Popover. For now, we can skip specs for simple wrappers around base hooks components and add them later if needed. |
2 participants
Summary
Adds a headless
CardwithCardHeader,CardFooter, andCardPreviewsubcomponents that wrap the base hooks from@fluentui/react-card.Depends on
refactor(react-card): make base hooks tabster-freeBehavior
selected/defaultSelected/onSelectionChange, the auto-renderedcheckboxslot (orfloatingAction),aria-labelledbywiring fromCardHeader, click & Enter-key toggling, anddisabledshort-circuiting.focusModeis intentionally omitted fromCardProps(Omit<CardBaseProps, 'focusMode'>). Tabster groupper-style Tab-trap semantics (limited/limited-trap-focus/unlimited) cannot be expressed with the WICGfocusgrouppolyfill the headless package relies on. Consumers can implement equivalent behavior on top of the rendered DOM if needed.Storybook examples
Default— Card composition with header, preview, body, and footer.Selectable— controlled selection driven by the auto-rendered checkbox slot.Disabled— disabled selectable card showingaria-disabledhandling and short-circuited toggling.Verification
yarn nx build react-headless-components-previewsucceeds (api.md regenerated).yarn nx run react-headless-components-preview:test --testPathPatterns Card— 16/16 pass (isConformant+ default render snapshot).