Skip to content

feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts#36228

Open
mainframev wants to merge 3 commits into
masterfrom
feat/headless-tag-1-refactor
Open

feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts#36228
mainframev wants to merge 3 commits into
masterfrom
feat/headless-tag-1-refactor

Conversation

@mainframev
Copy link
Copy Markdown
Contributor

@mainframev mainframev commented May 19, 2026

Stack

This PR is part of a 3-PR stack. Review and merge bottom-up:

  1. 👉 feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts #36228 — feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts (base: master)merge first
  2. test(react-tags): add hook regression tests for Tag family #36229 — test(react-tags): add hook regression tests for Tag family (base: feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts #36228) — depends on feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts #36228
  3. feat(react-headless-components-preview): add Tag family #36230 — feat(react-headless-components-preview): add Tag family (base: test(react-tags): add hook regression tests for Tag family #36229) — merge last; depends on test(react-tags): add hook regression tests for Tag family #36229

Summary

  • Decouples useTagGroupBase_unstable from @fluentui/react-tabster and @fluentui/react-shared-contexts. Arrow-key navigation and post-dismiss focus restoration are now pluggable via a new optional UseTagGroupBaseOptions argument (arrowNavigationProps, onAfterTagDismiss), mirroring the useMenuTriggerBase_unstable pattern. The styled useTagGroup_unstable keeps full behaviour by supplying Tabster-backed implementations through that options bag.
  • Adds package-entry exports for the Tag contexts so headless consumers can produce context values readable by the canonical base hooks: TagGroupContextProvider / useTagGroupContext_unstable, InteractionTagContextProvider / useInteractionTagContext_unstable, and the TagGroupContextValue / InteractionTagContextValue types. Also re-exports the previously-missing TagContextValues type.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 19, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.293 MB
324.827 kB
1.293 MB
324.888 kB
152 B
61 B
react-tag-picker
@fluentui/react-tag-picker - package
173.699 kB
54.066 kB
173.85 kB
54.135 kB
151 B
69 B
react-tags
TagGroup
69.722 kB
21.383 kB
69.871 kB
21.442 kB
149 B
59 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
66.328 kB
19.02 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
226.773 kB
68.079 kB
react-components
react-components: FluentProvider & webLightTheme
39.525 kB
13.113 kB
react-headless-components-preview
react-headless-components-preview: entire library
157.13 kB
46.022 kB
react-portal-compat
PortalCompatProvider
5.567 kB
2.237 kB
react-tags
InteractionTag
12.464 kB
4.95 kB
react-tags
Tag
28.389 kB
8.911 kB
react-timepicker-compat
TimePicker
104.461 kB
34.894 kB
🤖 This report was generated against 9204ee11f390cea11b6c0d35213a7a9a01f05856

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

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

@github-actions github-actions Bot May 19, 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/CalendarCompat 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 1204 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 481 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png 481 Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 1089 Changed
vr-tests-react-components/Charts-DonutChart 1 screenshots
Image Name Diff(in Pixels) Image Type
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 609 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 509 Changed
vr-tests-react-components/ProgressBar converged 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 42 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 36 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 54 Changed
vr-tests-react-components/TagPicker 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed

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

@mainframev mainframev force-pushed the feat/headless-tag-1-refactor branch from 99f8a77 to 24a9f85 Compare May 19, 2026 22:24
@mainframev mainframev marked this pull request as ready for review May 20, 2026 01:25
@mainframev mainframev requested review from a team and ValentinaKozlova as code owners May 20, 2026 01:25
@mainframev mainframev force-pushed the feat/headless-tag-1-refactor branch from 24a9f85 to 4af8734 Compare May 20, 2026 02:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant