SearchBox

[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

• [x] Open UI Research
  • OpenUI does not have research on SearchBox.
• [x] Open GitHub issues related to component
  • No SearchBox related issues found.
• [x] Create react-* package and component from template
  • [link to package: https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-(your-component)]
• [x] Component Spec authored and reviewed

Implementation

• [x] Component implementation
• [x] Initial conformance and unit tests (validate basic functionality)
• [x] Initial documentation
  • [x] Storybook stories
  • [x] README.md covering basic usage
  • [x] MIGRATION.md guide (include v8 and v0)
• [x] Component released as unstable from @fluentui/react-components/unstable

Validation

• [ ] Add tests
  • [x] Unit and conformance tests
  • [x] VR tests
  • [ ] Bundle size fixtures
  • [x] Performance test scenario
  • [x] Accessibility behavior tests
  • [x] Create an issue and run manual accessibility tests: #28324
• [ ] 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
  • [ ] Ensure exports are removed from 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"

[briandrouin]

Karina to provide design support.

ADO Task

[gouttierre]

📢 "In preview searchbox"

[briandrouin]

@gouttierre per Karina initial Searchbox and dropdown completed from design, but the dropdown search result component still needs to be built. We can discuss more in our 1:1 on Wednesday.

[gouttierre]

📢 "Component is in preview. Karina has finished designing the initial Searchbox and dropdown, but the dropdown search result component is yet to be built."
"The design specifications are ready, and @JustSlone will follow up with @smhigley to evaluate how easy it will be to implement the required functionality. "

[gouttierre]

📢 "Waiting on engineering to respond about the next steps cc @JustSlone"

[smhigley]

Next steps

Dropping in an outline of the next steps for a SearchBar (or name TBD) control that combines both SearchBox and a combobox-like results dropdown.

• [ ] Move SearchBox to stable -- this should be fine pending a final design review.
• [ ] Combobox migrates to a hook for managing roving activedescendant values. This would involve a fairly big refactor as part of the pickers work (the current approach would be to re-use the useCombobox hook directly), so it makes sense to wait till this is done before working on combo-search. (cc/ @ling1726).
• [ ] Final design spec review (this has already been reviewed, but should probably be looked over by whoever picks up the dev work).
  • [ ] Related: consider whether we need an abstracted layout component for the icon + text + secondary text option layout that would be reusable between Search, Combobox/Dropdown, and potentially other controls. This can also come later, and shouldn't block SearchBar.
• [ ] Build SearchBar, using the following controls:
  • SearchBox as the input/trigger - this already has all the styles, slots and layout for the collapsed state
  • Listbox + Popover as the popup
  • The new activedescendant hook
  • Although with the proposed abstracted activedescendant approach we won't need to use Combobox directly, it'll probably still make sense to look at some of the interaction from Combobox, especially around selection and open/close behavior.

I think that's everything! The bulk of the dev work should be around hooking up the SearchBox and Listbox (and potentially some combobox hooks) so roving activedescendant and selection work. The existing components should already have all the visual styles and basic functionality covered.

[gouttierre]

📢

• @smhigley I see that this is ready to go to stable after a final design review. Do you have a date in mind? I believe design is happy with the spec. What are the next steps for the engineering team? Please let us know if you need any assistance. cc @behowell , @tudorpopams, @JustSlone

[gouttierre]

📢

• This week, Karina will meet up with Sarah to discuss whether the design team can support the engineering team in any way. cc @smhigley , @JustSlone , @behowell

[gouttierre]

📢

• In preview. PR made https://github.com/microsoft/fluentui/pull/30553

• ETA for stable is E.O.M. cc @behowell , @miroslavstastny , @tudorpopams, @JustSlone

[sydsutton]

• ETA for stable is E.O.M. @gouttierre any updates on this component since this comment? Thanks.

[gouttierre]

📢

• In preview. PR in review https://github.com/microsoft/fluentui/pull/30553
• @smhigley , @tudorpopams , @behowell, @JustSlone do you have any idea on the PR status?

[gouttierre]

📢

• In stable. ✨

[sydsutton]

• In stable. ✨

@gouttierre thanks for the update! I'm slightly confused, though, why it was moved out of Preview Components when the current version of react-components (9.47.5) doesn't contain the stable SearchBox component.