#####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) | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/button/ | CdxButton ]] | T359851
| Checkbox | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/checkbox/ | CdxCheckbox ]] | T359852
| Dropdown | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/select| CdxSelect ]] | T359853
| Link | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/themes/mixins/public/link.less | Link mixin ]] | T359859
| (Label +) Lookup | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/lookup/ | CdxLookup ]] | T360138
| Message | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/message/ | CdxMessage ]] | T359860
| (Label +) Text Input | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/field/ | CdxField + CdxTextInput ]]| T359861
| ToggleButton group | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/toggle-button-group/ | CdxToggleButtonGroup ]] | TBC
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