Background/Goal
The TypeaheadSearch component needs to be migrated from WVUI to Codex so WVUI can be deprecated in favor of Codex as soon as possible. At the same time, updates to TypeaheadSearch are needed to enable its functionality on wikidata.org. The Wikimedia Deutschland and WMF Design Systems teams plan to collaborate on completing both of these tasks simultaneously, with feedback from the builders of the WVUI TypeaheadSearch component, the WMF Reading Web team.
| This Figma frame contains the designs and specifications for this component. |
User stories
As a designer and developer, I need to be able to reuse a system-compliant TypeaheadSearch component, in order to allow users to retrieve relevant information stored by our products.
Considerations
(Extracted from the TypeaheadSearch spec draft)
- The Codex TypeaheadSearch component should follow the existing design specification, except where that specification is updated as part of this new work. This includes:
- General UX for searching, viewing autocomplete suggestions, and selecting a suggestion
- Styles, including special styles for each state
- Keyboard navigation support
- The TypeaheadSearch component is designed and built on top of the SearchInput component and, like its "parent", it presents two anatomic variants:
- A variant that only contains a single input type search
- A variant that also includes a 'Search' button besides the input
The current released version of the TahS component displays its search button when users hover on the element. We initially considered this behavior to not be core to the component, but we might need to reflect on this further (See T307203).
- TypeaheadSearch should provide language support, since results on wikidata.org may contain text in different languages (for label, description and alias).
- The TypeaheadSearch allows users to load more results. The WVUI TypeaheadSearch component limits the number of results to 10 (this limit is not currently configurable, but easily could be). On Wikidata, only item names and aliases are included in the search. User often need to scroll or load more items, since refining their query is not possible.
Development considerations
(Specified in the //TypeaheadSearch spec draft//)
Acceptance criteria (or Done)
- All the interactive states and behavior of the TypeaheadSearch (based on the current visual design) are documented.
- All the visual properties of the TypeaheadSearch, of each one of its states, are fully specified using design system tokens (even if said tokens might not be ready to be used to style the component yet)
- Keyboard navigation support (based on current behaviour, with potential additions to accommodate the loading of further results) is specified
- The component designs are implemented in code
- TypeaheadSearch is fully tested and QA'd
Release timeline
- Monday, July 18
- Go/no-go meeting
- Tuesday, July 19
- Merge patch to test in betalabs
- Tuesday, July 19 through Monday, July 25
- Test in betalabs and make fixes
- Tuesday, July 26 through Thursday, July 28
- TypeaheadSearch rides the deployment train; in production on July 28