Skip to content

feat(react-link): add useLinkBase_unstable hook#35816

Open
dmytrokirpa wants to merge 4 commits intomasterfrom
feat/react-link-base-hooks
Open

feat(react-link): add useLinkBase_unstable hook#35816
dmytrokirpa wants to merge 4 commits intomasterfrom
feat/react-link-base-hooks

Conversation

@dmytrokirpa
Copy link
Contributor

@dmytrokirpa dmytrokirpa commented Mar 3, 2026

Summary

  • Adds LinkBaseProps type derived from LinkProps by omitting design prop (appearance)
  • Adds LinkBaseState type derived from LinkState by omitting design props (appearance, backgroundAppearance)
  • Adds useLinkBase_unstable hook that handles:
    • Disabled/disabledFocusable behavior: prevents click/keydown when disabled, sets aria-disabled, manages disabled attribute for button elements
    • Keyboard handling: Enter/Space key support for anchor and span elements (via useLinkState_unstable)
    • ARIA: role="link" for disabled anchors, tabIndex management
    • Element type inference: auto-selects <a> or <button> based on href prop or as prop
    • Inline text context from useLinkContext
  • Refactors useLink_unstable to call useLinkBase_unstable and spread its results, then add appearance and backgroundAppearance
  • Note: Link uses the ARIAButton-like pattern (similar to Button) where the element type is determined at runtime
  • Exports new types and hook from packages/react-components/react-link/library/src/index.ts

What base hooks do

Base hooks extract pure component logic — ARIA, keyboard handling, slot structure — WITHOUT styling, design props, or default slot implementations. This allows consumers to build custom-styled variants without taking on the full FluentUI design system.

🤖 Generated with Claude Code

dmytrokirpa and others added 2 commits March 5, 2026 11:56
Adds LinkBaseProps, LinkBaseState types and useLinkBase_unstable hook to the react-link package.
The base hook handles ARIA attributes, keyboard handling (via useLinkState_unstable), disabled/disabledFocusable
behavior, and slot structure without design-specific props (appearance, backgroundAppearance).
The styled useLink_unstable hook is refactored to call the base hook and spread its results.

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 10:57
@dmytrokirpa dmytrokirpa force-pushed the feat/react-link-base-hooks branch from e18e06e to 0873178 Compare March 5, 2026 10:57
@github-actions
Copy link

github-actions bot commented Mar 5, 2026

Pull request demo site: URL

@dmytrokirpa dmytrokirpa marked this pull request as ready for review March 20, 2026 16:15
@dmytrokirpa dmytrokirpa requested review from a team and mainframev as code owners March 20, 2026 16:15
@github-actions
Copy link

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.295 MB
323.655 kB
1.295 MB
323.63 kB
45 B
-25 B
react-link
Link
16.128 kB
6.441 kB
16.173 kB
6.457 kB
45 B
16 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-breadcrumb
@fluentui/react-breadcrumb - package
114.911 kB
31.405 kB
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-message-bar
MessageBar (all components)
23.294 kB
8.63 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 cd159227b9f5dd4d6d5b28b363971843ffac5d0d

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