Problem

The Query Builder's user interface was composed using a combination of Vue 2 custom components and WiKit elements, such as Button. 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 ToggleButton by the Codex equivalent: the single value version of the CdxToggleButtonGroup (See demo). This will take us a step closer to switching to the new design system and deprecating the old.

Acceptance criteria

• All WiKit ToggleButton elements used in Query Builder are replaced by their Codex equivalent