Change Details

#####Problem The Query Builder'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` ([[ https://doc.wikimedia.org/codex/main/components/demos/text-area.html | See demo ]]) in combination with `cdx-field` ([[ https://doc.wikimedia.org/codex/main/components/demos/field.html#demos | 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 TBC #####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

#####Problem The Query Builder's user interface was composed using a combination of Vue 2 custom components and WiKit 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` ([[ https://doc.wikimedia.org/codex/main/components/demos/text-input.html | See demo ]]). The TextInput needss to be used in combination with `cdx-field` ([[ https://doc.wikimedia.org/codex/main/components/demos/field.html#demos | See demo ]]) for it to include the necessary label and inline validation messages. #####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

#####Problem The Query Builder's user interface was composed using a combination of Vue 2 custom components and WiKit elements, such as `TextArea`Input`. 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`Input` by the Codex equivalent: `cdx-text-areainput` ([[ https://doc.wikimedia.org/codex/main/components/demos/text-areainput.html | See demo ]]). The TextInput needss to be used in combination with `cdx-field` ([[ https://doc.wikimedia.org/codex/main/components/demos/field.html#demos | 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 for it to include the necessary label and inline validation messages. #####Considerations TBC #####Acceptance criteria [] WiKit's TextAreaInput is replaced by its Codex equivalent [] We use Codex's Field to add a label and inline validation messages to TextArea [] We use Codex's Progress bar is used to display loading stateField to add a label and inline validation messages to the TextInput