#####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
| ----- | ----- | -----
| Button (Normal neutral, primary progressive and quiet progressive) | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/button/ | CdxButton ]] |
| Checkbox | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/checkbox/ | CdxCheckbox ]] |
| Dialog | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/dialog/ | CdxDialog ]] |
| Dropdown | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/select| CdxSelect ]] |
| Link | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/themes/mixins/public/link.less | Link mixin ]] |
| Message | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/message/ | CdxMessage ]] |
| TextArea | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/text-area/ | CdxTextArea ]] + [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/field | CdxField ]] |
Out of scope from this task due to unavailability/lack of need:
TBC
#####Acceptance criteria
[] All WiKit components that have an equivalent in Codex are replaced