feat(Button): add some css variables

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>

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>

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;
 }

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
@@ -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,20 +163,22 @@
   white-space: nowrap;
   text-align: center;
   background-image: none;
-  cursor: pointer;
   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;
 
   /* 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;

src/button/button.ts

@@ -44,17 +44,22 @@ 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`);
       }
       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`);
       }

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}}"

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"

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 {

src/common/template/button.wxml

@@ -9,6 +9,7 @@
     icon="{{icon}}"
     loading="{{loading}}"
     theme="{{theme}}"
+    ghost="{{ghost}}"
     shape="{{shape}}"
     size="{{size}}"
     variant="{{variant}}"

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"