fix(popper-arrow): [tooltip, popover,dropdown] fix arrow's z-index, a…

…nd remove popper-arrow class from popover,dropdown (#2446) * fix(popper-arrow): fix arrow's z-index, and remove popper-arrow class from popover,dropdown * fix(popover): remove extra cssvars * fix(user-contact): add margin:8px
opentiny · Nov 4, 2024 · d937ed2 · d937ed2
1 parent 2e6e2f8
commit d937ed2
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 265 deletions.
diff --git a/packages/theme/src/base/reset.less b/packages/theme/src/base/reset.less
@@ -152,18 +152,6 @@
     display: none;
   }
 
-  .popper__arrow {
-    &,
-    &:after {
-      position: absolute;
-      display: block;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-
   @media (min-width: 768px) {
     ::-webkit-scrollbar {
       width: var(--tv-size-scrollbar-width);
@@ -188,3 +176,50 @@
     }
   }
 }
+
+.tiny-popper,
+.tiny-tooltip__popper {
+  .popper__arrow {
+    position: absolute;
+    display: block;
+    // 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width.
+    width: 12px;
+    height: 20px;
+    background-color: #fff; // popover,dropdown 都是只有白色。 tooltip的颜色是自己覆盖的
+    transform: rotateZ(45deg);
+    border-radius: 2px;
+    z-index: -1;
+  }
+
+  &[x-placement^='top'] {
+    margin-bottom: 12px;
+
+    .popper__arrow {
+      bottom: -7px;
+    }
+  }
+
+  &[x-placement^='bottom'] {
+    margin-top: 12px;
+
+    .popper__arrow {
+      top: -7px;
+    }
+  }
+
+  &[x-placement^='right'] {
+    margin-left: 12px;
+
+    .popper__arrow {
+      left: -3px;
+    }
+  }
+
+  &[x-placement^='left'] {
+    margin-right: 12px;
+
+    .popper__arrow {
+      right: -3px;
+    }
+  }
+}
diff --git a/packages/theme/src/dropdown-menu/index.less b/packages/theme/src/dropdown-menu/index.less
@@ -45,103 +45,4 @@
       margin-left: var(--tv-DropdownItem-label-margin-left);
     }
   }
-
-  /* 箭头 */
-  &.@{css-prefix}popper .popper__arrow,
-  &.@{css-prefix}popper .popper__arrow:after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  &.@{css-prefix}popper .popper__arrow {
-    border-width: 8px;
-    filter: drop-shadow(var(--tv-DropdownMenu-box-shadow));
-  }
-
-  &.@{css-prefix}popper .popper__arrow::after {
-    content: ' ';
-    border-width: 8px;
-  }
-
-  &.@{css-prefix}popper[x-placement^='top'] {
-    &:has(.popper__arrow) {
-      margin-bottom: 12px;
-    }
-  }
-
-  &.@{css-prefix}popper[x-placement^='top'] .popper__arrow {
-    bottom: -8px;
-    left: 50%;
-    margin-right: 3px;
-
-    border-bottom-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='top'] .popper__arrow:after {
-    bottom: 1px;
-    margin-left: -6px;
-    border-top-color: #fff;
-    border-bottom-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='bottom'] {
-    &:has(.popper__arrow) {
-      margin-top: 12px;
-    }
-  }
-
-  &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow {
-    top: -8px;
-    left: 50%;
-    margin-right: 3px;
-    border-top-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow:after {
-    top: 1px;
-    margin-left: -8px;
-    border-top-width: 0;
-    border-bottom-color: #fff;
-  }
-
-  &.@{css-prefix}popper[x-placement^='right'] {
-    margin-left: 12px;
-  }
-
-  &.@{css-prefix}popper[x-placement^='right'] .popper__arrow {
-    top: 50%;
-    left: -8px;
-    margin-bottom: 3px;
-    border-left-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='right'] .popper__arrow:after {
-    bottom: -8px;
-    left: 1px;
-    border-right-color: #fff;
-    border-left-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='left'] {
-    margin-right: 12px;
-  }
-
-  &.@{css-prefix}popper[x-placement^='left'] .popper__arrow {
-    top: 50%;
-    right: -8px;
-    margin-bottom: 3px;
-    border-right-width: 0;
-  }
-
-  &.@{css-prefix}popper[x-placement^='left'] .popper__arrow:after {
-    right: 1px;
-    bottom: -8px;
-    margin-left: -8px;
-    border-right-width: 0;
-    border-left-color: #fff;
-  }
 }
diff --git a/packages/theme/src/popover/index.less b/packages/theme/src/popover/index.less
@@ -32,105 +32,6 @@
   box-shadow: var(--tv-Popover-box-shadow);
   word-break: break-all;
 
