feat(Button): support 0.5px border by transform property

src/button/button.less

@@ -1,6 +1,6 @@
 @import '../common/style/index.less';
 
-@button-border-width: var(--td-button-border-width, 1px);
+@button-border-width: var(--td-button-border-width, 4rpx);
 @button-border-radius: var(--td-button-border-radius, @radius-default);
 @button-font-weight: var(--td-button-font-weight, 600);
 
@@ -36,24 +36,28 @@
 @button-default-border-color: var(--td-button-default-border-color, @gray-color-3);
 @button-default-disabled-color: var(--td-button-default-disabled-color, @font-gray-4);
 @button-default-disabled-bg: var(--td-button-default-disabled-bg, @gray-color-2);
+@button-default-disabled-border-color: var(--td-button-default-disabled-border-color, @gray-color-2);
 // primary
 @button-primary-color: var(--td-button-primary-color, @text-anti-primary-color);
 @button-primary-border-color: var(--td-button-primary-border-color, @primary-color);
 @button-primary-bg-color: var(--td-button-primary-bg-color, @primary-color);
 @button-primary-disabled-color: var(--td-button-primary-disabled-color, @text-anti-primary-color);
 @button-primary-disabled-bg: var(--td-button-primary-disabled-bg, @primary-color-3);
+@button-primary-disabled-border-color: var(--td-button-primary-disabled-border-color, @primary-color-3);
 // light
 @button-light-color: var(--td-button-light-color, @primary-color);
 @button-light-border-color: var(--td-button-light-border-color, @primary-color-1);
 @button-light-bg-color: var(--td-button-light-bg-color, @primary-color-1);
 @button-light-disabled-color: var(--td-button-light-disabled-color, @primary-color-3);
 @button-light-disabled-bg: var(--td-button-light-disabled-bg, @primary-color-1);
+@button-light-disabled-border-color: var(--td-button-light-disabled-border-color, @primary-color-1);
 // danger
 @button-danger-color: var(--td-button-danger-color, @text-anti-primary-color);
 @button-danger-border-color: var(--td-button-danger-border-color, @error-color);
 @button-danger-bg-color: var(--td-button-danger-bg-color, @error-color);
 @button-danger-disabled-color: var(--td-button-danger-disabled-color, @text-anti-primary-color);
 @button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @error-color-3);
+@button-danger-disabled-border-color: var(--td-button-danger-disabled-border-color, @error-color-3);
 // primary + outline
 @button-primary-outline-color: var(--td-button-primary-outline-color, @primary-color);
 @button-primary-outline-border-color: var(--td-button-primary-outline-border-color, @button-primary-outline-color);
@@ -110,11 +114,12 @@
 
   .@{button}--size-@{size} {
     font-size: @@fontSize;
-    padding-left: calc(@@padding - @button-border-width);
-    padding-right: calc(@@padding - @button-border-width);
+    padding-left: @@padding;
+    padding-right: @@padding;
     height: @@height;
     line-height: @@height;
-    & .@{prefix}-button__icon {
+
+    & .@{button}__icon {
       font-size: @@iconSize;
     }
   }
@@ -125,22 +130,33 @@
   @bgColor: 'button-@{theme}-bg-color';
   @borderColor: 'button-@{theme}-border-color';
   @disabledColor: 'button-@{theme}-disabled-color';
+  @disabledBorderColor: 'button-@{theme}-disabled-border-color';
   @disabledBgColor: 'button-@{theme}-disabled-bg';
   @activeBgColor: 'button-@{theme}-active-bg-color';
 
   .@{button}--@{theme} {
     color: @@color;
     background-color: @@bgColor;
-    border: @button-border-width solid @@borderColor;
 
     &::after {
-      background-color: @@activeBgColor;
+      border-width: @button-border-width;
+      border-color: @@borderColor;
+    }
+
+    &.@{button}--hover {
+      z-index: 0;
+      &::after {
+        background-color: @@activeBgColor;
+      }
     }
 
     &.@{button}--disabled {
       color: @@disabledColor;
       background-color: @@disabledBgColor;
-      border-color: @@disabledBgColor;
+
+      &::after {
+        border-color: @@disabledBorderColor;
+      }
     }
   }
 }
