Problem
The Mismatch Finder's user interface was composed using a combination of Vue 2 custom components and WiKit elements, such as TextArea. The WiKit design system is now on its deprecation path, as it has been superseded by Codex, the official Wikimedia design system. The utilization of WiKit components is not recommended, and they should be replaced in order to reduce maintenance costs and ensure consistency.
Solution
We have to replace the WiKit TextArea by the Codex equivalent: cdx-text-area (See demo) in combination with cdx-field (See demo). See 'Considerations' for more details. This will take us a step closer to switching to the new design system and deprecating the old.
Considerations
There are a couple of TextArea states that are either missing or not consistent with Codex. We'll bypass them by design:
- Replace inline loader by progress bar: The WiKit text area displays an indeterminate inline progress bar to communicate its loading state, but this is not aligned with Codex’s guidelines. We’ll show Codex's indeterminate ProgressBar on top of a read-only TextArea to communicate that the request is being processed.
- Replace warning state by error state: In MSMF, the TextArea displays a warning when users try to submit an empty request. This state is part of the WiKit component. In Codex, the inline validation of form fields is managed (among other things) by a different element: the Field component, which at the moment doesn't provide a warning state. We’ll use Field's error message instead to facilitate the migration.
| Loading state | Warning state replaced by error |
|---|---|
 |  |
| See specifications | |
Acceptance criteria
- WiKit's TextArea is replaced by its Codex equivalent
- We use Codex's Field to add a label and inline validation messages to TextArea
- Codex's Progress bar is used to display loading state
