TagPicker

[paulgildea]

💡 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

[pradeept95]

Can we have implementation of this component accelerated in V9 please. This is the one major component, and because of it we are not able to completely move to V9. We have both V8 and V9 dependencies on our projects and PeoplePicler is the one major component which is stopping us to get rid of V8 dependencies in our projects.