Problem

The InputWithExtender was implemented in WiKit to serve as a subcomponent for DateInput. This element is quite specific to Wikibase, so Codex won't include it as a core element available for all projects.

Solution

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

Considerations

• Styles: In order to unblock WiKit's deprecation, we should also replace all WiKit tokens used currently to style the InputWithExtender. It might be a slightly better idea to use Codex in order to ensure consistency.

Instead of only Figma specs, providing token replacements directly sounded like a more effective handover process than creating specs in this case:

<style lang="scss">
.wikit-InputWithExtender {
	position: relative;

	&__label-wrapper {
		display: flex;
		align-items: center;
		gap: $spacing-50;
	}

	&__extension {
		padding: $spacing-50 $spacing-75;
		background-color: $background-color-base;
		width: $size-full;
		position: absolute;
		overflow-y: auto;
		z-index: $z-index-dropdown;

		border: $border-base;
		box-shadow: $box-shadow-drop-medium;
		border-radius: $border-radius-sharp $border-radius-sharp $border-radius-base $border-radius-base;

		font-family: $font-family-system-sans;
		font-size: $font-size-medium;
		font-weight: $font-weight-normal;
		color: $color-base;
		line-height: $line-height-xx-small;
	}

}
</style>

Acceptance criteria

• The WiKit InputWithExtender is ported to Query builder and made compatible with the migrated version of the tool
• Any WiKit building blocks, dependencies or styles are replaced