Background

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.

Plan

Goals

• 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