Problem
The OptionsMenu component was implemented to allow the presentation and selection of results and options from inputs like Lookup or Select. We need to port the former, LookupInput, to the Query builder repository in order to deprecate WiKit.
Solution
In order to unblock the migration to Codex and the deprecation of WiKit, we'll port the WiKit OptionsMenu 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 WiKit tokens by Codex's directly seemed like a more effective way to proceed in this case:
<style lang="scss">
$base: '.wikit-OptionsMenu';
#{$base} {
min-width: $size-full;
/* Uses CSS min, Falls back on 95vw when max-width > viewport width */
max-width: #{min}($size-double, 95vw);
width: max-content;
background-color: $background-color-base;
border-radius: $border-radius-sharp $border-radius-sharp $border-radius-base $border-radius-base;
border: $border-base;
box-shadow: $box-shadow-drop-medium;
overflow-y: auto;
box-sizing: $box-sizing-base;
z-index: $z-index-dropdown;
&__item {
position: relative;
padding: $spacing-50 $spacing-75;
transition-property: $transition-property-base;
transition-duration: $transition-duration-base;
&:hover,
&--hovered {
background-color: $background-color-interactive;
cursor: $cursor-base--hover;
}
&--active,
&--active:hover,
&:active {
background-color: $background-color-progressive-subtle;
#{$base}__item__label, #{$base}__item__description {
color: $color-progressive;
}
}
&--selected {
#{$base}__item__label, #{$base}__item__description {
color: $color-base;
}
}
&--selected,
&--selected:hover,
&--selected#{$base}__item--hovered, {
background-color: $background-color-progressive-subtle;
}
&--selected:hover,
&--selected#{$base}__item--hovered, {
#{$base}__item__label, #{$base}__item__description {
color: $color-progressive;
}
}
&__label {
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;
&--bold {
font-weight: $font-weight-bold;
}
&-wrapper {
display: flex;
}
}
&__description {
font-family: $font-family-system-sans;
font-size: $font-size-medium;
font-weight: $font-weight-normal;
color: $color-subtle;
line-height: $line-height-xx-small;
}
&__tag {
font-family: $font-family-system-sans;
font-size: $font-size-medium;
font-weight: $font-weight-normal;
color: $color-subtle;
line-height: $line-height-xx-small;
padding-inline-start: $spacing-25;
display: inline;
white-space: nowrap;
}
}
&__no-results {
font-family: $font-family-system-sans;
font-size: $font-size-medium;
font-weight: $font-weight-normal;
color: $color-base;
line-height: $line-height-medium;
padding: $spacing-50 $spacing-75;
}
}
</style>⚠️ Menu max-width: The Codex's Menu component has a default (min/max) width of 100%, while in WiKit we allowed menus to grow up to 200% of the size of the input they accompany. This was decided to make room for Wikidata Entity descriptions, which can be quite long and push further options out of sight in case they wrap into a few lines. It sounds sensible to keep that custom width for now, specially considering the use case for menu in the QuantityInput's Lookup, which would be too small if we adopted the default 100%.
⚠️ Menu interaction: There are certain interaction details that will be make the behavior of the Codex and WiKit menus inconsistent. These are acceptable because it's unlikely for these differences to have an impact over the users' experience within the Query Builder. Moreover, applying changes to the ported component to ensure full parity sounds like a hard to justify effort, given the momentary nature of this situation.
⚠️ Missing properties: All deletion is intentional and motivated by the need to bring WiKit components' appearance closer to Codex's.
Acceptance criteria
- OptionsMenu 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 or ported too if necessary