#####Problem
Mismatch Finder'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 Mismatch finder 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 Mismatch Finder'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 ]] | T346797
| Dialog | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/dialog/ | CdxDialog ]] | T347100
| Dropdown | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/select| CdxSelect ]] | T347168
| Link | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/themes/mixins/public/link.less | Link mixin ]] | T347161
| Message | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/message/ | CdxMessage ]] | T347183
| 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 ]] | Involves finding an alternative way to display the loading and warning states of the TextArea. See T347190
Out of scope from this task due to unavailability/lack of need:
- Inline progress bar: We won't be using the inline progress bar to indicate the loading state of TextArea or any other elements. We'll use the Indeterminate Progress bar in loading scenarios instead ([[ https://www.figma.com/file/ZUdkxlbZCSHoluhVrjANSE/WiKit-to-Codex-Migration?type=design&node-id=111-4315&mode=design&t=m7s9HEjgFgwqhicV-0 | see specs ]], see relevant task T347190)
- Label: We don't need to replace Label components/mixins individually, since we'll use the Field component to display a label for TextArea (see relevant task T347190)
- LanguageSelector: This is not considered a core component, and thus it won't be made available in Codex. We'll have to update our custom component to Vue 3 (T345915) and adjust its styles to follow the Codex style guidelines (T345905)
- Table component: The Table component is missing in Codex, but it has been identified as core/planned (T303320). Implementation accountability TBD.
- Validation message: Not needed anymore, since the Codex Field component now handles the display of inline validation in form elements such as TextArea
#####Acceptance criteria
[] All WiKit components that have an equivalent in Codex are replaced