Skip to content

feat(react-tags): add base hooks for Tags components#35912

Open
dmytrokirpa wants to merge 3 commits intomicrosoft:masterfrom
dmytrokirpa:feat/react-tags-base-hooks
Open

feat(react-tags): add base hooks for Tags components#35912
dmytrokirpa wants to merge 3 commits intomicrosoft:masterfrom
dmytrokirpa:feat/react-tags-base-hooks

Conversation

@dmytrokirpa
Copy link
Copy Markdown
Contributor

Summary

  • Adds useTagBase_unstable / TagBaseProps / TagBaseState for Tag
  • Adds useTagGroupBase_unstable / TagGroupBaseProps / TagGroupBaseState for TagGroup
  • Adds useInteractionTagBase_unstable / InteractionTagBaseProps / InteractionTagBaseState for InteractionTag
  • Adds useInteractionTagPrimaryBase_unstable / InteractionTagPrimaryBaseProps / InteractionTagPrimaryBaseState for InteractionTagPrimary
  • Adds useInteractionTagSecondaryBase_unstable / InteractionTagSecondaryBaseProps / InteractionTagSecondaryBaseState for InteractionTagSecondary
  • All design props (appearance, size, shape, avatarShape, avatarSize) are omitted from base hooks
  • Behavioral/structural props (disabled, dismissible, selected, role, ARIA, keyboard handling) are retained
  • All existing hooks refactored to compose from their base counterpart
  • All new hooks and types exported from @fluentui/react-tags

Test plan

  • Build passes: yarn nx build react-tags
  • Lint passes: yarn nx lint react-tags
  • All 104 tests pass: yarn nx test react-tags

🤖 Generated with Claude Code

…nteractionTagPrimary, InteractionTagSecondary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 26, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.297 MB
324.042 kB
1.297 MB
324.187 kB
346 B
145 B
react-tag-picker
@fluentui/react-tag-picker - package
186.596 kB
55.849 kB
186.636 kB
55.858 kB
40 B
9 B
react-tags
InteractionTag
13.666 kB
5.459 kB
13.724 kB
5.47 kB
58 B
11 B
react-tags
Tag
29.521 kB
9.389 kB
29.648 kB
9.429 kB
127 B
40 B
react-tags
TagGroup
82.211 kB
24.143 kB
82.247 kB
24.152 kB
36 B
9 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.663 kB
68.729 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 ca8968af85531cc12b0371680a0de44e884dfae0

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

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

@github-actions github-actions bot Mar 26, 2026

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/Card Converged - Disabled 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Card Converged - Disabled.appearance disabled + interactive - Dark Mode.hover.chromium.png 3330 Changed
vr-tests-react-components/Card Converged - Disabled.appearance disabled + selectable.hover.chromium.png 12549 Changed
vr-tests-react-components/Card Converged - Disabled.appearance disabled + interactive - High Contrast.normal.chromium.png 5610 Changed
vr-tests-react-components/Charts-DonutChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png 5570 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 5581 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 23 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 16 Changed
vr-tests-react-components/ProgressBar converged 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 66 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 41 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 51 Changed
vr-tests-react-components/TagPicker 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png 1319 Changed
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed

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

@dmytrokirpa dmytrokirpa self-assigned this Mar 29, 2026
@dmytrokirpa dmytrokirpa marked this pull request as ready for review March 29, 2026 17:18
@dmytrokirpa dmytrokirpa requested review from a team and ValentinaKozlova as code owners March 29, 2026 17:18
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