As a first step in the process of migrating TypeaheadSearch from WVUI to Codex, we will build a version of TypeaheadSearch that matches the design and UX of the existing WVUI component. Future steps will include moving business logic into Vector (and, eventually, a separate library), implementing design and UX changes for consistency with the design system, and implementing changes to support the Wikidata use case.
Goals for this task
- Recreate the UI and UX
- Match current design, noting that in the current Vector implementation, the Vue component will replace and be "hydrated" by the server-rendered version, and we must avoid shifts in layout or style
- Rename anything too specific, but be mindful of each change as it will affect the migration (e.g. prop names)
- Use the CdxLookup component for text input and menu behavior
- Narrow the scope of the TypeaheadSearch component by removing search client, results process, and URL generation code from the component
- Be mindful of the future extension of this component to serve the Wikidata and other use cases
- Note what we're removing from the WVUI version that will need to be re-implemented in Vector (and, eventually, a separate library within MediaWiki core)
Existing design and resources
Acceptance criteria
- UI matches current design and implementation
- UX matches current implementation
- CdxTypeaheadSearch uses TextInput and Menu components
- Variable and component names are MediaWiki-agnostic
- Simple working demo provided
- Future work is documented in Phabricator