fixup! Refactor(web): Refactor placement transformation to allow inpu…

…t of logical placements
lmc-eu · May 9, 2024 · 22d28d6 · 22d28d6
1 parent 864a13d
commit 22d28d6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/packages/web/src/scss/tools/__tests__/_placement.test.scss b/packages/web/src/scss/tools/__tests__/_placement.test.scss
@@ -93,7 +93,7 @@
                             $cross-axis-inverse: true,
                             $cross-axis-physical: true
                         )};
-                    --transform-left-top-spaces: #{placement.transform('left-top', $hyphenate: false)};
+                    --transform-left-top-spaces: #{placement.transform('left-top', $join-with: ' ')};
                 }
                 @include true.expect {
                     --transform-left: left;
@@ -130,7 +130,7 @@
                             $cross-axis-inverse: true,
                             $cross-axis-physical: true
                         )};
-                    --transform-top-start-spaces: #{placement.transform('top-start', $hyphenate: false)};
+                    --transform-top-start-spaces: #{placement.transform('top-start', $join-with: ' ')};
                 }
                 @include true.expect {
                     --transform-top-start: top-start;

diff --git a/packages/web/src/scss/tools/_placement.scss b/packages/web/src/scss/tools/_placement.scss
@@ -73,6 +73,8 @@ $_logical-to-physical-placement-map: (
     ),
 );
 
+$_hyphen: '-';
+
 @function -get-arrow-translate-map($prefix) {
     @return (
         top: -50% 0%,
@@ -122,11 +124,7 @@ $_logical-to-physical-placement-map: (
 // Example: get-cross-axis-direction('left') will return 'vertical'
 // Example: get-cross-axis-direction('bottom') will return 'horizontal'
 @function get-cross-axis-direction($main-axis) {
-    @if $main-axis == 'left' or $main-axis == 'right' {
-        @return 'vertical';
-    }
-
-    @return 'horizontal';
+    @return if(string.index($main-axis, 'left') or string.index($main-axis, 'right'), 'vertical', 'horizontal');
 }
 
 // Function to check if a placement is logical
@@ -170,22 +168,20 @@ $_logical-to-physical-placement-map: (
 // Example: transform('top-start', $main-axis-inverse: true) will return 'bottom-start'
 // Example: transform('top-start', $main-axis-inverse: true, $cross-axis-inverse: true) will return 'bottom-end'
 // Example: transform('top-start', $main-axis-inverse: true, $cross-axis-inverse: true, $cross-axis-physical: true) will return 'bottom-right'
-// Example: transform('top-start', $hyphenate: false) will return 'top start'
+// Example: transform('top-start', $join-with: ' ') will return 'top start'
 @function transform(
     $placement,
     $main-axis-inverse: false,
     $cross-axis-inverse: false,
     $cross-axis-physical: false,
-    $hyphenate: true
+    $join-with: $_hyphen
 ) {
-    $hyphen: '-';
-    $placement-chunks: string.split($placement, $hyphen);
+    $placement-chunks: string.split($placement, $_hyphen);
     $main-axis: list.nth($placement-chunks, 1);
     $main-axis-transformed: transform-axis(
         $axis: $main-axis,
         $inverse: $main-axis-inverse,
     );
-    $join-with: if($hyphenate, $hyphen, ' ');
 
     @if list.length($placement-chunks) > 1 {
         $cross-axis: list.nth($placement-chunks, 2);
@@ -217,7 +213,7 @@ $_logical-to-physical-placement-map: (
     inset: map.get($_inset-map, $placement); // 1.2
     translate: map.get(-get-child-translate-map($prefix), $placement); // 1.3
     transform-origin: string.unquote(
-        transform($placement, $main-axis-inverse: true, $cross-axis-physical: true, $hyphenate: false)
+        transform($placement, $main-axis-inverse: true, $cross-axis-physical: true, $join-with: ' ')
     );
 }