chore(Balloon): implementation of arrow aligned with tooltip, close #…

…4186 (#4540) * chore(Balloon): implementation of arrow aligned with tooltip and fix tooltip arrow postion when rtl&v2, close #4186 * chore(Balloon): add prefix for v2
alibaba-fusion · Nov 23, 2023 · f306c4c · f306c4c
1 parent 7d2bc79
commit f306c4c
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 176 deletions.
diff --git a/src/balloon/inner.jsx b/src/balloon/inner.jsx
@@ -82,6 +82,7 @@ class BalloonInner extends React.Component {
             [`${_prefix}-${alignMap[align].arrow}`]: alignMap[align],
             [`${_prefix}-closable`]: closableInContent,
             [className]: className,
+            [`${_prefix}-v2`]: v2,
         });
 
         const titleCls = classNames({

diff --git a/src/balloon/main.scss b/src/balloon/main.scss
@@ -55,9 +55,7 @@
             $balloon-size-arrow-size,
             $balloon-primary-color-border,
             $balloon-primary-color-bg,
-            $balloon-primary-shadow,
-            $balloon-primary-border-width,
-            $balloon-size-arrow-expose-primary
+            $balloon-primary-border-width
         );
     }
 
@@ -81,9 +79,7 @@
             $balloon-size-arrow-size,
             $balloon-normal-color-border,
             $balloon-normal-color-bg,
-            $balloon-normal-shadow,
-            $balloon-normal-border-width,
-            $balloon-size-arrow-expose
+            $balloon-normal-border-width
         );
     }
 

