== 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.
| [[ https://www.figma.com/file/kOaSodWqN6dAFrLkaVWiHP/Component_TypeaheadSearch?node-id=414%3A2042 | This Figma frame]] contains the work in progress designs and specifications for this component. |
=== User stories
As a designer and developer, I need to be able to reuse a system-compliant Typeahead search component, in order to allow users to retrieve relevant information stored by our products.
=== Considerations
(Extracted from the [[ https://docs.google.com/document/d/1cfVktyQHmmIbOqpUCznplGpoJa9yl6y4FYWSKBGA3LE/edit#heading=h.2jr9xun1g334 | //TypeaheadSearch spec draft// ]])
1. The TypeaheadSearch component will follow the existing visual design and UX specification
The Codex 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
2. 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. Current Wikidata search has a “more” button that loads more results. WiKit’s Lookup component loads more on scroll. Designers from the Design system team should decide which of the two patterns to load further results is more suitable. Or define a new approach.
==== Development considerations
(Specified in the [[ https://docs.google.com/document/d/1cfVktyQHmmIbOqpUCznplGpoJa9yl6y4FYWSKBGA3LE/edit#heading=h.2jr9xun1g334 | //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 design documentation is ready