Problem

QuantityInput is among the Wikibase-specific components that need to be ported to the Query builder to unblock the deprecation of WiKit. It's built using a combination of ExtendedNumberInput (which allows users to input an amount) and Lookup (which allows selecting the quanty's unit). Even if Codex provides a Lookup component, it'd be too costly to integrate it with ExtendedNumber Input. It sounds more sensible to keep the ported component's building blocks as is.

Solution

In order to unblock the migration to Codex and the deprecation of WiKit, we'll port WiKit's Lookup to the Query Builder repository for its reusage by QuantityInput. We'll apply all necessary changes to make the element compatible with the new version of the tool and Codex styles.

Considerations

• Styles: Lookup is itself a composition of LookupInput and ValidationMessage. It only includes a token that needs to be replaced by one of Codex's spacing tokens to ensure static units are used for spacing.

<style lang="scss">
.wikit-Lookup {
	&__label-wrapper {
		display: flex;
		align-items: center;
		gap: $spacing-50;
	}

	&__label {
		@include Label( block );
	}
}
</style>

Acceptance criteria

• Lookup is ported to Query builder for its reusage by QuantityInput
• Any necessary adjustments are applied to make the component compatible with Vue3
• Any WiKit building blocks, dependencies or styles are replaced or ported too if needed