diff --git a/src/balloon/rtl.scss b/src/balloon/rtl.scss
@@ -3,6 +3,7 @@
     &.#{$css-prefix}balloon-tooltip-right .#{$css-prefix}balloon-arrow {
         left: calc(0px - (#{$width} * 2));
         right: auto;
+
         .#{$css-prefix}balloon-arrow-content {
             transform: translateX($width) rotate(45deg);
         }
@@ -11,20 +12,25 @@
     &.#{$css-prefix}balloon-tooltip-left .#{$css-prefix}balloon-arrow {
         right: calc(0px - (#{$width} * 2));
         left: auto;
+
         .#{$css-prefix}balloon-arrow-content {
             transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
         }
     }
+
     &.#{$css-prefix}balloon-tooltip-left-top .#{$css-prefix}balloon-arrow {
         right: calc(0px - (#{$width} * 2));
         left: auto;
+
         .#{$css-prefix}balloon-arrow-content {
             transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
         }
     }
+
     &.#{$css-prefix}balloon-tooltip-left-bottom .#{$css-prefix}balloon-arrow {
         right: calc(0px - (#{$width} * 2));
         left: auto;
+
         .#{$css-prefix}balloon-arrow-content {
             transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
         }
@@ -33,6 +39,7 @@
     &.#{$css-prefix}balloon-tooltip-right-top .#{$css-prefix}balloon-arrow {
         left: calc(0px - (#{$width} * 2));
         right: auto;
+
         .#{$css-prefix}balloon-arrow-content {
             transform: translateX($width) rotate(45deg);
         }
@@ -41,6 +48,7 @@
     &.#{$css-prefix}balloon-tooltip-right-bottom .#{$css-prefix}balloon-arrow {
         left: calc(0px - (#{$width} * 2));
         right: auto;
+
         .#{$css-prefix}balloon-arrow-content {
             transform: translateX($width) rotate(45deg);
         }
@@ -67,119 +75,176 @@
     }
 }
 
-@mixin balloon-close-rtl(
-    $left
-) {
+// tooltip rtl模式在 v1 下的类名与位置实现不匹配，v2需要调整一下
+@mixin tooltip-arrow-rtl-v2($width) {
+
+    &.#{$css-prefix}balloon-tooltip-right .#{$css-prefix}balloon-arrow {
+        right: calc(0px - (#{$width} * 2));
+        left: auto;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
+        }
+    }
+
+    &.#{$css-prefix}balloon-tooltip-left .#{$css-prefix}balloon-arrow {
+        left: calc(0px - (#{$width} * 2));
+        right: auto;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX($width) rotate(45deg);
+        }
+    }
+
+    &.#{$css-prefix}balloon-tooltip-left-top .#{$css-prefix}balloon-arrow {
+        left: calc(0px - (#{$width} * 2));
+        right: auto;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX($width) rotate(45deg);
+        }
+    }
+
+    &.#{$css-prefix}balloon-tooltip-left-bottom .#{$css-prefix}balloon-arrow {
+        left: calc(0px - (#{$width} * 2));
+        right: auto;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX($width) rotate(45deg);
+        }
+    }
+
+    &.#{$css-prefix}balloon-tooltip-right-top .#{$css-prefix}balloon-arrow {
+        right: calc(0px - (#{$width} * 2));
+        left: auto;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
+        }
+    }
+
+    &.#{$css-prefix}balloon-tooltip-right-bottom .#{$css-prefix}balloon-arrow {
+        right: calc(0px - (#{$width} * 2));
+        left: auto;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
+        }
+    }
+
+    &.#{$css-prefix}balloon-tooltip-top-left .#{$css-prefix}balloon-arrow {
+        left: calc(#{$balloon-size-arrow-margin} - 2px);
+        right: auto;
+    }
+
+    &.#{$css-prefix}balloon-tooltip-top-right .#{$css-prefix}balloon-arrow {
+        right: calc(#{$balloon-size-arrow-margin} - 2px);
+        left: auto;
+    }
+
+    &.#{$css-prefix}balloon-tooltip-bottom-left .#{$css-prefix}balloon-arrow {
+        left: calc(#{$balloon-size-arrow-margin} - 2px);
+        right: auto;
+    }
+
+    &.#{$css-prefix}balloon-tooltip-bottom-right .#{$css-prefix}balloon-arrow {
+        right: calc(#{$balloon-size-arrow-margin} - 2px);
+        left: auto;
+    }
+}
+
+@mixin balloon-close-rtl($left) {
     .#{$css-prefix}balloon-close {
         left: $left;
         right: auto;
     }
 }
 
-@mixin balloon-arrow-rtl(
-    $arrorExpose
-) {
-    // 小三角不需要阴影
-    $shadow-top: null;
-    $shadow-right: null;
-    $shadow-bottom: null;
-    $shadow-left: null;
-
-    &.#{$css-prefix}balloon-right:after {
-        left: $arrorExpose;
-        right: auto;
-        border-right: none;
-        border-top: none;
-        border-left: inherit;
-        border-bottom: inherit;
-        box-shadow: $shadow-left;
-    }
-    &.#{$css-prefix}balloon-left:after {
-        right: $arrorExpose;
+@mixin balloon-arrow-rtl($width) {
+    &.#{$css-prefix}balloon-right .#{$css-prefix}balloon-arrow {
+        left: calc(0px - (#{$width} * 2));
+        right: auto;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX($width) rotate(45deg);
+        }
+    }
+
+    &.#{$css-prefix}balloon-left .#{$css-prefix}balloon-arrow {
+        right: calc(0px - (#{$width} * 2));
         left: auto;
-        border-left: none;
-        border-bottom: none;
-        border-right: inherit;
-        border-top: inherit;
-        box-shadow: $shadow-right;
-    }
-    &.#{$css-prefix}balloon-left-top:after {
-        right: $arrorExpose;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
+        }
+    }
+
+    &.#{$css-prefix}balloon-left-top .#{$css-prefix}balloon-arrow {
+        right: calc(0px - (#{$width} * 2));
         left: auto;
-        border-left: none;
-        border-bottom: none;
-        border-top: inherit;
-        border-right: inherit;
-        box-shadow: $shadow-right;
-    }
-    &.#{$css-prefix}balloon-left-bottom:after {
-        right: $arrorExpose;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
+        }
+    }
+
+    &.#{$css-prefix}balloon-left-bottom .#{$css-prefix}balloon-arrow {
+        right: calc(0px - (#{$width} * 2));
         left: auto;
-        border-left: none;
-        border-bottom: none;
-        border-top: inherit;
-        border-right: inherit;
-        box-shadow: $shadow-right;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX(get-compiling-value($width) * -1) rotate(45deg);
+        }
     }
 
-    &.#{$css-prefix}balloon-right-top:after {
-        left: $arrorExpose;
+    &.#{$css-prefix}balloon-right-top .#{$css-prefix}balloon-arrow {
+        left: calc(0px - (#{$width} * 2));
         right: auto;
-        border-right: none;
-        border-top: none;
-        border-bottom: inherit;
-        border-left: inherit;
-        box-shadow: $shadow-left;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX($width) rotate(45deg);
+        }
     }
 
-    &.#{$css-prefix}balloon-right-bottom:after {
-        left: $arrorExpose;
+    &.#{$css-prefix}balloon-right-bottom .#{$css-prefix}balloon-arrow {
+        left: calc(0px - (#{$width} * 2));
         right: auto;
-        border-right: none;
-        border-top: none;
-        border-bottom: inherit;
-        border-left: inherit;
-        box-shadow: $shadow-left;
+
+        .#{$css-prefix}balloon-arrow-content {
+            transform: translateX($width) rotate(45deg);
+        }
     }
 
-    &.#{$css-prefix}balloon-top-left:after {
-        right: $balloon-size-arrow-margin;
+    &.#{$css-prefix}balloon-top-left .#{$css-prefix}balloon-arrow {
+        right: calc(#{$balloon-size-arrow-margin} - 2px);
         left: auto;
     }
 
-    &.#{$css-prefix}balloon-top-right:after {
+    &.#{$css-prefix}balloon-top-right .#{$css-prefix}balloon-arrow {
+        left: calc(#{$balloon-size-arrow-margin} - 2px);
         right: auto;
-        left: $balloon-size-arrow-margin;
     }
 
-    &.#{$css-prefix}balloon-bottom-left:after {
-        right: $balloon-size-arrow-margin;
+    &.#{$css-prefix}balloon-bottom-left .#{$css-prefix}balloon-arrow {
+        right: calc(#{$balloon-size-arrow-margin} - 2px);
         left: auto;
     }
 
-    &.#{$css-prefix}balloon-bottom-right:after {
-        left: $balloon-size-arrow-margin;
+    &.#{$css-prefix}balloon-bottom-right .#{$css-prefix}balloon-arrow {
+        left: calc(#{$balloon-size-arrow-margin} - 2px);
         right: auto;
     }
 }
 
 .#{$css-prefix}balloon[dir="rtl"] {
     &.#{$css-prefix}balloon-primary {
