fix(Button): fix style errors when using shape attribute (#1491)

Tencent · Jan 12, 2023 · 538b193 · 538b193
1 parent 98de808
commit 538b193
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 40 deletions.
diff --git a/src/button/__test__/__snapshots__/demo.test.js.snap b/src/button/__test__/__snapshots__/demo.test.js.snap
@@ -225,7 +225,6 @@ exports[`Button Button shape demo works fine 1`] = `
   </wx-view>
   <t-button
     block="{{true}}"
-    shape="round"
     size="large"
     tClass="external-class"
     theme="primary"

diff --git a/src/button/_example/shape/index.wxml b/src/button/_example/shape/index.wxml
@@ -5,4 +5,4 @@
   <t-button theme="primary" size="large" icon="chevron-left" shape="circle" aria-label="返回"></t-button>
 </view>
 
-<t-button theme="primary" size="large" shape="round" block t-class="external-class">填充按钮</t-button>
+<t-button theme="primary" size="large" block t-class="external-class">填充按钮</t-button>
diff --git a/src/button/button.less b/src/button/button.less
@@ -389,21 +389,35 @@
 
   // 圆角长方形
   &--round {
-    &.@{button}--size {
-      &-large {
-        border-radius: calc(@button-large-height / 2);
+    &.@{button}--size-large {
+      border-radius: calc(@button-large-height / 2);
+
+      &::after {
+        border-radius: @button-large-height;
       }
+    }
+
+    &.@{button}--size-medium {
+      border-radius: calc(@button-medium-height / 2);
 
-      &-medium {
-        border-radius: calc(@button-medium-height / 2);
+      &::after {
+        border-radius: @button-medium-height;
       }
+    }
 
-      &-small {
-        border-radius: calc(@button-small-height / 2);
+    &.@{button}--size-small {
+      border-radius: calc(@button-small-height / 2);
+
+      &::after {
+        border-radius: @button-small-height;
       }
+    }
+
+    &.@{button}--size-extra-small {
+      border-radius: calc(@button-extra-small-height / 2);
 
-      &-extra-small {
-        border-radius: calc(28px / 2);
+      &::after {
+        border-radius: @button-extra-small-height;
       }
     }
   }
@@ -412,48 +426,57 @@
   &--square {
     padding: 0;
 
-    &.@{button}--size {
-      &-large {
-        width: @button-large-height;
-      }
+    &.@{button}--size-large {
+      width: @button-large-height;
+    }
 
-      &-medium {
-        width: @button-medium-height;
-      }
+    &.@{button}--size-medium {
+      width: @button-medium-height;
+    }
 
-      &-small {
-        width: @button-small-height;
-      }
+    &.@{button}--size-small {
+      width: @button-small-height;
+    }
 
-      &-extra-small {
-        width: 28px;
-      }
+    &.@{button}--size-extra-small {
+      width: @button-extra-small-height;
     }
   }
 
   // 圆形
   &--circle {
     padding: 0;
+    border-radius: 50%;
+
+    &.@{button}--size-large {
+      width: @button-large-height;
 
-    &.@{button}--size {
-      &-large {
+      &::after {
         border-radius: 50%;
-        width: @button-large-height;
       }
+    }
+
+    &.@{button}--size-medium {
+      width: @button-medium-height;
 
-      &-medium {
+      &::after {
         border-radius: 50%;
-        width: @button-medium-height;
       }
+    }
 
-      &-small {
+    &.@{button}--size-small {
+      width: @button-small-height;
+
+      &::after {
         border-radius: 50%;
-        width: @button-small-height;
       }
+    }
+
+    &.@{button}--size-extra-small {
+      width: @button-extra-small-height;
 
-      &-extra-small {
+      &::after {
         border-radius: 50%;
-        width: 28px;
       }
     }
   }

diff --git a/src/button/button.ts b/src/button/button.ts
@@ -47,10 +47,10 @@ export default class Button extends SuperComponent {
       const classList = [
         name,
         `${prefix}-class`,
+        `${name}--${this.data.variant || 'base'}`,
         `${name}--${this.data.theme || 'default'}`,
-        `${name}--size-${this.data.size || 'medium'}`,
         `${name}--${this.data.shape || 'rectangle'}`,
-        `${name}--${this.data.variant || 'base'}`,
+        `${name}--size-${this.data.size || 'medium'}`,
       ];
 
       if (this.data.block) {

diff --git 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--base t-button--block"
+                  class="t-button t-class t-button--base t-button--primary t-button--rectangle t-button--size-medium t-button--block"
                   data-custom="{{null}}"
                   formType=""
                   hoverClass="t-button--hover"

diff --git 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"
+              class="t-button t-class t-button--base t-button--default t-button--rectangle t-button--size-medium"
               data-custom="{{null}}"
               formType=""
               hoverClass="t-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"
+              class="t-button t-class t-button--base t-button--default t-button--rectangle t-button--size-medium"
               data-custom="{{null}}"
               formType=""
               hoverClass="t-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"
+              class="t-button t-class t-button--base t-button--default t-button--rectangle t-button--size-medium"
               data-custom="{{null}}"
               formType=""
               hoverClass="t-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"
+                class="t-button t-class t-button--base t-button--default t-button--rectangle t-button--size-medium"
                 data-custom="{{null}}"
                 formType=""
                 hoverClass="t-button--hover"