Problem

The Special:NewLexeme's user interface was composed using a combination of Vue 3 WiKit Next elements, such as TextInput. 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 TextInput by the Codex equivalent: cdx-text-input (See demo). The TextInput needs to be used in combination with cdx-field (See demo) for it to include the necessary label and inline validation messages.

TextInput is used by the following components in Special:New lexeme:

• LemmaInput.vue

Considerations

• Please note that Codex elements don't use asterisks to indicate required fields. The approach is, instead, indicating optional fields in forms (see guidelines). We should evaluate that this new approach is acceptable in our context, based on existing and, potentially, new user feedback.

Acceptance criteria

• WiKit's TextInput is replaced by its Codex equivalent
• We use Codex's Field to add a label and inline validation messages to the TextInput