#####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 ]] | [Add task]
| Dialog | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/dialog/ | CdxDialog ]] | [Add task]
| Link | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/themes/mixins/public/link.less | Link mixin ]] | [Add task]
| Message | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/message/ | CdxMessage ]] | [Add task]
| TextArea | [[ https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/heads/main/packages/codex/src/components/text-area/ | CdxTextArea ]] | Involves finding an alternative way to display the loading and warning states of the TextArea. See [Add task]
Out of scope from this task due to unavailability/lack of need:
- Dropdown/Select: Available in Codex, but replacement is unnecessary because this element is used within the Table component, which is not available (see below)
- 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 ]])
- 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)
- 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 Codex element are replaced