From 1ca6d494acf545a233fc3442839a0fa572319ce0 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam.kudrna@lmc.eu>
Date: Fri, 29 Sep 2023 18:09:33 +0200
Subject: [PATCH] fixup! Feat(web): WIP placement

---
 .../scss/components/Dropdown/_Dropdown.scss   |  55 +-----
 .../src/scss/components/Dropdown/_theme.scss  |   2 +
 .../src/scss/components/Dropdown/index.html   |   8 +-
 .../src/scss/components/Tooltip/_Tooltip.scss |  42 ++---
 .../src/scss/components/Tooltip/_theme.scss   |   3 +
 .../web/src/scss/settings/_dictionaries.scss  |  10 +-
 .../web/src/scss/tools/_dictionaries.scss     |   6 +-
 packages/web/src/scss/tools/_placement.scss   | 158 +++++++++++-------
 packages/web/src/scss/tools/_string.scss      |   9 +-
 9 files changed, 142 insertions(+), 151 deletions(-)

diff --git a/packages/web/src/scss/components/Dropdown/_Dropdown.scss b/packages/web/src/scss/components/Dropdown/_Dropdown.scss
index 38614e4672..b66ec33536 100644
--- a/packages/web/src/scss/components/Dropdown/_Dropdown.scss
+++ b/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);
 }
diff --git a/packages/web/src/scss/components/Dropdown/_theme.scss b/packages/web/src/scss/components/Dropdown/_theme.scss
index 451c44c51f..e623ec67c2 100644
--- a/packages/web/src/scss/components/Dropdown/_theme.scss
+++ b/packages/web/src/scss/components/Dropdown/_theme.scss
@@ -1,4 +1,5 @@
 @use '@tokens' as tokens;
+@use '../../settings/dictionaries';
 
 $breakpoints: tokens.$breakpoints;
 $offset: tokens.$space-400;
@@ -6,3 +7,4 @@ $padding: tokens.$space-600;
 $border-radius: tokens.$radius-200;
 $background: tokens.$background-basic;
 $shadow: tokens.$shadow-100;
+$placement-dictionary: dictionaries.$placement;
diff --git a/packages/web/src/scss/components/Dropdown/index.html b/packages/web/src/scss/components/Dropdown/index.html
index 86f7b13a09..53786e22b8 100644
--- a/packages/web/src/scss/components/Dropdown/index.html
+++ b/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" />
diff --git a/packages/web/src/scss/components/Tooltip/_Tooltip.scss b/packages/web/src/scss/components/Tooltip/_Tooltip.scss
index a3fb209d02..009e0a64ad 100644
--- a/packages/web/src/scss/components/Tooltip/_Tooltip.scss
+++ b/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.
 }
diff --git a/packages/web/src/scss/components/Tooltip/_theme.scss b/packages/web/src/scss/components/Tooltip/_theme.scss
index c61ba44690..5c73660a30 100644
--- a/packages/web/src/scss/components/Tooltip/_theme.scss
+++ b/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;
diff --git a/packages/web/src/scss/settings/_dictionaries.scss b/packages/web/src/scss/settings/_dictionaries.scss
index 93d20cd9fd..f1351aa463 100644
--- a/packages/web/src/scss/settings/_dictionaries.scss
+++ b/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;
diff --git a/packages/web/src/scss/tools/_dictionaries.scss b/packages/web/src/scss/tools/_dictionaries.scss
index 7011b9ee01..db179bd52b 100644
--- a/packages/web/src/scss/tools/_dictionaries.scss
+++ b/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);
         }
     }
 }
diff --git a/packages/web/src/scss/tools/_placement.scss b/packages/web/src/scss/tools/_placement.scss
index ede386874e..adabb85dd0 100644
--- a/packages/web/src/scss/tools/_placement.scss
+++ b/packages/web/src/scss/tools/_placement.scss
@@ -7,78 +7,112 @@
     z-index: $z-index;
 }
 
