Page MenuHomePhabricator

Lower the maintenance costs of TypeaheadSearch in Vector
Open, Stalled, HighPublic



The implementation of TypeaheadSearch in the header in Vector includes a server-rendered search input that is swapped out for the Vue (Codex) version once it loads on click. To ensure a smooth transition, the server-rendered version must be styled to match the Vue version. Since there isn't a no-JS version of Codex components, and Codex design tokens haven't been available in MediaWiki, many styles and tokens are manually copied from Codex into Vector.

This has caused issues as CdxTypeaheadSearch, its subcomponents, and Codex design tokens have continued to be updated in Codex. Each time a new version of Codex is released and added to core, styles and Less variables in Vector must be checked and sometimes updated to prevent regressions.

Although instances of these disruptions should go down as Codex becomes more stable (e.g. as design tokens are finalized), they may still occur occasionally. Because the search bar is so highly visible (at the top of the page on any wiki when using the Vector 2022 skin), we need to find a sustainable way to prevent regressions.



  • Keep all Codex styles in Codex, not duplicated in Vector
  • Make it easy to use Codex styles/tokens on the server-rendered UI in Vector

Plan overview

  1. Provide a CSS-only TypeaheadSearch component, which will enable us to add CSS classes to the template of the server-rendered search box that will apply CdxTypeaheadSearch styles. There should be no visual differences (other than the search button appearing) when the Vue app loads and takes over. Once this is done, we will remove all styles in Vector that are no longer needed.
  2. Provide all necessary design tokens for use in Vector, to apply to search-box-related components. This will require creating an inventory of the necessary tokens, then ensuring that any tokens that are still in Codex component SFCs are upstreamed as design tokens (see T295711). Once this is done, we will remove all duplicate Less variables in Vector.
  3. Potential follow-up: Add options in CdxTypeaheadSearch to make the markup more closely match that of the server-rendered search box
  4. Potential follow-up: use design tokens or CSS-only components to style the search box that is rendered server-side when JS is disabled. This would be a design change, since for that search box, the search icon button is on the right.

Order of operations

  • DST provides a CSS-only TypeaheadSearch component, with documentation on its use
  • DST provides all necessary design tokens
  • DST and Web work together to implement CSS-only TypeheadSearch and design tokens in Vector, removing styles and variables that are no longer needed
  • DST and/or Web consider adding options to CdxTypeaheadSearch to enable different markup options
  • Web considers updating the no-JS search box to more closely match the other versions

Acceptance criteria

  • CSS-only TypeaheadSearch component is built and documented
  • All necessary design tokens are available in the @wikimedia/codex-design-tokens package
  • CSS-only TypeaheadSearch and design tokens are implemented in Vector, with duplicated styles and vars removed

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
AnneT renamed this task from Share TypeaheadSearch-related styles via Less mixins to Lower the maintenance costs of TypeaheadSearch inVector.Jan 19 2023, 11:48 PM
AnneT updated the task description. (Show Details)
AnneT added a subscriber: ldelench_wmf.
ldelench_wmf moved this task from Requests to Needs Refinement on the Design-Systems-Team board.

Change 885895 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] [proof of concept] Demo CSS-only TypeaheadSearch

AnneT changed the task status from Open to In Progress.Feb 15 2023, 5:22 PM
AnneT claimed this task.
AnneT updated the task description. (Show Details)
AnneT added a subscriber: Volker_E.

Tagging @Volker_E, since completing the transformation of TypeaheadSearch SFC tokens to design tokens is part of this task's acceptance criteria

Change 885895 abandoned by Anne Tomasevich:

[design/codex@main] [proof of concept] Demo CSS-only TypeaheadSearch


no longer needed; will open a final patch for CSS-only TahS demo

Volker_E renamed this task from Lower the maintenance costs of TypeaheadSearch inVector to Lower the maintenance costs of TypeaheadSearch in Vector.Feb 20 2023, 11:34 PM
AnneT changed the task status from In Progress to Stalled.Wed, Mar 8, 1:48 PM

Currently blocked by T330468