fix(button): fix loading status for ghost button (#1432)

* fix(button): fix loading status for ghost button fix #1246 * fix(button): update snapshot for #1246: fix loading status for ghost button
Tencent · Aug 31, 2022 · 3a25ba1 · 3a25ba1
1 parent 5f281b7
commit 3a25ba1
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 5 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/button/__tests__/__snapshots__/demo.test.js.snap b/src/button/__tests__/__snapshots__/demo.test.js.snap
@@ -1155,7 +1155,7 @@ exports[`Button Button statusVue demo works fine 1`] = `
     class="t-space-item"
   >
     <button
-      class="t-button t-size-m t-button--variant-base t-button--theme-primary t-is-disabled t-is-loading"
+      class="t-button t-size-m t-button--variant-base t-button--theme-primary t-is-loading"
       disabled="disabled"
       type="button"
     >

diff --git a/src/button/button.tsx b/src/button/button.tsx
@@ -37,7 +37,7 @@ export default mixins(keepAnimationMixins, classPrefixMixins).extend({
       `${this.componentName}--variant-${this.variant}`,
       `${this.componentName}--theme-${theme}`,
       {
-        [this.commonStatusClassName.disabled]: disabled,
+        [this.commonStatusClassName.disabled]: this.disabled,
         [this.commonStatusClassName.loading]: this.loading,
         [`${this.componentName}--shape-${this.shape}`]: this.shape !== 'rectangle',
         [`${this.componentName}--ghost`]: this.ghost,

diff --git a/src/dialog/__tests__/__snapshots__/demo.test.js.snap b/src/dialog/__tests__/__snapshots__/demo.test.js.snap
@@ -75,7 +75,7 @@ exports[`Dialog Dialog asyncVue demo works fine 1`] = `
                   </span>
                 </button>
                 <button
-                  class="t-button t-size-m t-button--variant-base t-button--theme-primary t-is-disabled t-is-loading t-dialog__confirm"
+                  class="t-button t-size-m t-button--variant-base t-button--theme-primary t-is-loading t-dialog__confirm"
                   disabled="disabled"
                   type="button"
                 >

diff --git a/src/utils/ripple.ts b/src/utils/ripple.ts
@@ -27,6 +27,7 @@ const Ripple = {
         el.classList.contains(`${prefix}-is-active`)
         || el.classList.contains(`${prefix}-is-disabled`)
         || el.classList.contains(`${prefix}-is-checked`)
+        || el.classList.contains(`${prefix}-is-loading`)
       ) {
         return;
       }

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -999,7 +999,7 @@ exports[`ssr snapshot test renders ./src/button/_example/size.vue correctly 1`]
 exports[`ssr snapshot test renders ./src/button/_example/status.vue correctly 1`] = `
 <div class="t-space t-space-horizontal" style="gap:16px;">
   <div class="t-space-item"><button type="button" disabled="disabled" class="t-button t-size-m t-button--variant-base t-button--theme-primary t-is-disabled"><span class="t-button__text">填充按钮</span></button></div>
-  <div class="t-space-item"><button type="button" disabled="disabled" class="t-button t-size-m t-button--variant-base t-button--theme-primary t-is-disabled t-is-loading">
+  <div class="t-space-item"><button type="button" disabled="disabled" class="t-button t-size-m t-button--variant-base t-button--theme-primary t-is-loading">
       <div class="t-loading--center t-size-m t-loading--inherit-color t-loading"><svg viewBox="0 0 14 14" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" size="medium" class="t-loading__gradient t-icon-loading">
           <foreignObject x="1" y="1" width="12" height="12">
             <div class="t-loading__gradient-conic"></div>