Problem
The Input subcomponent was implemented to be reused by other WiKit's field components, such as Lookup, LookupInput, ExtendedNumberInput, InputWithExtender or QuantityInput. We need to port the components that depend on Input to the Query Builder in order to unblock WiKit's deprecation.
Solution
In order to unblock the migration to Codex and the deprecation of WiKit, we'll port the WiKit Input subcomponent 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.
Considerations
- Responsiveness: Responsive styles should be removed from the component for it to behave like the surrounding Codex elements (changes were applied to the code specs below).
- Styles: In order to unblock WiKit's deprecation, 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 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:
<style lang="scss">
.wikit-Input {
color: $color-base;
background-color: $background-color-base;
border: $border-base;
border-radius: $border-radius-base;
font-family: $font-family-system-sans;
font-size: $font-size-medium;
font-weight: $font-weight-normal;
line-height: $line-height-xx-small;
width: $size-full;
box-sizing: $box-sizing-base;
padding-inline: $spacing-25 $spacing-50;
transition-duration: $transition-duration-medium;
transition-property: $transition-property-base;
box-shadow: $box-shadow-inset-small $box-shadow-color-transparent;
&:disabled {
color: $color-disabled;
border-color: $border-color-disabled;
background-color: $background-color-disabled-subtle;
}
// should ideally be taken care of by the globally applied style reset (ress)
// https://github.com/filipelinhares/ress/pull/24
&:focus {
outline: none;
}
&::placeholder {
color: $color-placeholder;
opacity: $opacity-base;
}
&:not(&--error):not(&--warning) {
&:not(:disabled) {
&:hover {
border-color: $border-color-input--hover;
}
&:focus,
&:active {
border-color: $border-color-progressive--focus;
box-shadow: $box-shadow-inset-small $box-shadow-color-progressive--focus;
}
}
}
&--error {
border-color: $border-color-error;
&:hover {
border-color: $border-color-error--hover;
}
&:focus,
&:active {
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
border-color: @border-color-progressive--focus;
}
}
}
</style>Acceptance criteria
- Input is ported to Query builder for its reusage by other Wikibase-specific components
- Any necessary adjustments are applied to make the component compatible with Vue3
- Any WiKit building blocks, dependencies or styles are replaced