Skip to content

feat(react-headless-components-preview): add Tag family#36230

Open
mainframev wants to merge 9 commits into
feat/headless-tag-2-regression-testsfrom
feat/headless-tag-3-impl
Open

feat(react-headless-components-preview): add Tag family#36230
mainframev wants to merge 9 commits into
feat/headless-tag-2-regression-testsfrom
feat/headless-tag-3-impl

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

Adds five headless Tag-family components to @fluentui/react-headless-components-preview, delegating all behaviour to the canonical base hooks in @fluentui/react-tags:

  • Tag (./tag)
  • TagGroup (./tag-group)
  • InteractionTag (./interaction-tag)
  • InteractionTagPrimary (./interaction-tag-primary)
  • InteractionTagSecondary (./interaction-tag-secondary)

What the headless flavour strips:

  • IconsInteractionTagSecondary no longer injects a default DismissRegular; consumers pass children.
  • Tabster — the headless useTagGroup omits the new arrowNavigationProps / onAfterTagDismiss options (introduced in feat(react-tags): decouple useTagGroupBase_unstable from Tabster + export contexts #36228), so the group renders without data-tabster and without post-dismiss focus restoration. Consumers wire those up themselves.
  • Styles — no Griffel; the root slot exposes data-disabled / data-dismissible / data-selected / data-has-secondary-action attributes for downstream styling.
  • floating-ui — not used here.

Each component follows the standard surface (Component, useComponent, renderComponent, types) with context-value helpers where the canonical renderer requires them. Stories live under stories/src/Tag, stories/src/TagGroup, stories/src/InteractionTag, with a local CSS module per family demonstrating styling via the data-* attributes.

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@mainframev mainframev force-pushed the feat/headless-tag-2-regression-tests branch from 9a05d90 to 36292c8 Compare May 19, 2026 14:58
@mainframev mainframev self-assigned this May 19, 2026
@mainframev mainframev force-pushed the feat/headless-tag-3-impl branch from f087756 to fcf27c5 Compare May 19, 2026 22:18
@mainframev mainframev force-pushed the feat/headless-tag-2-regression-tests branch from 36292c8 to f368d08 Compare May 19, 2026 22:24
@mainframev mainframev force-pushed the feat/headless-tag-3-impl branch 3 times, most recently from bac8400 to 961aca1 Compare May 20, 2026 01:07
@mainframev mainframev marked this pull request as ready for review May 20, 2026 01:10
@mainframev mainframev requested a review from a team as a code owner May 20, 2026 01:10
@mainframev mainframev force-pushed the feat/headless-tag-2-regression-tests branch from 77859e1 to 495dfb9 Compare May 20, 2026 01:36
@mainframev mainframev requested review from a team and ValentinaKozlova as code owners May 20, 2026 01:36
@mainframev mainframev force-pushed the feat/headless-tag-2-regression-tests branch 2 times, most recently from 1d660cc to 14b9a10 Compare May 20, 2026 02:04
mainframev and others added 9 commits May 20, 2026 04:16
…nTag, InteractionTagPrimary, InteractionTagSecondary, TagGroup
…e from Tag-family hooks

React Compiler config in the fluentui repo has been updated so the opt-out
directive is no longer needed for hooks that mutate their returned state
(e.g. setting data-* attributes on state.root). Removes the directive from
useTag, useInteractionTag, useInteractionTagPrimary, useInteractionTagSecondary,
and useTagGroup.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@mainframev mainframev force-pushed the feat/headless-tag-3-impl branch from 961aca1 to 7681b40 Compare May 20, 2026 02:17
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