-        @include balloon-close-rtl(
-            $balloon-size-close-margin-right
-        );
-        @include balloon-arrow-rtl(
-            $balloon-size-arrow-expose-primary
-        );
+        @include balloon-close-rtl($balloon-size-close-margin-right );
+        @include balloon-arrow-rtl($balloon-size-arrow-size );
     }
 
     &.#{$css-prefix}balloon-normal {
-        @include balloon-close-rtl(
-            $balloon-size-close-margin-right
-        );
-        @include balloon-arrow-rtl(
-            $balloon-size-arrow-expose
-        );
+        @include balloon-close-rtl($balloon-size-close-margin-right );
+        @include balloon-arrow-rtl($balloon-size-arrow-size );
     }
 
     /* 带关闭按钮的右侧padding变大 */
@@ -192,6 +257,11 @@
 
     @include tooltip-arrow-rtl($balloon-size-arrow-size);
 
+    // v1 模式下tooltip的rtl arrow位置与类名不匹配，v2需要补充一下
+    &.#{$css-prefix}balloon-tooltip-v2 {
+        @include tooltip-arrow-rtl-v2($balloon-size-arrow-size);
+    }
+
     /* size */
     &.#{$css-prefix}balloon-tooltip-medium {
         @include balloon-size($balloon-tooltip-size-padding-top, $balloon-tooltip-size-padding-left, $balloon-tooltip-size-padding-bottom, $balloon-tooltip-size-padding-right);