Problem
The DateInput component was implemented in WiKit to fulfill the Query builder use case. This input type 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 DataInput 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
- DateInput is dependent on the porting of: Icon, InputWithExtender and BouncingDots
- Styles: In order to unblock WiKit's deprecation, we should also replace all WiKit tokens used currently to style the QuantityInput by Codex's tokens. Find the replaced styles and discrete values below:
<style lang="scss">
.wikit-DateInput {
&__IntroText {
padding-block-end: $spacing-25;
font-family: $font-family-system-sans;
font-weight: $font-weight-normal;
font-size: $font-size-medium;
line-height: $line-height-xx-small;
color: $color-base;
}
&__ParsedValue {
padding-block: $spacing-25;
font-family: $font-family-system-sans;
font-weight: $font-weight-semi-bold;
font-size: $font-size-medium;
line-height: $line-height-xx-small;
color: $color-base;
}
&__CalendarNotice {
padding-block-start: $spacing-25;
font-family: $font-family-system-sans;
font-weight: $font-weight-normal;
font-size: $font-size-small;
line-height: $line-height-small;
color: $color-subtle;
}
&__Prompt {
font-family: $font-family-system-sans;
font-weight: $font-weight-normal;
font-size: $font-size-medium;
line-height: $line-height-xx-small;
color: $color-placeholder;
}
}
</style>Please note that the Calendar Notice includes an icon size small (which translates to 1em/16px in Codex). The color of the icon should be $color-subtle, like its surrounding text.
Acceptance criteria
- The WiKit DateInput is ported to Query builder and made compatible with the migrated version of the tool
- We apply the necessary visual adjustments to make the component consistent with Codex input fields
- Any WiKit building blocks, dependencies or styles are replaced or ported too