fixup! Feat(web): WIP placement

packages/web/src/scss/components/Dropdown/_Dropdown.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../tools/breakpoint';
+@use '../../tools/dictionaries';
 @use '../../tools/placement';
 @use 'theme' as theme;
 
@@ -28,62 +29,22 @@
     display: block;
 }
 
-// Placement: top
-.Dropdown--top {
-    @include placement.top-center($offset: theme.$offset);
-}
+@include dictionaries.generate-placements('Dropdown', theme.$placement-dictionary, $offset: theme.$offset);
 
-.Dropdown--topLeft,
+// @deprecated The class combination will be removed in the next major version.
+// Migration: delete all class combinations below.
 .Dropdown--top.Dropdown--left {
-    // @deprecated The class combination will be removed in the next major version.
-    @include placement.top-left($offset: theme.$offset);
+    @include placement.variant('top-left', $offset: theme.$offset);
 }
 
-.Dropdown--topRight,
 .Dropdown--top.Dropdown--right {
-    // @deprecated The class combination will be removed in the next major version.
-    @include placement.top-right($offset: theme.$offset);
-}
-
-// Placement: bottom
-.Dropdown--bottom {
-    @include placement.bottom-center($offset: theme.$offset);
+    @include placement.variant('top-right', $offset: theme.$offset);
 }
 
-.Dropdown--bottomLeft,
 .Dropdown--bottom.Dropdown--left {
-    // @deprecated The class combination will be removed in the next major version.
-    @include placement.bottom-left($offset: theme.$offset);
+    @include placement.variant('bottom-left', $offset: theme.$offset);
 }
 
-.Dropdown--bottomRight,
 .Dropdown--bottom.Dropdown--right {
-    // @deprecated The class combination will be removed in the next major version.
-    @include placement.bottom-right($offset: theme.$offset);
-}
-
-// Placement: left
-.Dropdown--left {
-    @include placement.left-center($offset: theme.$offset);
-}
-
-.Dropdown--leftTop {
-    @include placement.left-top($offset: theme.$offset);
-}
-
-.Dropdown--leftBottom {
-    @include placement.left-bottom($offset: theme.$offset);
-}
-
-// Placement: right
-.Dropdown--right {
-    @include placement.right-center($offset: theme.$offset);
-}
-
-.Dropdown--rightTop {
-    @include placement.right-top($offset: theme.$offset);
-}
-
-.Dropdown--rightBottom {
-    @include placement.right-bottom($offset: theme.$offset);
+    @include placement.variant('bottom-right', $offset: theme.$offset);
 }

packages/web/src/scss/components/Dropdown/_theme.scss

@@ -1,8 +1,10 @@
 @use '@tokens' as tokens;
+@use '../../settings/dictionaries';
 
 $breakpoints: tokens.$breakpoints;
 $offset: tokens.$space-400;
 $padding: tokens.$space-600;
 $border-radius: tokens.$radius-200;
 $background: tokens.$background-basic;
 $shadow: tokens.$shadow-100;
+$placement-dictionary: dictionaries.$placement;

packages/web/src/scss/components/Dropdown/index.html

@@ -13,7 +13,7 @@ <h2 class="docs-Heading">Basic usage with default align</h2>
     >
       Button as anchor
     </button>
-    <div class="Dropdown Dropdown--bottom Dropdown--left" id="dropdownDefault">
+    <div class="Dropdown Dropdown--bottomLeft" id="dropdownDefault">
       <a href="#" class="d-flex mb-400">
         <svg width="24" height="24" aria-hidden="true" class="mr-400">
           <use xlink:href="/icons/svg/sprite.svg#info" />
@@ -55,7 +55,7 @@ <h2 class="docs-Heading">Usage with align to top right</h2>
     >
       Button as anchor
     </button>
-    <div class="Dropdown Dropdown--top Dropdown--right" id="dropdownTopRight">
+    <div class="Dropdown Dropdown--topRight" id="dropdownTopRight">
       <a href="#" class="d-flex mb-400">
         <svg width="24" height="24" aria-hidden="true" class="mr-400">
           <use xlink:href="/icons/svg/sprite.svg#info" />
@@ -98,7 +98,7 @@ <h2 class="docs-Heading">Usage with disabled auto close</h2>
     >
       Button as anchor
     </button>
-    <div class="Dropdown Dropdown--bottom Dropdown--left" id="dropdownDisabledAutoClose">
+    <div class="Dropdown Dropdown--bottomLeft" id="dropdownDisabledAutoClose">
       <a href="#" class="d-flex mb-400">
         <svg width="24" height="24" aria-hidden="true" class="mr-400">
           <use xlink:href="/icons/svg/sprite.svg#info" />
@@ -140,7 +140,7 @@ <h2 class="docs-Heading">Longer content</h2>
     >
       Button as anchor
     </button>
-    <div class="Dropdown Dropdown--bottom Dropdown--left" id="dropdownLonger">
+    <div class="Dropdown Dropdown--bottomLeft" id="dropdownLonger">
       <a href="#" class="d-flex mb-400">
         <svg width="24" height="24" aria-hidden="true" class="mr-400">
           <use xlink:href="/icons/svg/sprite.svg#info" />

packages/web/src/scss/components/Tooltip/_Tooltip.scss

@@ -1,8 +1,9 @@
 // 1. Although it seems pointless, having the arrow as a standalone HTML element has a purpose: the arrow can be
 //    precisely positioned in sticky tooltips, e.g. with Floating UI:
 //    https://floating-ui.com