-// Top
-@mixin top-left($offset: 0, $scale: 1) {
-    inset: auto auto 100% 0;
-    transform: translate(0, #{-1 * $offset}) scale(#{$scale});
-    transform-origin: bottom left;
-}
+// Mixin to generate child placement styles by a placement name
+// Parameters are:
+// * $placement: the placement name
+// * $offset: the offset of child from its parent, typically for an arrow
+// * $scale: the initial scale of child
+//
+// `--tooltip-offset-orthogonal` is a custom property to translate orthogonal to the placement axis.
+// This is useful in case of an absolutely positioned child element that only needs the
+// `$offset` property.
+@mixin variant($placement, $offset: 0, $scale: 1) {
+    @if $placement == 'top' {
+        inset: auto auto 100% 50%;
+        transform: translate(var(--tooltip-offset-orthogonal, -50%), #{-1 * $offset}) scale(#{$scale});
+        transform-origin: bottom center;
+    }
 
-@mixin top-center($offset: 0, $scale: 1) {
-    inset: auto auto 100% 50%;
-    transform: translate(-50%, #{-1 * $offset}) scale(#{$scale});
-    transform-origin: bottom center;
-}
+    @if $placement == 'top-left' {
+        inset: auto auto 100% 0;
+        transform: translate(var(--tooltip-offset-orthogonal, 0), #{-1 * $offset}) scale(#{$scale});
+        transform-origin: bottom left;
+    }
 
-@mixin top-right($offset: 0, $scale: 1) {
-    inset: auto 0 100% auto;
-    transform: translate(0, #{-1 * $offset}) scale(#{$scale});
-    transform-origin: bottom right;
-}
+    @if $placement == 'top-right' {
+        inset: auto 0 100% auto;
+        transform: translate(var(--tooltip-offset-orthogonal, 0), #{-1 * $offset}) scale(#{$scale});
+        transform-origin: bottom right;
+    }
 
-// Bottom
-@mixin bottom-left($offset: 0, $scale: 1) {
-    inset: 100% auto auto 0;
-    transform: translate(0, #{$offset}) scale(#{$scale});
-    transform-origin: top left;
-}
+    @if $placement == 'bottom' {
+        inset: 100% auto auto 50%;
+        transform: translate(var(--tooltip-offset-orthogonal, -50%), #{$offset}) scale(#{$scale});
+        transform-origin: top center;
+    }
 
-@mixin bottom-center($offset: 0, $scale: 1) {
-    inset: 100% auto auto 50%;
-    transform: translate(-50%, #{$offset}) scale(#{$scale});
-    transform-origin: top center;
-}
+    @if $placement == 'bottom-left' {
+        inset: 100% auto auto 0;
+        transform: translate(var(--tooltip-offset-orthogonal, 0), #{$offset}) scale(#{$scale});
+        transform-origin: top left;
+    }
 
-@mixin bottom-right($offset: 0, $scale: 1) {
-    inset: 100% 0 auto auto;
-    transform: translate(0, #{$offset}) scale(#{$scale});
-    transform-origin: top right;
-}
+    @if $placement == 'bottom-right' {
+        inset: 100% 0 auto auto;
+        transform: translate(var(--tooltip-offset-orthogonal, 0), #{$offset}) scale(#{$scale});
+        transform-origin: top right;
+    }
 
-// Left
-@mixin left-top($offset: 0, $scale: 1) {
-    inset: 0 100% auto auto;
-    transform: translate(#{-1 * $offset}, 0) scale(#{$scale});
-    transform-origin: right top;
-}
+    @if $placement == 'left' {
+        inset: 50% 100% auto auto;
+        transform: translate(#{-1 * $offset}, var(--tooltip-offset-orthogonal, -50%)) scale(#{$scale});
+        transform-origin: right center;
+    }
 
-@mixin left-center($offset: 0, $scale: 1) {
-    inset: 50% 100% auto auto;
-    transform: translate(#{-1 * $offset}, -50%) scale(#{$scale});
-    transform-origin: right center;
-}
+    @if $placement == 'left-top' {
+        inset: 0 100% auto auto;
+        transform: translate(#{-1 * $offset}, var(--tooltip-offset-orthogonal, 0)) scale(#{$scale});
+        transform-origin: right top;
+    }
 
-@mixin left-bottom($offset: 0, $scale: 1) {
-    inset: auto 100% 0 auto;
-    transform: translate(#{-1 * $offset}, 0) scale(#{$scale});
-    transform-origin: right bottom;
-}
+    @if $placement == 'left-bottom' {
+        inset: auto 100% 0 auto;
+        transform: translate(#{-1 * $offset}, var(--tooltip-offset-orthogonal, 0)) scale(#{$scale});
+        transform-origin: right bottom;
+    }
 
-// Right
-@mixin right-top($offset: 0, $scale: 1) {
-    inset: 0 auto auto 100%;
-    transform: translate(#{$offset}, 0) scale(#{$scale});
-    transform-origin: left top;
-}
+    @if $placement == 'right' {
+        inset: 50% auto auto 100%;
+        transform: translate(#{$offset}, var(--tooltip-offset-orthogonal, -50%)) scale(#{$scale});
+        transform-origin: left center;
+    }
+
+    @if $placement == 'right-top' {
+        inset: 0 auto auto 100%;
+        transform: translate(#{$offset}, var(--tooltip-offset-orthogonal, 0)) scale(#{$scale});
+        transform-origin: left top;
+    }
 
-@mixin right-center($offset: 0, $scale: 1) {
-    inset: 50% auto auto 100%;
-    transform: translate(#{$offset}, -50%) scale(#{$scale});
-    transform-origin: left center;
+    @if $placement == 'right-bottom' {
+        inset: auto auto 0 100%;
+        transform: translate(#{$offset}, var(--tooltip-offset-orthogonal, 0)) scale(#{$scale});
+        transform-origin: left bottom;
+    }
 }
 
-@mixin right-bottom($offset: 0, $scale: 1) {
-    inset: auto auto 0 100%;
-    transform: translate(#{$offset}, 0) scale(#{$scale});
-    transform-origin: left bottom;
+// Mixin to generate child arrow styles by a placement name
+@mixin arrow($placement) {
+    @if $placement == 'top' {
+        top: 100%;
+        left: 50%;
+        transform: translate(-50%, -100%) rotateZ(180deg);
+    }
+
+    @if $placement == 'bottom' {
+        bottom: 100%;
+        left: 50%;
+        transform: translate(-50%, 0) rotateZ(0);
+    }
+
+    @if $placement == 'left' {
+        top: 50%;
+        left: 100%;
+        transform: translate(-50%, -100%) rotateZ(90deg);
+    }
+
+    @if $placement == 'right' {
+        top: 50%;
+        right: 100%;
+        transform: translate(50%, -100%) rotateZ(-90deg);
+    }
 }
diff --git a/packages/web/src/scss/tools/_string.scss b/packages/web/src/scss/tools/_string.scss
index be8e9c777d..d1e998a062 100644
--- a/packages/web/src/scss/tools/_string.scss
+++ b/packages/web/src/scss/tools/_string.scss
@@ -1,5 +1,4 @@
-// Author: Kitty Giraudel
-
+@use 'sass:meta';
 @use 'sass:string';
 
 // Convert kebab-case to camelCase
@@ -10,10 +9,11 @@
 
     @for $i from 1 through $length {
         $char: string.slice($camel-case, $i, $i);
+
         @if $char == '-' {
             $next-char: string.slice($camel-case, $i + 1, $i + 1);
-            $camel-case: string.insert($camel-case, $i + 1, string.to-upper-case($next-char));
-            $camel-case: string.slice($camel-case, 1, $i) + string.slice($camel-case, $i + 2);
+            $camel-case: string.insert($camel-case, string.to-upper-case($next-char), $i + 2);
+            $camel-case: string.slice($camel-case, 1, $i - 1) + string.slice($camel-case, $i + 2);
         }
     }
 
@@ -21,6 +21,7 @@
 }
 
 // Replace all occurrences of a string with another string
+// Author: Kitty Giraudel
 // Example: replace('top-left', '-', '') will return 'topleft'
 @function replace($string, $search, $replace: '') {
     $index: string.index($string, $search);