Skip to content

feat(react-card): add useCardBase_unstable hook#35824

Draft
dmytrokirpa wants to merge 5 commits intomasterfrom
feat/react-card-base-hooks
Draft

feat(react-card): add useCardBase_unstable hook#35824
dmytrokirpa wants to merge 5 commits intomasterfrom
feat/react-card-base-hooks

Conversation

@dmytrokirpa
Copy link
Contributor

Summary

This PR adds base state hooks for all Card components as part of the experimental base hooks initiative.

What was implemented

  • useCardBase_unstable — base hook for Card component

    • Props type: CardBaseProps (omits appearance, orientation, size)
    • State type: CardBaseState (omits appearance, orientation, size)
    • Handles: focus mode/interactivity detection (onClick/onMouseDown etc.), selection (controlled/uncontrolled via useCardSelectable), focus management (useFocusWithin, useFocusableGroup), ARIA disabled, slot structure
  • useCardFooterBase_unstable — base hook for CardFooter component

    • Props type: CardFooterBaseProps (same as CardFooterProps — no design props)
    • State type: CardFooterBaseState (same as CardFooterState — no design props)
    • Handles: slot structure (root, action)
  • useCardHeaderBase_unstable — base hook for CardHeader component

    • Props type: CardHeaderBaseProps (same as CardHeaderProps — no design props)
    • State type: CardHeaderBaseState (same as CardHeaderState — no design props)
    • Handles: slot structure, card selectable accessibility (referenceId management for ARIA)
  • useCardPreviewBase_unstable — base hook for CardPreview component

    • Props type: CardPreviewBaseProps (same as CardPreviewProps — no design props)
    • State type: CardPreviewBaseState (same as CardPreviewState — no design props)
    • Handles: slot structure, card selectable label extraction from img elements

Refactoring

  • useCard_unstable now calls useCardBase_unstable and adds appearance, orientation, size
  • useCardFooter_unstable, useCardHeader_unstable, useCardPreview_unstable delegate to their base counterparts

Exports

All new types and hooks are exported from the package index.ts. They are NOT exported from @fluentui/react-components.

Test plan

  • TypeScript compilation passes (npx tsc --noEmit on the package)
  • Existing Card, CardFooter, CardHeader, CardPreview rendering unchanged
  • Card selection and focus behavior works correctly

🤖 Generated with Claude Code

@github-actions
Copy link

github-actions bot commented Mar 3, 2026

Pull request demo site: URL

dmytrokirpa and others added 2 commits March 5, 2026 12:08
…er, and CardPreview

Implements base state hooks for all Card components as part of the experimental base hooks initiative.
Each base hook extracts pure component logic while omitting design props.

- CardBaseProps/CardBaseState: omits appearance, orientation, size
  useCardBase_unstable: handles focusMode, interactivity detection, selection (controlled/uncontrolled),
  focus management (useFocusWithin, useFocusableGroup), ARIA disabled, slot structure

- CardFooterBaseProps/CardFooterBaseState: same as CardFooterProps/State (no design props)
  useCardFooterBase_unstable: handles slot structure (root, action)

- CardHeaderBaseProps/CardHeaderBaseState: same as CardHeaderProps/State (no design props)
  useCardHeaderBase_unstable: handles slot structure, card selectable accessibility (referenceId management)

- CardPreviewBaseProps/CardPreviewBaseState: same as CardPreviewProps/State (no design props)
  useCardPreviewBase_unstable: handles slot structure, card selectable label extraction from img elements

All styled hooks now delegate to their base counterparts.
All new types and hooks exported from package index.ts.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@dmytrokirpa dmytrokirpa changed the base branch from experimental/component-base-hooks to master March 5, 2026 11:09
@dmytrokirpa dmytrokirpa force-pushed the feat/react-card-base-hooks branch from f62e3fa to be7f222 Compare March 5, 2026 11:09
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link

github-actions bot commented Mar 5, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-card
Card - All
105.131 kB
29.449 kB
105.222 kB
29.475 kB
91 B
26 B
react-card
Card
97.799 kB
27.572 kB
97.84 kB
27.583 kB
41 B
11 B
react-card
CardFooter
12.756 kB
5.109 kB
12.774 kB
5.117 kB
18 B
8 B
react-card
CardHeader
15.289 kB
5.972 kB
15.303 kB
5.976 kB
14 B
4 B
react-card
CardPreview
12.84 kB
5.248 kB
12.854 kB
5.252 kB
14 B
4 B
react-components
react-components: entire library
1.295 MB
323.683 kB
1.295 MB
323.676 kB
99 B
-7 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
70.397 kB
19.96 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.62 kB
68.716 kB
react-components
react-components: FluentProvider & webLightTheme
43.612 kB
14.022 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-timepicker-compat
TimePicker
108.174 kB
35.695 kB
🤖 This report was generated against d2c1f77fbc11c569f7d3f734b9575d944d1974c7

dmytrokirpa and others added 2 commits March 5, 2026 13:33
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant