From 425886be0a524da9ebb63746db671efabbf02662 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Wed, 4 Jan 2023 23:08:56 +0800
Subject: [PATCH 1/4] feat(Button): add some css variables

---
 src/button/button.less          | 54 ++++++++++++++++++++++++++-------
 src/button/button.ts            | 11 +++++--
 src/button/button.wxml          |  2 +-
 src/calendar/calendar.less      |  5 ++-
 src/common/template/button.wxml |  1 +
 5 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/button/button.less b/src/button/button.less
index cf1f25bce..57741aa11 100644
--- a/src/button/button.less
+++ b/src/button/button.less
@@ -56,18 +56,24 @@
 @button-danger-disabled-bg: var(--td-button-danger-disabled-bg, @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);
 @button-primary-outline-disabled-color: var(--td-button-primary-outline-disabled-color, @primary-color-3);
 // danger + outline
 @button-danger-outline-color: var(--td-button-danger-outline-color, @error-color);
+@button-danger-outline-border-color: var(--td-button-danger-outline-border-color, @button-danger-outline-color);
 @button-danger-outline-disabled-color: var(--td-button-danger-outline-disabled-color, @button-danger-disabled-color);
 // light + outline
 @button-light-outline-color: var(--td-button-light-outline-color, @primary-color);
+@button-light-outline-border-color: var(--td-button-light-outline-border-color, @button-light-outline-color);
+@button-light-outline-bg-color: var(--td-button-light-outline-bg-color, @primary-color-1);
 @button-light-outline-disabled-color: var(--td-button-light-outline-disabled-color, @primary-color-3);
 // primary + dashed
 @button-primary-dashed-color: var(--td-button-primary-dashed-color, @primary-color);
+@button-primary-dashed-border-color: var(--td-button-primary-dashed-border-color, @button-primary-dashed-color);
 @button-primary-dashed-disabled-color: var(--td-button-primary-dashed-disabled-color, @primary-color-3);
 // danger + dashed
 @button-danger-dashed-color: var(--td-button-danger-dashed-color, @error-color);
+@button-danger-dashed-border-color: var(--td-button-danger-dashed-border-color, @button-danger-dashed-color);
 @button-danger-dashed-disabled-color: var(--td-button-danger-dashed-disabled-color, @button-danger-disabled-color);
 // primary + text
 @button-primary-text-color: var(--td-button-primary-text-color, @primary-color);
@@ -86,6 +92,14 @@
 @button-ghost-danger-color: var(--td-button-ghost-danger-color, @error-color);
 @button-ghost-danger-border-color: var(--td-button-ghost-danger-border-color, @error-color);
 
