Page MenuHomePhabricator

Add TypeaheadSearch to Codex
Open, In Progress, HighPublic

Description

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)

  1. 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
  1. 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).

  1. TypeaheadSearch should provide language support, since results on wikidata.org may contain text in different languages (for label, description and alias).
  1. 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

Related Objects

StatusSubtypeAssignedTask
DuplicateNone
In ProgressSarai-WMDE
ResolvedDAbad
DeclinedNone
ResolvedBUG REPORTAnneT
In ProgressEUdoh-WMF
ResolvedSarai-WMDE
ResolvedDAbad
ResolvedEUdoh-WMF
ResolvedAnneT
ResolvedDAbad
ResolvedDAbad
ResolvedDAbad
ResolvedStevenSun
ResolvedCatrope
In ProgressJdlrobson
In Progressmmartorana
ResolvedSarai-WMDE
ResolvedSarai-WMDE
ResolvedAnneT
StalledCatrope
ResolvedBUG REPORTSimoneThisDot
ResolvedBUG REPORTAnneT
In ProgressNone
In ProgressDAbad
In ProgressDAbad
In ProgressDAbad
ResolvedDAbad
ResolvedAnneT
Resolvedegardner
In ProgressDAbad
OpenEUdoh-WMF

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Volker_E updated the task description. (Show Details)
STH reopened this task as In Progress.Apr 25 2022, 5:02 PM
STH renamed this task from Design TypeaheadSearch component for Codex to Add TypeaheadSearch to Codex.Apr 25 2022, 5:27 PM
STH updated the task description. (Show Details)
STH added a subscriber: STH.

Next Steps:

  • Validate what is in the figma file and if it is acceptable to readers web
  • confirm how we will do QA with Web team