-  .popper__arrow,
-  .popper__arrow:after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  .popper__arrow,
-  .@{popper-prefix-cls} .popper__arrow {
-    border-width: 6px;
-    -webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
-    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
-  }
-
-  .popper__arrow:after {
-    content: ' ';
-    border-width: 6px;
-  }
-
-  &[x-placement^='top'] {
-    margin-bottom: var(--tv-Popover-placement-margin-y);
-
-    .popper__arrow {
-      bottom: -8px;
-      left: 50%;
-      border-top-color: transparent;
-      border-bottom-width: 0;
-      border-top-width: 8px;
-
-      &:after {
-        bottom: 1px;
-        margin-left: -6px;
-        border-top-color: var(--tv-Popover-placement-arrow-after-border-color);
-        border-bottom-width: 0;
-      }
-    }
-  }
-
-  &[x-placement^='bottom'] {
-    margin-top: var(--tv-Popover-placement-margin-y);
-
-    .popper__arrow {
-      top: -8px;
-      left: 50%;
-      border-top-width: 0;
-      border-bottom-color: transparent;
-      border-bottom-width: 8px;
-
-      &:after {
-        top: 1px;
-        margin-left: -6px;
-        border-top-width: 0;
-        border-bottom-color: var(--tv-Popover-placement-arrow-after-border-color);
-      }
-    }
-  }
-
-  &[x-placement^='right'] {
-    margin-left: var(--tv-Popover-placement-margin-x);
-
-    .popper__arrow {
-      top: 50%;
-      left: -8px;
-      border-right-color: transparent;
-      border-left-width: 0;
-      border-right-width: 8px;
-
-      &:after {
-        bottom: -6px;
-        left: 1px;
-        border-right-color: var(--tv-Popover-placement-arrow-after-border-color);
-        border-left-width: 0;
-      }
-    }
-  }
-
-  &[x-placement^='left'] {
-    margin-right: var(--tv-Popover-placement-margin-x);
-
-    .popper__arrow {
-      top: 50%;
-      right: -8px;
-      border-right-width: 0;
-      border-left-color: transparent;
-      border-left-width: 8px;
-
-      &:after {
-        right: 1px;
-        bottom: -6px;
-        margin-left: -6px;
-        border-right-width: 0;
-        border-left-color: var(--tv-Popover-placement-arrow-after-border-color);
-      }
-    }
-  }
-
   .@{popover-prefix-cls}__plain {
     padding: 18px 20px;
   }

diff --git a/packages/theme/src/popover/vars.less b/packages/theme/src/popover/vars.less
@@ -27,12 +27,6 @@
   --tv-Popover-title-font-size: var(--tv-font-size-lg);
   // 弹框标题字重
   --tv-Popover-title-weight: var(--tv-font-weight-bold);
-  // 弹出框垂直外边距
-  --tv-Popover-placement-margin-y: var(--tv-space-lg);
-  // 弹出框小箭头水平外边距
-  --tv-Popover-placement-margin-x: var(--tv-space-lg);
-  // 弹框小箭头填充色
-  --tv-Popover-placement-arrow-after-border-color: var(--tv-color-bg-secondary);
   // 弹框阴影
   --tv-Popover-box-shadow: var(--tv-shadow-2-down);
   // 弹框垂直内边距

diff --git a/packages/theme/src/tooltip/index.less b/packages/theme/src/tooltip/index.less
@@ -44,49 +44,6 @@
     word-wrap: break-word;
     box-shadow: var(--tv-Tooltip-box-shadow);
 
-    .popper__arrow {
-      position: absolute;
-      display: block;
-      // 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width.
-      width: 12px;
-      height: 20px;
-      background-color: var(--tv-Tooltip-popper-border-color);
-      transform: rotateZ(45deg);
-      border-radius: 2px;
-    }
-
-    &[x-placement^='top'] {
-      margin-bottom: 12px;
-
-      .popper__arrow {
-        bottom: -7px;
-      }
-    }
-
-    &[x-placement^='bottom'] {
-      margin-top: 12px;
-
-      .popper__arrow {
-        top: -7px;
-      }
-    }
-
-    &[x-placement^='right'] {
-      margin-left: 12px;
-
-      .popper__arrow {
-        left: -3px;
-      }
-    }
-
-    &[x-placement^='left'] {
-      margin-right: 12px;
-
-      .popper__arrow {
-        right: -3px;
-      }
-    }
-
     &.is-normal {
       .tooltip-type(
         var(--tv-Tooltip-popper-normal-text-color),
@@ -133,8 +90,11 @@
     }
 
     &.is-dark {
-      background: var(--tv-Tooltip-popper-dark-bg-color);
-      color: var(--tv-Tooltip-popper-dark-text-color);
+      .tooltip-type(
+        var(--tv-Tooltip-popper-dark-text-color),
+        var(--tv-Tooltip-popper-dark-bg-color),
+        var(--tv-Tooltip-popper-dark-border-color)
+      );
     }
 
     &.is-light {

diff --git a/packages/theme/src/tooltip/vars.less b/packages/theme/src/tooltip/vars.less
@@ -11,8 +11,6 @@
 */
 
 .inject-Tooltip-vars() {
-  // 弹框三角默认边框色
-  --tv-Tooltip-popper-border-color: var(--tv-color-border-active);
   // 弹框字体行高
   --tv-Tooltip-popper-font-line-height: var(--tv-line-height-number);
   // 悬浮弹出框圆角
@@ -59,9 +57,11 @@
   --tv-Tooltip-popper-dark-bg-color: var(--tv-color-bg-primary);
   // dark主题弹框文本色
   --tv-Tooltip-popper-dark-text-color: var(--tv-color-text-white);
+  // dark主题|禁用时弹框边框色
+  --tv-Tooltip-popper-dark-border-color: var(--tv-color-border-hover);
+
   // light主题弹框背景色
   --tv-Tooltip-popper-light-bg-color: var(--tv-color-bg-secondary);
-
   // light主题|禁用弹框文本色
   --tv-Tooltip-popper-light-text-color: var(--tv-color-text);
   // light主题|禁用时弹框边框色

diff --git a/packages/theme/src/user-contact/index.less b/packages/theme/src/user-contact/index.less
@@ -102,7 +102,7 @@
   & &__role {
     display: inline-block;
     color: var(--tv-UserContact-role-info-text-color);
-    margin-left: 0;
+    margin-left: 8px;
     vertical-align: middle;
     font-size: var(--tv-UserContact-role-info-font-size);
     line-height: 1.5;