Problem
Query Builder's 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.
Unfortunately, some of the WiKit components used don't have a Codex equivalent and thus cannot be replaced. This is due either to their specificity (they are tailored to the Wikibase or other non-core use cases) or their temporary unavailability (they are core components that haven't been implemented in the new system yet).
Solution
Port the WiKit components that are not yet available in Codex: we'll add them to the Query Builder repository and apply all necessary changes to make them compatible with the new version of the tool.
Here's a list of the WiKit components used in the Query Builder's UI that need to be ported. They are ordered reflecting dependencies (smallest, reused building blocks are included first):
| WiKit component | Notes | Subtask | Task dependency |
|---|---|---|---|
| Label mixin | Reused by Input and Lookup | T369828 | – |
| Input | Reused by Lookup, LookupInput, ExtendedNumberInput, InputWithExtender and QuantityInput | T369836 | – |
| Icon | Used by validation message and DateInput | T369841 | – |
| Validation message | Reused by ExtendedNumberInput, InputWithExtender, Lookup, DateInput and QuantityInput. Uses Icon | T369842 | Depends on T369841 |
| OptionsMenu | Reused by LookupInput | T369906 | – |
| LookupInput | Reused by QuantityInput. Uses Input and OptionsMenu | T369907 | Depends on T369836 and T369906 |
| Lookup | Reused by QuantityInput. Uses LookupInput and ValidationMessage | T369910 | Depends on T369907 and T369842 |
| ExtendedNumberInput | Wikibase-specific component. Uses Label, Input and ValidationMessage. Reused by QuantityInput | T367900 | Depends on T369828, T369836 and T369842 |
| InputWithExtender | Wikibase-specific component. Uses Input and ValidationMessage. Reused by DateInput | T367902 | Depends on T369836 and T369842 |
| QuantityInput | Wikibase-specific component. Uses Label, Input, LookupInput, ValidationMessage | T367904 | Depends on T369828, T369836, T369907 and T369842 |
| BouncingDots Loader | Core component currently being designed. See T345921 | T370141 | – |
| DateInput | Wikibase-specific component. Uses Icon, InputWithExtender and BouncingDots | T367898 | Depends on T369841, T367902 and T370141 |
| LanguageSelector | Custom, non-core component | T367909 | – |
| Popover | Planned core component not available yet in Codex | T370146 | – |
Considerations
- Styles: WiKit tokens will have to be replaced in order to enable deprecation. The decision to use Codex tokens or discrete values will depend on the case: components that will soon be able to be replaced (e.g. Bouncing dots) or be visually adjusted based on future guidelines (e.g. Language selector) can use discrete values to limit effort.
- Responsiveness: DateInput, ExtendedNumberInput, InputWithExtender and QuantityInput are responsive components. In order to achieve consistency with the surrounding Codex elements (which do not adjust for touch), we should remove all responsive behavior from those components.
- Utilities: Most of the components use utilities and scripts that will need to be exported from WiKit too in order for them to properly function in their new environment.
Open questions
Some of the components to be ported will need visual adjustments. The changes (we're replacing WiKit tokens by Codex's whenever possible) are documented in each individual task.
Acceptance criteria
- All WiKit components that don't have an equivalent in Codex yet are ported to the Query builder repository