Problem

The Icon component was implemented to communicate or reinforce meaning visually. 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 Icon component. These are: ValidationMessage and DateInput.

Solution

In order to unblock the migration to Codex and the deprecation of WiKit, we'll port the WiKit Icon 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 styles.

Considerations

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

Creating 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-Icon {
	display: inline-flex;
	align-items: center;

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

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

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

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

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

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

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

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

	&--large &__svg {
                min-width: $min-size-icon-medium;
		min-height: $min-size-icon-medium;
		width: $size-icon-medium;
		height: $size-icon-medium;
	}

	&--medium &__svg {
                min-width: $min-size-icon-small;
		min-height: $min-size-icon-small;
		width: $size-icon-small;
		height: $size-icon-small;
	}

	&--small &__svg {
		min-width: 0.875em;
		min-height: 0.875em;
                 width: 0.875em;
		height: 0.875em;
	}

	&--xsmall &__svg {
		min-width: $min-size-icon-x-small;
		min-height: $min-size-icon-x-small;
		width: $size-icon-x-small;
		height: $size-icon-x-small;
	}

	&--flipped {
		transform: scaleX(-1);
	}
}
</style>

⚠️ Icon sizing: The inconsistencies between size selector names and the token values that define them are caused by the fact that Codex and WiKit use different icon sizing scales. The Codex values that corresponded to each WiKit icon size were applied without adjusting the selectors' names to prevent visual regression, even if it results in incorrect-looking pairing.

On the other hand, 14px icons are not part of Codex, and there isn't a semantically correct token or custom variable that we can use to define this size. Discrete values were used instead. The size is maintained just to prevent any issues.

Acceptance criteria

• Icon 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