feat(react-headless-components-preview): add TagPicker#36285
Open
mainframev wants to merge 10 commits into
Open
feat(react-headless-components-preview): add TagPicker#36285mainframev wants to merge 10 commits into
mainframev wants to merge 10 commits into
Conversation
mainframev
force-pushed
the
feat/create-headless-tag-picker
branch
from
June 4, 2026 12:23
d818805 to
91c0f8c
Compare
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
mainframev
force-pushed
the
feat/create-headless-tag-picker
branch
4 times, most recently
from
June 4, 2026 21:03
85e4ed8 to
c78d12c
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new headless TagPicker surface to @fluentui/react-headless-components-preview, along with Storybook examples and API/package wiring so consumers can compose TagPicker behavior without bundled styles.
Changes:
- Introduces the headless TagPicker root + subcomponents (Control/Input/Button/Group/List/Option/OptionGroup) and re-exports the relevant base utilities (
useTagPickerFilter,useTagPickerContext_unstable). - Adds a full Storybook story set (default, filtering, grouping, single-select, no-popover, truncation, secondary action) and shared CSS-module styling/helpers.
- Updates package exports, dependencies, API report, bundle-size fixture, and adds a beachball change file.
Reviewed changes
Copilot reviewed 53 out of 53 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/utils.tsx | Shared story helpers (initials/media, option/tag render helpers). |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/TagPickerDefault.stories.tsx | Baseline multiselect TagPicker story. |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/TagPickerFiltering.stories.tsx | Filtering story using useTagPickerFilter. |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/TagPickerGrouped.stories.tsx | Grouped options story using TagPickerOptionGroup. |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/TagPickerSingleSelect.stories.tsx | Single-select pattern story (external state control). |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/TagPickerSecondaryAction.stories.tsx | Story demonstrating secondaryAction slot on the control. |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/TagPickerTruncatedText.stories.tsx | Story demonstrating CSS-driven truncation. |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/TagPickerNoPopover.stories.tsx | Story demonstrating noPopover + free-text entry. |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/TagPickerDescription.md | Component docs page content for the TagPicker story set. |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/tag-picker.module.css | CSS module used by TagPicker stories (control/list/tag/option styling). |
| packages/react-components/react-headless-components-preview/stories/src/TagPicker/index.stories.tsx | Storybook index/metadata + exports for the TagPicker story group. |
| packages/react-components/react-headless-components-preview/library/src/tag-picker.ts | Public subpath entry point re-exporting headless TagPicker API. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/index.ts | Barrel exports for TagPicker and subcomponents. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPicker.types.ts | Headless TagPicker prop/type shaping (omits styled-only props). |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPicker.tsx | Headless TagPicker root component wiring state + context + render. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/useTagPicker.ts | Headless TagPicker state composition (base hook + positioning refs). |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/useTagPickerContextValues.ts | TagPicker context value assembly for subcomponents. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/renderTagPicker.tsx | Re-export of base renderTagPicker_unstable as renderTagPicker. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerControl/TagPickerControl.tsx | Headless control component wrapper. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerControl/useTagPickerControl.ts | Control state wrapper adding data-* flags. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerControl/renderTagPickerControl.tsx | Control renderer re-export wrapper. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerControl/TagPickerControl.types.ts | Control state typing incl. internal slots and data-* flags. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerControl/index.ts | Control barrel exports. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerInput/TagPickerInput.tsx | Headless input component wrapper. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerInput/useTagPickerInput.ts | Input state wrapper + ArrowLeft/Backspace focus behavior. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerInput/renderTagPickerInput.tsx | Input renderer re-export wrapper. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerInput/TagPickerInput.types.ts | Input state typing incl. data-disabled. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerInput/index.ts | Input barrel exports. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerButton/TagPickerButton.tsx | Headless button trigger component wrapper. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerButton/useTagPickerButton.ts | Button trigger wrapper adding data-disabled. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerButton/renderTagPickerButton.tsx | Button renderer implementation using slots. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerButton/TagPickerButton.types.ts | Button trigger state typing incl. data-disabled. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerButton/index.ts | Button trigger barrel exports. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerGroup/TagPickerGroup.tsx | Headless selected-tags group wrapper (adds TagGroup context). |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerGroup/useTagPickerGroup.ts | Group state wrapper (dismiss wiring + focusgroup attribute + data-*). |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerGroup/renderTagPickerGroup.tsx | Group renderer re-export wrapper. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerGroup/TagPickerGroup.types.ts | Group state typing incl. focusgroup + data-disabled. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerGroup/index.ts | Group barrel exports. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerList/TagPickerList.tsx | Headless list/popover wrapper. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerList/useTagPickerList.ts | List state wrapper (Listbox slot + refs + id/role wiring). |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerList/renderTagPickerList.tsx | List renderer implementation using slots. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerList/TagPickerList.types.ts | List props/state typing. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerList/index.ts | List barrel exports. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerOption/TagPickerOption.tsx | Headless option component wrapper. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerOption/useTagPickerOption.ts | Option wrapper adding option-class marker + media/secondary slots. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerOption/renderTagPickerOption.tsx | Option renderer (media + content + secondary). |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerOption/TagPickerOption.types.ts | Option props/state typing for extra slots. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPickerOption/index.ts | Option barrel exports. |
| packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPicker.test.tsx | Unit coverage for core rendering/roles/classes/focusgroup/disabled behavior. |
| packages/react-components/react-headless-components-preview/library/package.json | Adds dependency on @fluentui/react-tag-picker and exports ./tag-picker. |
| packages/react-components/react-headless-components-preview/library/etc/tag-picker.api.md | API Extractor report for the new TagPicker subpath. |
| packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js | Ensures TagPicker is included in bundle-size checks. |
| change/@fluentui-react-headless-components-preview-7694d78b-9ac6-40a0-8490-31128315e61a.json | Beachball change file for publishing the new headless TagPicker surface. |
dmytrokirpa
reviewed
Jun 22, 2026
dmytrokirpa
left a comment
dmytrokirpa
left a comment
Contributor
There was a problem hiding this comment.
left some comments, we also need to add some e2e tests
… comments - TagPicker: drop the no-op forwardRef (the component has no DOM root of its own) and render as a plain function returning JSXElement, matching the package's Popover pattern. - Document why the Button/List/Option render fns stay local instead of re-exporting the base render fns (state shape differs). - Document the targetRef/popoverRef cast (callback ref vs object ref bridge).
mainframev
force-pushed
the
feat/create-headless-tag-picker
branch
from
July 22, 2026 13:23
dc3cd50 to
9586d19
Compare
mainframev
force-pushed
the
feat/create-headless-tag-picker
branch
2 times, most recently
from
July 22, 2026 14:11
03a2dfb to
a603b0a
Compare
mainframev
force-pushed
the
feat/create-headless-tag-picker
branch
from
July 22, 2026 14:11
a603b0a to
e84a120
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
mainframev
force-pushed
the
feat/create-headless-tag-picker
branch
from
July 22, 2026 15:12
e84a120 to
a658271
Compare
mainframev
force-pushed
the
feat/create-headless-tag-picker
branch
from
July 22, 2026 15:44
a658271 to
1356cdd
Compare
mainframev
force-pushed
the
feat/create-headless-tag-picker
branch
from
July 23, 2026 16:58
a993db1 to
333796e
Compare
mainframev
force-pushed
the
feat/create-headless-tag-picker
branch
from
July 24, 2026 12:27
333796e to
9abcbf2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a headless TagPicker to @fluentui/react-headless-components-preview - a composite, style-free picker that lets users select tags from a filterable list of options
useTagPickerButtonBase_unstable, useTagPickerContext_unstable (from @fluentui/react-tag-picker), useTagGroupBase_unstable (@fluentui/react-tags), and the headless
Dropdown's useOption/useListboxSlot (over @fluentui/react-combobox).
v9.