+// 激活态背景色
+@button-default-active-bg-color: var(--td-button-default-active-bg-color, @gray-color-5);
+@button-light-active-bg-color: var(--td-button-light-active-bg-color, @primary-color-2);
+@button-primary-active-bg-color: var(--td-button-primary-active-bg-color, @primary-color-9);
+@button-danger-active-bg-color: var(--td-button-danger-active-bg-color, @error-color-7);
+@button-outline-active-bg-color: var(--td-button-outline-active-bg-color, @gray-color-1);
+@button-text-active-bg-color: var(--td-button-text-active-bg-color, @primary-color-1);
+
 @button: ~'@{prefix}-button';
 
 .button-size(@size) {
@@ -112,11 +126,16 @@
   @borderColor: 'button-@{theme}-border-color';
   @disabledColor: 'button-@{theme}-disabled-color';
   @disabledBgColor: 'button-@{theme}-disabled-bg';
+  @activeBgColor: 'button-@{theme}-active-bg-color';
 
   .@{button}--@{theme} {
     color: @@color;
     background-color: @@bgColor;
-    border: 1px solid @@borderColor;
+    border: @button-border-width solid @@borderColor;
+
+    &::after {
+      background-color: @@activeBgColor;
+    }
 
     &.@{button}--disabled {
       color: @@disabledColor;
@@ -144,7 +163,6 @@
   white-space: nowrap;
   text-align: center;
   background-image: none;
-  cursor: pointer;
   transition: all 0.3s;
   user-select: none;
   touch-action: manipulation;
@@ -152,12 +170,15 @@
   outline: none;
   font-family: PingFang SC, Microsoft YaHei, Arial Regular;
   font-weight: @button-font-weight;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
 
   /* stylelint-disable-next-line */
   -webkit-appearance: none;
 
   &::after {
-    background-color: #000;
     content: ' ';
     opacity: 0;
     top: 0;
@@ -176,6 +197,10 @@
     background: none;
     border: 0;
 
+    &::after {
+      background-color: @button-text-active-bg-color;
+    }
+
     &.@{prefix}-button--size-medium {
       width: auto;
       height: auto;
@@ -215,8 +240,8 @@
 
   &--ghost {
     background-color: transparent;
-    border: 1px solid @button-ghost-color;
-    color: @button-ghost-border-color;
+    border-color: @button-ghost-border-color;
+    color: @button-ghost-color;
 
     &.@{button}--disabled {
       color: @button-ghost-disabled-color;
@@ -238,9 +263,13 @@
     border-color: @button-default-border-color;
     background-color: transparent;
 
+    &::after {
+      background-color: @button-outline-active-bg-color;
+    }
+
     &.@{prefix}-button--primary {
       color: @button-primary-outline-color;
-      border-color: @button-primary-outline-color;
+      border-color: @button-primary-outline-border-color;
 
       &.@{button}--disabled {
         background-color: transparent;
@@ -251,7 +280,7 @@
 
     &.@{prefix}-button--danger {
       color: @button-danger-outline-color;
-      border-color: @button-danger-outline-color;
+      border-color: @button-danger-outline-border-color;
 
       &.@{button}--disabled {
         background-color: transparent;
@@ -261,8 +290,9 @@
     }
 
     &.@{prefix}-button--light {
-      background-color: @button-light-bg-color;
-      border-color: @button-light-outline-color;
+      color: @button-light-outline-color;
+      background-color: @button-light-outline-bg-color;
+      border-color: @button-light-outline-border-color;
 
       &.@{button}--disabled {
         background-color: transparent;
@@ -278,7 +308,8 @@
 
     &.@{prefix}-button--primary {
       color: @button-primary-dashed-color;
-      border-color: @button-primary-dashed-color;
+      border-color: @button-primary-dashed-border-color;
+
       &.@{button}--disabled {
         background-color: transparent;
         color: @button-primary-dashed-disabled-color;
@@ -288,7 +319,8 @@
 
     &.@{prefix}-button--danger {
       color: @button-danger-dashed-color;
-      border-color: @button-danger-dashed-color;
+      border-color: @button-danger-dashed-border-color;
+
       &.@{button}--disabled {
         background-color: transparent;
         color: @button-danger-dashed-disabled-color;
diff --git a/src/button/button.ts b/src/button/button.ts
index 1e6dbdcc8..73bb6a2db 100644
--- a/src/button/button.ts
+++ b/src/button/button.ts
@@ -44,9 +44,14 @@ export default class Button extends SuperComponent {
 
   methods = {
     setClass() {
-      const classList = [name, `${prefix}-class`, `${name}--${this.data.theme}`, `${name}--size-${this.data.size}`];
+      const classList = [
+        name,
+        `${prefix}-class`,
+        `${name}--${this.data.theme || 'default'}`,
+        `${name}--size-${this.data.size || 'medium'}`,
+      ];
 
-      classList.push(`${name}--${this.data.shape}`);
+      classList.push(`${name}--${this.data.shape || 'rectangle'}`);
 
       if (this.data.block) {
         classList.push(`${name}--block`);
@@ -54,7 +59,7 @@ export default class Button extends SuperComponent {
       if (this.data.disabled) {
         classList.push(`${name}--disabled`);
       }
-      classList.push(`${name}--${this.data.variant}`);
+      classList.push(`${name}--${this.data.variant || 'base'}`);
       if (this.data.ghost) {
         classList.push(`${name}--ghost`);
       }
diff --git a/src/button/button.wxml b/src/button/button.wxml
index 7cd74ca32..422402120 100644
--- a/src/button/button.wxml
+++ b/src/button/button.wxml
@@ -4,7 +4,7 @@
 <button
   style="{{ customStyle }}"
   data-custom="{{ customDataset }}"
-  class="{{className}} {{prefix}}-class"
+  class="{{className}}"
   form-type="{{type}}"
   open-type="{{disabled ? '' : openType}}"
   hover-stop-propagation="{{hoverStopPropagation}}"
diff --git a/src/calendar/calendar.less b/src/calendar/calendar.less
index 18eda5253..0aafcc7c3 100644
--- a/src/calendar/calendar.less
+++ b/src/calendar/calendar.less
@@ -95,8 +95,11 @@
       height: 120rpx;
       line-height: 48rpx;
       font-weight: 600;
-      cursor: pointer;
       margin-top: 16rpx;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+      -webkit-user-select: none;
+      user-select: none;
 
       &-prefix,
       &-suffix {
diff --git a/src/common/template/button.wxml b/src/common/template/button.wxml
index 06bd81c23..7bc9b0c98 100644
--- a/src/common/template/button.wxml
+++ b/src/common/template/button.wxml
@@ -9,6 +9,7 @@
     icon="{{icon}}"
     loading="{{loading}}"
     theme="{{theme}}"
+    ghost="{{ghost}}"
     shape="{{shape}}"
     size="{{size}}"
     variant="{{variant}}"

From 27a37e104bb98ea8875f4a282dda74712f12e24d Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Wed, 4 Jan 2023 23:09:57 +0800
Subject: [PATCH 2/4] test: update snapshots

---
 src/button/_example/icon-btn/index.wxml               | 10 +++-------
 src/button/_example/icon-btn/index.wxss               | 11 +++++------
 src/button/button.less                                |  2 +-
 .../__test__/__snapshots__/index.test.js.snap         |  2 +-
 src/sticky/__test__/__snapshots__/index.test.js.snap  |  8 ++++----
 5 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/button/_example/icon-btn/index.wxml b/src/button/_example/icon-btn/index.wxml
index 8eaa3ef30..1f7e7a605 100644
--- a/src/button/_example/icon-btn/index.wxml
+++ b/src/button/_example/icon-btn/index.wxml
@@ -1,9 +1,5 @@
 <view class="button-example">
-  <t-button theme="primary" icon="app" content="填充按钮"></t-button>
-  <t-button theme="primary" icon="chevron-left" shape="square" aria-label="返回"></t-button>
-</view>
-
-<view class="button-example">
-  <t-button theme="primary" loading>加载中...</t-button>
-  <t-button theme="primary" shape="square" loading></t-button>
+  <t-button theme="primary" icon="app" content="填充按钮" size="large"></t-button>
+  <t-button theme="primary" size="large" loading>加载中</t-button>
+  <t-button theme="primary" icon="chevron-left" shape="square" size="large" aria-label="返回"></t-button>
 </view>
diff --git a/src/button/_example/icon-btn/index.wxss b/src/button/_example/icon-btn/index.wxss
index 161fdbdd7..c8c506400 100644
--- a/src/button/_example/icon-btn/index.wxss
+++ b/src/button/_example/icon-btn/index.wxss
@@ -1,11 +1,10 @@
 .button-example {
   margin: 0 32rpx;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32rpx;
 }
 
-.button-example t-button + t-button {
-  margin-left: 32rpx;
-}
-
-.button-example:not(:first-child) {
-  margin-top: 32rpx;
+.button-example:not(:last-child) {
+  margin-bottom: 32rpx;
 }
diff --git a/src/button/button.less b/src/button/button.less
index 57741aa11..404d26c4e 100644
--- a/src/button/button.less
+++ b/src/button/button.less
@@ -33,7 +33,7 @@
 // default
 @button-default-color: var(--td-button-default-color, @font-gray-1);
 @button-default-bg-color: var(--td-button-default-bg-color, @gray-color-3);
-@button-default-border-color: var(--td-button-default-border-color, @gray-color-4);
+@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);
 // primary
diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index 67c893bbb..452beb904 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -752,7 +752,7 @@ exports[`calendar :base 1`] = `
                 <wx-button
                   appParameter=""
                   ariaLabel=""
-                  class="t-button t-class t-button--primary t-button--size- t-button-- t-button--block t-button-- t-class"
+                  class="t-button t-class t-button--primary t-button--size-medium t-button--rectangle t-button--block t-button--base"
                   data-custom="{{null}}"
                   formType=""
                   hoverClass="button-hover"
diff --git a/src/sticky/__test__/__snapshots__/index.test.js.snap b/src/sticky/__test__/__snapshots__/index.test.js.snap
index dcc9290fc..90bd53518 100644
--- a/src/sticky/__test__/__snapshots__/index.test.js.snap
+++ b/src/sticky/__test__/__snapshots__/index.test.js.snap
@@ -23,7 +23,7 @@ exports[`Sticky Props :base 1`] = `
             <wx-button
               appParameter=""
               ariaLabel=""
-              class="t-button t-class t-button--default t-button--size-medium t-button--rectangle t-button--base t-class"
+              class="t-button t-class t-button--default t-button--size-medium t-button--rectangle t-button--base"
               data-custom="{{null}}"
               formType=""
               hoverClass="button-hover"
@@ -76,7 +76,7 @@ exports[`Sticky Props :base 1`] = `
             <wx-button
               appParameter=""
               ariaLabel=""
-              class="t-button t-class t-button--default t-button--size-medium t-button--rectangle t-button--base t-class"
+              class="t-button t-class t-button--default t-button--size-medium t-button--rectangle t-button--base"
               data-custom="{{null}}"
               formType=""
               hoverClass="button-hover"
@@ -129,7 +129,7 @@ exports[`Sticky Props :base 1`] = `
             <wx-button
               appParameter=""
               ariaLabel=""
-              class="t-button t-class t-button--default t-button--size-medium t-button--rectangle t-button--base t-class"
+              class="t-button t-class t-button--default t-button--size-medium t-button--rectangle t-button--base"
               data-custom="{{null}}"
               formType=""
               hoverClass="button-hover"
@@ -184,7 +184,7 @@ exports[`Sticky Props :base 1`] = `
               <wx-button
                 appParameter=""
                 ariaLabel=""
-                class="t-button t-class t-button--default t-button--size-medium t-button--rectangle t-button--base t-class"
+                class="t-button t-class t-button--default t-button--size-medium t-button--rectangle t-button--base"
                 data-custom="{{null}}"
                 formType=""
                 hoverClass="button-hover"

From 18e877ae6e9dcd2a671c3e67e492d43ba1d9e31d Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Thu, 5 Jan 2023 17:21:47 +0800
Subject: [PATCH 3/4] test: update snapshots

---
 .../__test__/__snapshots__/demo.test.js.snap   | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/button/__test__/__snapshots__/demo.test.js.snap b/src/button/__test__/__snapshots__/demo.test.js.snap
index 09c93bd4e..38e57e77d 100644
--- a/src/button/__test__/__snapshots__/demo.test.js.snap
+++ b/src/button/__test__/__snapshots__/demo.test.js.snap
@@ -120,27 +120,21 @@ exports[`Button Button icon-btn demo works fine 1`] = `
     <t-button
       content="填充按钮"
       icon="app"
+      size="large"
       theme="primary"
     />
-    <t-button
-      ariaLabel="返回"
-      icon="chevron-left"
-      shape="square"
-      theme="primary"
-    />
-  </wx-view>
-  <wx-view
-    class="button-example"
-  >
     <t-button
       loading="{{true}}"
+      size="large"
       theme="primary"
     >
-      加载中...
+      加载中
     </t-button>
     <t-button
-      loading="{{true}}"
+      ariaLabel="返回"
+      icon="chevron-left"
       shape="square"
+      size="large"
       theme="primary"
     />
   </wx-view>

From 34606c3e0dbe22ed9e2baa7e03cc53fe57578ab9 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Thu, 5 Jan 2023 18:29:58 +0800
Subject: [PATCH 4/4] fix: fix cr

---
 src/button/button.less                                 | 7 ++-----
 src/button/button.ts                                   | 5 ++---
 src/calendar/__test__/__snapshots__/index.test.js.snap | 2 +-
 src/calendar/calendar.less                             | 6 ++----
 src/common/style/mixins/_cursor.less                   | 6 ++++++
 src/common/style/mixins/_index.less                    | 1 +
 6 files changed, 14 insertions(+), 13 deletions(-)
 create mode 100644 src/common/style/mixins/_cursor.less

diff --git a/src/button/button.less b/src/button/button.less
index 404d26c4e..5181333a2 100644
--- a/src/button/button.less
+++ b/src/button/button.less
@@ -164,16 +164,13 @@
   text-align: center;
   background-image: none;
   transition: all 0.3s;
-  user-select: none;
   touch-action: manipulation;
   border-radius: @button-border-radius;
   outline: none;
   font-family: PingFang SC, Microsoft YaHei, Arial Regular;
   font-weight: @button-font-weight;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-user-select: none;
-  user-select: none;
+
+  .cursor-pointer();
 
   /* stylelint-disable-next-line */
   -webkit-appearance: none;
diff --git a/src/button/button.ts b/src/button/button.ts
index 73bb6a2db..1e6d081fd 100644
--- a/src/button/button.ts
+++ b/src/button/button.ts
@@ -49,17 +49,16 @@ export default class Button extends SuperComponent {
         `${prefix}-class`,
         `${name}--${this.data.theme || 'default'}`,
         `${name}--size-${this.data.size || 'medium'}`,
+        `${name}--${this.data.shape || 'rectangle'}`,
+        `${name}--${this.data.variant || 'base'}`,
       ];
 
-      classList.push(`${name}--${this.data.shape || 'rectangle'}`);
-
       if (this.data.block) {
         classList.push(`${name}--block`);
       }
       if (this.data.disabled) {
         classList.push(`${name}--disabled`);
       }
-      classList.push(`${name}--${this.data.variant || 'base'}`);
       if (this.data.ghost) {
         classList.push(`${name}--ghost`);
       }
diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
index 452beb904..6feb49629 100644
--- a/src/calendar/__test__/__snapshots__/index.test.js.snap
+++ b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -752,7 +752,7 @@ exports[`calendar :base 1`] = `
                 <wx-button
                   appParameter=""
                   ariaLabel=""
-                  class="t-button t-class t-button--primary t-button--size-medium t-button--rectangle t-button--block t-button--base"
+                  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"
diff --git a/src/calendar/calendar.less b/src/calendar/calendar.less
index 0aafcc7c3..c27331912 100644
--- a/src/calendar/calendar.less
+++ b/src/calendar/calendar.less
@@ -96,10 +96,8 @@
       line-height: 48rpx;
       font-weight: 600;
       margin-top: 16rpx;
-      cursor: pointer;
-      -webkit-tap-highlight-color: transparent;
-      -webkit-user-select: none;
-      user-select: none;
+
+      .cursor-pointer();
 
       &-prefix,
       &-suffix {
diff --git a/src/common/style/mixins/_cursor.less b/src/common/style/mixins/_cursor.less
new file mode 100644
index 000000000..c1e5882df
--- /dev/null
+++ b/src/common/style/mixins/_cursor.less
@@ -0,0 +1,6 @@
+.cursor-pointer() {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+}
diff --git a/src/common/style/mixins/_index.less b/src/common/style/mixins/_index.less
index 9f14ca94a..17afe5fe4 100644
--- a/src/common/style/mixins/_index.less
+++ b/src/common/style/mixins/_index.less
@@ -1,3 +1,4 @@
 @import './_clearfix.less';
 @import './_hairline.less';
 @import './_ellipsis.less';
+@import './_cursor.less';