== 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/?node-id=775%3A13782 | 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 [[ 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 CodexCodex 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
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 configurablecomponent is designed and built on top of the SearchInput component and, like its "parent", but easiit presents two anatomic variants:
- A variant that only could be).ntains a single input type search
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.- 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 consider this behavior to not be core to the component.
3. TypeaheadSearch should provide language support, since results on wikidata.org may contain text in different languages (for label, description and alias).
4. 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 [[ 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
[] The component designs are implemented in code
[] TypeaheadSearch is fully tested and QA'd