💡 When you create a PR for any of the checklist items, add a link to this Epic under the PR's Related Issues section.

Preparation

• Open UI Research
  • [link to https://open-ui.org/]
• Create react-* package and component from template
  • https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-tag-picker-preview
• Component Spec authored and reviewed chore(tag-picker): adds minimal Spec.md #31000

Implementation

• Component implementation
• Initial conformance and unit tests (validate basic functionality) chore(react-tag): adds e2e tests #31004
• Initial documentation
  • Storybook stories
  • README.md covering basic usage chore(react-tag-picker): adds README file #31016
  • MIGRATION.md guide (include v8 and v0)

Validation

• Add tests
  • Unit and conformance tests chore(react-tag): adds e2e tests #31004
  • VR tests (chore(react-tag-picker): adds VR tests #31219)
  • Bundle size fixtures chore(tag-picker): adds bundle-size #31023
  • Performance test scenario
  • Accessibility behavior tests chore(react-tag): adds e2e tests #31004
  • Create an issue and run manual accessibility tests: TagPicker: Manual accessibility tests #31037
• Validate with partners
• Run a bug bash with other FUI crews
• Finalize documentation
  • Review and add any missing storybook stories
  • Finalize migration guide
• Component released as stable from @fluentui/react-components chore(react-tag-picker): release stable version #31321
  • Ensure exports are removed from @fluentui/react-components/unstable
  • In package.json: Remove the alpha/beta tag from the version number in package.json
  • In package.json: Change beachball's disallowedChangeTypes to "major", "prerelease"

Dev TODOs

• Make combobox active descendant implementation not reliant on react state
• Remove usages of ComboboxContext that overlaps with ListboxContext
• Encapsulate slot logic for combobox and extract
• Recompose listbox so it's used as a standalone component in the picker
• Recompose TagGroup so that it works with the combobox selection state
• Different input types should be possible through composition instead of entirely different control (input/button)
• Recompose option to include desired entity layout
• Override combobox behaviour that keeps multiselect variants open
• Extract styles from react-combobox and reuse + override
• Implement button variant of the picker (non-editable) #30831
• Figure out how to use the picker with useComboboxFilter
• Position expand icon correctly when scrollbar appears
• Implement option grouping (feat(react-tag-picker): adds TagPickerOptionGroup component #30934)
• Implement size prop - most likely need to update react-tags package to add size customization (feat(react-tag-picker): adds appearance and size props #30742)
• Decide on API or code sameple to align popver to editable area only
• Recompose Tag component to include defaults (i.e. always dismissble) (feat(react-tags): adds appearance and dismissible to TagGroupContext #30800)
• Address TODOs in code
• Design polish
• Implement secondary action as unstable feature (feat(react-tag-picker-preview): adds SecondaryAction #30829)
• Ensures disabled state works properly between all controllers (feat(react-tag-picker-preview): adds disabled state #30822)
• add freeform support chore(react-combobox): move freeform and disabled to ComboboxBase types #30947