Problem
Query Builder's user interface was composed using a combination of Vue 2 custom components and WiKit components. The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the now official Wikimedia design system.
Solution
Replacing WiKit components by available Codex elements will take us a step closer to switching to the new design system and deprecating the old.
Deprecating WiKit will mean contributing to establishing a single source of truth for FE components. Using Codex will ensure that we are up-to-date in terms of Wikimedia's front end standards, and it will also contribute to the migration of Query Builder from Vue 2 to Vue 3 (to avoid the side effects of Vue 2's end of life).
Here's a list of the WiKit components used in the Query Builder's UI that have equivalent Codex replacements:
| WiKit component | Codex replacement | Notes/Subtask |
|---|---|---|
| Buttons (Normal neutral, icon-only normal neutral, primary progressive, neutral progressive) | CdxButton | T359851 |
| Checkbox | CdxCheckbox | T359852 |
| Dropdown | CdxSelect | T359853 |
| Link | Link mixin | T359859 |
| (Label +) Lookup | CdxLookup | T360138 |
| Message | CdxMessage | T359860 |
| (Label +) Text Input | CdxField + CdxTextInput | T359861 |
| ToggleButton group | CdxToggleButtonGroup | T362183 |
Out of scope from this task due to unavailability:
- BouncingDotsLoader
- DateInput
- ExtendedNumberInput
- InputWithExtender
- LanguageSelector
- QuantityInput
- Tooltip
Acceptance criteria
- All WiKit components that have an equivalent in Codex are replaced