fix(button): separate loading and disable style (#1437)

* feat(button): separate loading and disable style * chore: update snapshot
Tencent · Sep 5, 2022 · 270ac15 · 270ac15
1 parent 7698c35
commit 270ac15
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/src/_util/useRipple.ts b/src/_util/useRipple.ts
@@ -60,7 +60,8 @@ export default function useRipple(ref: RefObject<HTMLElement>, fixedRippleColor?
       if (
         el.classList.contains(`${classPrefix}-is-active`) ||
         el.classList.contains(`${classPrefix}-is-disabled`) ||
-        el.classList.contains(`${classPrefix}-is-checked`)
+        el.classList.contains(`${classPrefix}-is-checked`) ||
+        el.classList.contains(`${classPrefix}-is-loading`)
       )
         return;
 

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
@@ -74,7 +74,7 @@ const Button = forwardRef((props: ButtonProps, ref: React.RefObject<HTMLElement>
           [`${classPrefix}-button--shape-${shape}`]: shape !== 'rectangle',
           [`${classPrefix}-button--ghost`]: ghost,
           [`${classPrefix}-is-loading`]: loading,
-          [`${classPrefix}-is-disabled`]: disabled || loading,
+          [`${classPrefix}-is-disabled`]: disabled,
           [`${classPrefix}-size-s`]: size === 'small',
           [`${classPrefix}-size-l`]: size === 'large',
           [`${classPrefix}-size-full-width`]: block,

diff --git a/src/button/__tests__/__snapshots__/button.test.tsx.snap b/src/button/__tests__/__snapshots__/button.test.tsx.snap
@@ -1162,7 +1162,7 @@ exports[`status.jsx 1`] = `
       class="t-space-item"
     >
       <button
-        class="t-button t-button--theme-primary t-button--variant-base t-is-loading t-is-disabled"
+        class="t-button t-button--theme-primary t-button--variant-base t-is-loading"
         disabled=""
         type="button"
       >

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -86,7 +86,7 @@ exports[`ssr snapshot test renders ./src/button/_example/shape.jsx correctly 1`]
 
 exports[`ssr snapshot test renders ./src/button/_example/size.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-size-s\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline t-size-s\\"><span class=\\"t-button__text\\">描边按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-dashed t-size-s\\"><span class=\\"t-button__text\\">虚框按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-size-s\\"><span class=\\"t-button__text\\">文字按钮</span></button></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">描边按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-dashed\\"><span class=\\"t-button__text\\">虚框按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\">文字按钮</span></button></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-size-l\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline t-size-l\\"><span class=\\"t-button__text\\">描边按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-dashed t-size-l\\"><span class=\\"t-button__text\\">虚框按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text t-size-l\\"><span class=\\"t-button__text\\">文字按钮</span></button></div></div></div></div>"`;
 
-exports[`ssr snapshot test renders ./src/button/_example/status.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" disabled=\\"\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-is-disabled\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" disabled=\\"\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-is-loading t-is-disabled\\"><div class=\\"t-loading t-loading--center t-size-m t-loading--inherit-color\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"1\\" y=\\"1\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg></div><span class=\\"t-button__text\\">加载中</span></button></div></div>"`;
+exports[`ssr snapshot test renders ./src/button/_example/status.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" disabled=\\"\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-is-disabled\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" disabled=\\"\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-is-loading\\"><div class=\\"t-loading t-loading--center t-size-m t-loading--inherit-color\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 14 14\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"1\\" y=\\"1\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg></div><span class=\\"t-button__text\\">加载中</span></button></div></div>"`;
 
 exports[`ssr snapshot test renders ./src/button/_example/theme.jsx correctly 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-base\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">描边按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-dashed\\"><span class=\\"t-button__text\\">虚框按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-text\\"><span class=\\"t-button__text\\">文字按钮</span></button></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-outline\\"><span class=\\"t-button__text\\">描边按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-dashed\\"><span class=\\"t-button__text\\">虚框按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">文字按钮</span></button></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-danger t-button--variant-base\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-danger t-button--variant-outline\\"><span class=\\"t-button__text\\">描边按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-danger t-button--variant-dashed\\"><span class=\\"t-button__text\\">虚框按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-danger t-button--variant-text\\"><span class=\\"t-button__text\\">文字按钮</span></button></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-warning t-button--variant-base\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-warning t-button--variant-outline\\"><span class=\\"t-button__text\\">描边按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-warning t-button--variant-dashed\\"><span class=\\"t-button__text\\">虚框按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-warning t-button--variant-text\\"><span class=\\"t-button__text\\">文字按钮</span></button></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-success t-button--variant-base\\"><span class=\\"t-button__text\\">填充按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-success t-button--variant-outline\\"><span class=\\"t-button__text\\">描边按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-success t-button--variant-dashed\\"><span class=\\"t-button__text\\">虚框按钮</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-success t-button--variant-text\\"><span class=\\"t-button__text\\">文字按钮</span></button></div></div></div></div>"`;