Problem
The Popover component was implemented in WiKit to fulfill the Query builder use case of displaying clarifying information about condition fields. Codex doesn't include Popover as a core element yet, but its incorporation to the system is planned (See T363375).
Solution
In order to unblock the migration to Codex and the deprecation of WiKit, we'll port the WiKit Popover 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
- Replacement by Codex component: Once the Codex popover is available, we'll have to create a separate task to replace the ported component (See Table component replacement task for guidance).
- Styles: In order to unblock WiKit's deprecation, we should also remove all WiKit tokens used within the Popover. This core component will be superseded by its Codex equivalent soon, but it might be a good idea to use Codex tokens in order to keep its visual style aligned with the system's guidelines.
Please note:
- The only visual change is the line-height of the popover content, that is slightly reduced to 1.571em in order to match the Codex style "ui-text-s"
- In the WiKit popover, spacing tokens had been used for heights and widths for some reason. They were now replaced by size Codex tokens
- The latter change means that different units (rem v. px) are being used to define the space and size of pointers. The expectation is for this to not create any issues, but it's worth validating.
- Some code lines were skipped to avoid making the task's description even longer!
<style lang="scss">
$base: '.wikit-Popover';
$pointer-edge-length: math.hypot($wikit-Popover-pointer-width/2, $wikit-Popover-pointer-height);
#{$base} {
display: inline-block;
position: relative;
&__tartget {
display: inline-block;
}
&__content-wrapper {
border: $border-base;
border-radius: $border-radius-base;
width: max-content;
position: absolute;
display: block;
box-shadow: $box-shadow-drop-medium;
background-color: $background-color-base;
max-width: $size-2400;
}
&__content {
padding-inline: $spacing-75;
padding-block: $spacing-75;
line-height: $line-height-small;
font-family: $font-family-system-sans;
font-size: $font-size-small;
font-weight: $font-weight-normal;
color: $color-base;
}
[L362 – L368]
&__pointer::before {
content: '';
position: absolute;
width: $pointer-edge-length;
height: $pointer-edge-length;
transform: rotate(45deg);
transform-origin: center;
border: $border-base;
background-color: $background-color-base;
box-sizing: border-box;
}
@mixin bottom {
#{$base}__content-wrapper {
inset-block-start: 100%;
margin-block-start: $spacing-25 + $spacing-50;
}
#{$base}__pointer {
inset-block-start: -$spacing-50;
}
#{$base}__pointer::before {
inset-block-end: calc(-1 * #{$pointer-edge-length} / 2);
}
}
@mixin top {
#{$base}__content-wrapper {
inset-block-end: 100%;
margin-block-end: $spacing-25 + $spacing-50;
}
#{$base}__pointer {
width: $size-100;
height: $size-50;
inset-block-start: 100%;
}
#{$base}__pointer::before {
inset-block-start: calc(-1 * #{$pointer-edge-length} / 2);
}
}
@mixin end {
#{$base}__content-wrapper {
margin-inline-start: $spacing-25 + $spacing-50;
inset-inline-start: 100%;
}
#{$base}__pointer {
width: $size-50;
height: $size-100;
inset-inline-start: -$spacing-50
}
#{$base}__pointer::before {
inset-inline-end: calc(-1 * #{$pointer-edge-length} / 2);
}
}
@mixin start {
#{$base}__content-wrapper {
margin-inline-end: $spacing-75;
inset-inline-end: 100%;
}
#{$base}__pointer {
width: $size-100;
height: $size-100;
inset-inline-start: 100%;
}
#{$base}__pointer::before {
inset-inline-start: calc(-1 * #{$pointer-edge-length} / 2);
}
}
@mixin horizontal( $subposition ) {
@if $subposition == center {
display: inline-flex;
justify-content: center;
}
#{$base}__content-wrapper {
@if $subposition == start {
inset-inline-end: calc(50% - #{$spacing-100} / 2 -
#{$spacing-75});
}
@if $subposition == end {
inset-inline-start: calc(50% - #{$spacing-100} / 2 -
#{$spacing-75});
}
}
&#{$base}--flush-edges #{$base}__content-wrapper {
@if $subposition == start {
inset-inline-end: min(50% - #{$spacing-100}} / 2 -
#{$spacing-75}, 0px);
}
@if $subposition == end {
inset-inline-start: min(50% - #{$spacing-100} / 2 -
#{spacing-75}, 0px);
}
}
#{$base}__pointer {
width: $size-100;
height: $size-50;
@if $subposition == center {
inset-inline-start: calc(50% - #{$spacing-100} / 2);
}
@if $subposition == end {
inset-inline-start: $spacing-75;
}
@if $subposition == start {
inset-inline-end: $spacing-75;
}
}
}
@mixin vertical( $subposition ) {
#{$base}__content-wrapper {
@if $subposition == center {
transform: translateY(-50%);
inset-block-start: 50%;
}
@if $subposition == top {
inset-block-end: calc(50% - #{$spacing-100} / 2 -
#{$spacing-50});
}
@if $subposition == bottom {
inset-block-start: calc(50% - #{$spacing-100} / 2 -
#{$spacing-50});
}
}
#{$base}__pointer {
@if $subposition == center {
transform: translate(0, -50%);
inset-block-start: 50%;
}
@if $subposition == top {
inset-block-end: 0;
margin-block-end: $spacing-50;
}
@if $subposition == bottom {
inset-block-start: $spacing-50;
}
}
}
[L533 - L591]
}
</style>Open questions
- Will it be possible to use the ported Popover component in combination with the Codex Fields in the Context of the Query Builder?
Acceptance criteria
- The WiKit Popover component is ported to Query builder and made compatible with the migrated version of the tool
- Any WiKit building blocks, dependencies or styles are either replaced or ported too