-// 2. Reset positioning for controlled variant.
-// 3. Shift Tooltip so there is space for the arrow between Tooltip and reference element.
+// 2. `--tooltip-offset-orthogonal` is a custom property to translate orthogonal to the placement axis.
+//    It is reset to 0 in the controlled variant when the placement is controlled e.g. by Floating UI.
+// 3. Reset positioning for controlled variant when the placement is controlled e.g. by Floating UI.
 
 @use 'sass:math';
 @use '../../tools/placement';
@@ -61,44 +62,36 @@
 
 // Sides
 .Tooltip--top {
-    @include placement.top-center($offset: theme.$arrow-height, $scale: var(--tooltip-scale, 1));
+    @include placement.variant('top', $offset: theme.$arrow-height, $scale: var(--tooltip-scale, 1));
 }
 
 .Tooltip--bottom {
-    @include placement.bottom-center($offset: theme.$arrow-height, $scale: var(--tooltip-scale, 1));
+    @include placement.variant('bottom', $offset: theme.$arrow-height, $scale: var(--tooltip-scale, 1));
 }
 
 .Tooltip--left {
-    @include placement.left-center($offset: theme.$arrow-height, $scale: var(--tooltip-scale, 1));
+    @include placement.variant('left', $offset: theme.$arrow-height, $scale: var(--tooltip-scale, 1));
 }
 
 .Tooltip--right {
-    @include placement.right-center($offset: theme.$arrow-height, $scale: var(--tooltip-scale, 1));
+    @include placement.variant('right', $offset: theme.$arrow-height, $scale: var(--tooltip-scale, 1));
 }
 
 // Arrows
 .Tooltip--top > .Tooltip__arrow {
-    top: 100%;
-    left: 50%;
-    transform: translate(-50%, -100%) rotateZ(180deg);
+    @include placement.arrow('top');
 }
 
 .Tooltip--bottom > .Tooltip__arrow {
-    bottom: 100%;
-    left: 50%;
-    transform: translate(-50%, 0) rotateZ(0);
+    @include placement.arrow('bottom');
 }
 
 .Tooltip--left > .Tooltip__arrow {
-    top: 50%;
-    left: 100%;
-    transform: translate(-50%, -100%) rotateZ(90deg);
+    @include placement.arrow('left');
 }
 
 .Tooltip--right > .Tooltip__arrow {
-    top: 50%;
-    right: 100%;
-    transform: translate(50%, -100%) rotateZ(-90deg);
+    @include placement.arrow('right');
 }
 
 // Controlled visibility
@@ -112,30 +105,25 @@
 
 // Controlled placement
 .Tooltip[data-spirit-placement] {
-    inset: unset; // 2.
+    --tooltip-offset-orthogonal: 0; // 2.
+
+    inset: unset; // 3.
 }
 
+// Use @extend for controlled placement (of both tooltip and arrow) to avoid specificity issues
 // stylelint-disable scss/at-extend-no-missing-placeholder -- We know what we are doing here. (Do we?)
 .Tooltip[data-spirit-placement='top'] {
     @extend .Tooltip--top;
-
-    transform: translate(0, #{-1 * theme.$arrow-height}); // 3.
 }
 
 .Tooltip[data-spirit-placement='bottom'] {
     @extend .Tooltip--bottom;
-
-    transform: translate(0, #{theme.$arrow-height}); // 3.
 }
 
 .Tooltip[data-spirit-placement='left'] {
     @extend .Tooltip--left;
-
-    transform: translate(#{-1 * theme.$arrow-height}, 0); // 3.
 }
 
 .Tooltip[data-spirit-placement='right'] {
     @extend .Tooltip--right;
-
-    transform: translate(#{theme.$arrow-height}, 0); // 3.
 }

packages/web/src/scss/components/Tooltip/_theme.scss

@@ -1,4 +1,5 @@
 @use '@tokens' as tokens;
+@use '../../settings/dictionaries';
 @use '../../settings/transitions';
 
 $max-width: 18rem;
@@ -17,3 +18,5 @@ $arrow-width: 13px;
 $arrow-height: 8px;
 
 $close-button-size: tokens.$space-700;
+
+$placement-dictionary: dictionaries.$placement;

packages/web/src/scss/settings/_dictionaries.scss

@@ -1,14 +1,14 @@
 @use 'sass:list';
 @use '@tokens' as tokens;
 
-_$placement-sides: top, bottom, left, right;
-_$placement-side-corners: top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom;
-_$size-extended: xsmall, xlarge;
+$_placement-sides: top, bottom, left, right;
+$_placement-side-corners: top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom;
+$_size-extended: xsmall, xlarge;
 
 $action-colors: primary, secondary, tertiary, inverted;
 $action-link-colors: primary, secondary, inverted;
 $emotion-colors: success, informative, warning, danger;
-$placement: list.join(_$placement-sides, _$placement-side-corners);
+$placement: list.join($_placement-sides, $_placement-side-corners);
 $size: small, medium, large;
-$size-extended: list.join($size, _$size-extended);
+$size-extended: list.join($size, $_size-extended);
 $text-colors: primary, secondary, primary-inverted, secondary-inverted;

packages/web/src/scss/tools/_dictionaries.scss

@@ -151,10 +151,12 @@
 // Parameters are:
 // * $class-name: the name of the component class to generate
 // * $placements: map of the placements to generate
-@mixin generate-placements($class-name, $placements) {
+// * $offset: the offset of child from its parent, typically for an arrow
+// * $scale: the scale of child
+@mixin generate-placements($class-name, $placements, $offset: 0, $scale: 1) {
     @each $placement in $placements {
         .#{$class-name}--#{spirit-string.convert-kebab-case-to-camel-case($placement)} {
-            @include placement.#{$placement }();
+            @include placement.variant($placement, $offset, $scale);
         }
     }
 }