Skip to content

feat(react-persona): add usePersonaBase_unstable hook#35814

Draft
dmytrokirpa wants to merge 2 commits intomasterfrom
feat/react-persona-base-hooks
Draft

feat(react-persona): add usePersonaBase_unstable hook#35814
dmytrokirpa wants to merge 2 commits intomasterfrom
feat/react-persona-base-hooks

Conversation

@dmytrokirpa
Copy link
Contributor

Summary

  • Enables usePersonaBase_unstable hook that was already implemented in usePersona.ts but gated behind a comment in index.ts
  • Exports PersonaBaseProps and PersonaBaseState types from the package index.ts
  • The base hook manages text slot structure (primaryText, secondaryText, tertiaryText, quaternaryText) and numTextLines count without design props
  • usePersona_unstable delegates to usePersonaBase_unstable and adds size, textPosition, textAlignment, avatar, and presence slots

Design props excluded from base hook

Prop Description
size Visual size of the Persona
textPosition Position of text relative to avatar
textAlignment Vertical alignment of text
avatar slot Avatar component (Avatar type)
presence slot PresenceBadge component

PersonaBaseProps is ComponentProps<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaProps, 'name'>, keeping text slots and the name prop.

Test plan

  • TypeScript compiles without errors (npx tsc -p packages/react-components/react-persona/library/tsconfig.json --noEmit)
  • usePersonaBase_unstable and base types are exported from the package index
  • Existing Persona rendering is unchanged

🤖 Generated with Claude Code

dmytrokirpa and others added 2 commits March 5, 2026 11:54
Enables the already-implemented usePersonaBase_unstable hook and PersonaBaseProps/
PersonaBaseState types by uncommenting and properly exporting them from the package
index. The hook manages text slot structure (primaryText, secondaryText, etc.) without
design props (size, textPosition, textAlignment, avatar, presence slots).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@dmytrokirpa dmytrokirpa force-pushed the feat/react-persona-base-hooks branch from a221d3e to a28c912 Compare March 5, 2026 10:55
@dmytrokirpa dmytrokirpa changed the base branch from experimental/component-base-hooks to master March 5, 2026 10:55
@github-actions github-actions bot removed the CI label Mar 5, 2026
@github-actions
Copy link

github-actions bot commented Mar 5, 2026

Pull request demo site: URL

@@ -0,0 +1,7 @@
{
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/CalendarCompat 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 1107 Changed
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 1236 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 403 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png 495 Changed
vr-tests-react-components/Charts-DonutChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 5581 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 7530 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 611 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 196 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 658 Changed
vr-tests-react-components/TagPicker.disabled - RTL.chromium.png 635 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1319 Changed

There were 4 duplicate changes discarded. Check the build logs for more information.

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