Problem

The Validation message component was implemented to incorporate inline validation within WiKit fields. Some of the Wikibase specific components that we need to port to the Query builder repository in order to deprecate WiKit make use of the Validation messaga component. These are: ExtendedNumberInput, InputWithExtender, Lookup, DateInput and QuantityInpu.

Solution

In order to unblock the migration to Codex and the deprecation of WiKit, we'll port the WiKit ValidationMessage component to the Query Builder repository. We'll apply all necessary changes to make the element compatible with the new version of the tool and Codex's standards.

Considerations

• Styles: We should replace all WiKit tokens used currently to style the ValidationMessage. We could use both discrete values or Codex tokens. It might be a slightly better idea to do the latter in order to ensure consistency.

Creating only design specs to indicate style adjustments sounded like a limited and error-prone handover method. Replacing tokens directly seemed like a more effective way to proceed in this case:

<style lang="scss">
.wikit-ValidationMessage {
	font-family: $font-family-system-sans;
	font-size: $font-size-medium;
	font-weight: $font-weight-bold;
	line-height: $line-height-medium;
	padding-block-start: $spacing-50;
	display: inline-flex;
	align-items: flex-start;

	&--error {
		color: $color-error;
	}

	&--warning {
		color: $color-base;
	}

	&__icon {
		//TODO: only introducing the following variable to work around exceeding stylelint max-len.
		//`stylelint-disable` is also not working for some reason. Fixing this in a follow-up.
		padding-top: ( $line-height-medium - $font-size-medium ) / 2;
		padding-block-start: $padding-top;
		margin-inline-end: $spacing-50;
	}
}
</style>

Acceptance criteria

• ValidationMessage is ported to Query builder for its reusage by other components
• Any necessary adjustments are applied to make the component compatible with Vue3
• Any WiKit building blocks, dependencies or styles are replaced