@@ -176,40 +192,22 @@
   -webkit-appearance: none;
 
   &::after {
-    content: ' ';
-    opacity: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    position: absolute;
-  }
-
-  &:not(.@{button}--disabled):active::after {
-    opacity: 0.1;
+    border-radius: calc(@button-border-radius * 2);
   }
 
   &--text {
     color: @button-default-color;
     background: none;
-    border: 0;
 
     &::after {
-      background-color: @button-text-active-bg-color;
-    }
-
-    &.@{prefix}-button--size-medium {
-      width: auto;
-      height: auto;
-      line-height: normal;
-      padding: 0;
+      border: 0;
     }
 
-    &.@{button}--disabled {
-      color: @button-default-disabled-color;
+    &.@{button}--hover::after {
+      background-color: @button-text-active-bg-color;
     }
 
-    &.@{prefix}-button--primary {
+    &.@{button}--primary {
       color: @button-primary-text-color;
       background: none;
 
@@ -219,7 +217,7 @@
       }
     }
 
-    &.@{prefix}-button--danger {
+    &.@{button}--danger {
       color: @button-danger-text-color;
       background: none;
 
@@ -229,72 +227,114 @@
       }
     }
 
-    &.@{prefix}-button--light {
+    &.@{button}--light {
       color: @button-light-text-color;
       background: none;
     }
+
+    &.@{button}--disabled {
+      color: @button-default-disabled-color;
+    }
   }
 
   &--ghost {
     background-color: transparent;
-    border-color: @button-ghost-border-color;
     color: @button-ghost-color;
 
-    &.@{button}--disabled {
-      color: @button-ghost-disabled-color;
-      border-color: @button-ghost-disabled-color;
+    &::after {
+      border-color: @button-ghost-border-color;
+    }
+
+    &.@{button}--hover::after {
+      background: none;
     }
 
     &.@{button}--primary {
       color: @button-ghost-primary-color;
-      border-color: @button-ghost-primary-border-color;
+
+      &::after {
+        border-color: @button-ghost-primary-border-color;
+      }
     }
 
     &.@{button}--danger {
       color: @button-ghost-danger-color;
-      border-color: @button-ghost-danger-border-color;
+
+      &::after {
+        border-color: @button-ghost-danger-border-color;
+      }
+    }
+
+    &.@{button}--disabled {
+      background-color: transparent;
+      color: @button-ghost-disabled-color;
+
+      &::after {
+        border-color: @button-ghost-disabled-color;
+      }
     }
   }
 
   &--outline {
-    border-color: @button-default-border-color;
     background-color: transparent;
 
     &::after {
+      border-color: @button-default-border-color;
+    }
+
+    &.@{button}--hover::after {
       background-color: @button-outline-active-bg-color;
     }
 
-    &.@{prefix}-button--primary {
+    &.@{button}--primary {
       color: @button-primary-outline-color;
-      border-color: @button-primary-outline-border-color;
+
+      &::after {
+        border-color: @button-primary-outline-border-color;
+      }
 
       &.@{button}--disabled {
         background-color: transparent;
         color: @button-primary-outline-disabled-color;
-        border-color: @button-primary-outline-disabled-color;
+
+        &::after {
+          border-color: @button-primary-outline-disabled-color;
+        }
       }
     }
 
-    &.@{prefix}-button--danger {
+    &.@{button}--danger {
       color: @button-danger-outline-color;
-      border-color: @button-danger-outline-border-color;
+
+      &::after {
+        border-color: @button-danger-outline-border-color;
+      }
 
       &.@{button}--disabled {
         background-color: transparent;
         color: @button-danger-outline-disabled-color;
-        border-color: @button-danger-outline-disabled-color;
+
+        &::after {
+          border-color: @button-danger-outline-disabled-color;
+        }
       }
     }
 
-    &.@{prefix}-button--light {
+    &.@{button}--light {
       color: @button-light-outline-color;
       background-color: @button-light-outline-bg-color;
-      border-color: @button-light-outline-border-color;
+
+      &::after {
+        border-color: @button-light-outline-border-color;
+      }
 
       &.@{button}--disabled {
         background-color: transparent;
         color: @button-light-outline-disabled-color;
-        border-color: @button-light-outline-disabled-color;
+
+        &::after {
+          border-color: @button-light-outline-disabled-color;
+        }
       }
     }
   }
@@ -303,25 +343,37 @@
     background-color: transparent;
     border-style: dashed;
 
-    &.@{prefix}-button--primary {
+    &.@{button}--primary {
       color: @button-primary-dashed-color;
-      border-color: @button-primary-dashed-border-color;
+
+      &::after {
+        border-color: @button-primary-dashed-border-color;
+      }
 
       &.@{button}--disabled {
         background-color: transparent;
         color: @button-primary-dashed-disabled-color;
-        border-color: @button-primary-dashed-disabled-color;
+
+        &::after {
+          border-color: @button-primary-dashed-disabled-color;
+        }
       }
     }
 
-    &.@{prefix}-button--danger {
+    &.@{button}--danger {
       color: @button-danger-dashed-color;
-      border-color: @button-danger-dashed-border-color;
+
+      &::after {
+        border-color: @button-danger-dashed-border-color;
+      }
 
       &.@{button}--disabled {
         background-color: transparent;
         color: @button-danger-dashed-disabled-color;
-        border-color: @button-danger-dashed-disabled-color;
+
+        &::after {
+          border-color: @button-danger-dashed-disabled-color;
+        }
       }
     }
   }
@@ -337,7 +389,7 @@
 
   // 圆角长方形
   &--round {
-    &.@{prefix}-button--size {
+    &.@{button}--size {
       &-large {
         border-radius: calc(@button-large-height / 2);
       }
@@ -360,7 +412,7 @@
   &--square {
     padding: 0;
 
-    &.@{prefix}-button--size {
+    &.@{button}--size {
       &-large {
         width: @button-large-height;
       }
@@ -383,7 +435,7 @@
   &--circle {
     padding: 0;
 
-    &.@{prefix}-button--size {
+    &.@{button}--size {
       &-large {
         border-radius: 50%;
         width: @button-large-height;
@@ -415,10 +467,6 @@
     cursor: not-allowed;
   }
 
-  &.button-hover:after {
-    border-radius: 8rpx;
-  }
-
   &__loading {
     &--wrapper {
       display: flex;
@@ -430,4 +478,8 @@
       color: @white-color-1;
     }
   }
+
+  &.@{button}--hover::after {
+    z-index: -1;
+  }
 }

src/button/button.wxml

@@ -12,7 +12,7 @@
   hover-stay-time="{{hoverStayTime}}"
   lang="{{lang}}"
   session-from="{{sessionFrom}}"
-  hover-class="button-hover"
+  hover-class="{{disabled ? '' : classPrefix + '--hover'}}"
   send-message-title="{{sendMessageTitle}}"
   send-message-path="{{sendMessagePath}}"
   send-message-img="{{sendMessageImg}}"

src/calendar/__test__/__snapshots__/index.test.js.snap

@@ -755,7 +755,7 @@ exports[`calendar :base 1`] = `
                   class="t-button t-class t-button--primary t-button--size-medium t-button--rectangle t-button--base t-button--block"
                   data-custom="{{null}}"
                   formType=""
-                  hoverClass="button-hover"
+                  hoverClass="t-button--hover"
                   hoverStartTime="{{0}}"
                   hoverStayTime="{{0}}"
                   hoverStopPropagation="{{false}}"

src/dialog/README.md

@@ -61,10 +61,10 @@ isComponent: true
 -- | -- | -- | -- | --
 actions | Array / Slot | - | 操作栏。TS 类型：`Array<ButtonProps>`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
 button-layout | String | horizontal | 多按钮排列方式。可选项：horizontal/vertical | N
-cancel-btn | String / Object / Slot | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
+cancel-btn | String / Object / Slot | - | 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制取消事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/dialog/type.ts) | N
 close-btn | Boolean / Object | false | `0.31.0`。是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；使用 Object 时透传至图标组件 | N
 close-on-overlay-click | Boolean | undefined | 点击蒙层时是否触发关闭事件 | N
-confirm-btn | String / Object / Slot | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 | N
+confirm-btn | String / Object / Slot | - | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 Slot 自定义按钮时，需自行控制确认事件 | N
 content | String / Slot | - | 内容 | N
 custom-style | String | - | `0.25.0`。自定义组件样式 | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、组件内容部分、确认按钮、取消按钮 等元素类名。`['t-class', 't-class-content', 't-class-confirm', 't-class-cancel']` | N