fix: arrow style (#35401)

* fix: arrow style * fix: raise arrow z-index * fix: fix defualt arrow color * fix: mix shadow * chore: code clean * chore: code clean * fix: use fadeout instead * test: fix style lint
ant-design · May 7, 2022 · 7873bf7 · 7873bf7
1 parent 9b56ad8
commit 7873bf7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 12 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -13,6 +13,7 @@
       {
         "ignoreFunctions": [
           "fade",
+          "fadeout",
           "tint",
           "darken",
           "ceil",

diff --git a/components/style/mixins/rounded-arrow.less b/components/style/mixins/rounded-arrow.less
@@ -17,6 +17,10 @@
   @e-y: @f-y + @outer-radius-without-unit * (1 / sqrt(2));
   @f-x: 2 * @width-without-unit + @corner-height;
   @f-y: @width-without-unit - @corner-height;
+  @g-x: @f-x - 1;
+  @g-y: @f-y;
+  @h-x: @a-x;
+  @h-y: @a-y - 1;
 
   border-radius: 0 0 @arrow-border-radius;
   pointer-events: none;
@@ -27,11 +31,13 @@
     left: -@width;
     width: @width * 3;
     height: @width * 3;
-    background: linear-gradient(to left, @bg-color 50%, @bg-color 50%) no-repeat ceil(-@width + 1px)
-      ceil(-@width + 1px); // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
+    background: @bg-color;
+    // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
+    background-repeat: no-repeat;
+    background-position: ceil(-@width + 1px) ceil(-@width + 1px);
     content: '';
     clip-path: path(
-      'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} Z'
+      'M @{a-x} @{a-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{b-x} @{b-y} L @{c-x} @{c-y} A @{inner-radius-without-unit} @{inner-radius-without-unit} 0 0 0 @{d-x} @{d-y} L @{e-x} @{e-y} A @{outer-radius-without-unit} @{outer-radius-without-unit} 0 0 1 @{f-x} @{f-y} L @{g-x} @{g-y} L @{h-x} @{h-y} Z'
     );
   }
 }
diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
@@ -23,6 +23,10 @@
   max-width: @tooltip-max-width;
   visibility: visible;
 
+  &-content {
+    position: relative;
+  }
+
   &-hidden {
     display: none;
   }
@@ -68,6 +72,7 @@
   // Arrows
   &-arrow {
     position: absolute;
+    z-index: 2;
     display: block;
     width: @tooltip-arrow-rotate-width;
     height: @tooltip-arrow-rotate-width;
@@ -76,7 +81,12 @@
     pointer-events: none;
 
     &-content {
-      --antd-arrow-background-color: @tooltip-bg;
+      // Use linear gradient to mix box shadow of tooltip inner
+      --antd-arrow-background-color: linear-gradient(
+        to right bottom,
+        fadeout(@tooltip-bg, 10%),
+        @tooltip-bg
+      );
 
       position: absolute;
       top: 0;
@@ -97,7 +107,8 @@
   &-placement-top &-arrow,
   &-placement-topLeft &-arrow,
   &-placement-topRight &-arrow {
-    bottom: @tooltip-distance - @tooltip-arrow-rotate-width + 0.24px;
+    bottom: 0;
+    transform: translateY(100%);
 
     &-content {
       box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
@@ -107,7 +118,7 @@
 
   &-placement-top &-arrow {
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateY(100%) translateX(-50%);
   }
 
   &-placement-topLeft &-arrow {
@@ -121,7 +132,8 @@
   &-placement-right &-arrow,
   &-placement-rightTop &-arrow,
   &-placement-rightBottom &-arrow {
-    left: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
+    left: 0;
+    transform: translateX(-100%);
 
     &-content {
       box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
@@ -131,7 +143,7 @@
 
   &-placement-right &-arrow {
     top: 50%;
-    transform: translateY(-50%);
+    transform: translateX(-100%) translateY(-50%);
   }
 
   &-placement-rightTop &-arrow {
@@ -145,7 +157,8 @@
   &-placement-left &-arrow,
   &-placement-leftTop &-arrow,
   &-placement-leftBottom &-arrow {
-    right: @tooltip-distance - @tooltip-arrow-rotate-width + 0.08px;
+    right: 0;
+    transform: translateX(100%);
 
     &-content {
       box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
@@ -155,7 +168,7 @@
 
   &-placement-left &-arrow {
     top: 50%;
-    transform: translateY(-50%);
+    transform: translateX(100%) translateY(-50%);
   }
 
   &-placement-leftTop &-arrow {
@@ -169,7 +182,8 @@
   &-placement-bottom &-arrow,
   &-placement-bottomLeft &-arrow,
   &-placement-bottomRight &-arrow {
-    top: @tooltip-distance - @tooltip-arrow-rotate-width + 0.1px;
+    top: 0;
+    transform: translateY(-100%);
 
     &-content {
       box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
@@ -179,7 +193,7 @@
 
   &-placement-bottom &-arrow {
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateY(-100%) translateX(-50%);
   }
 
   &-placement-bottomLeft &-arrow {