fix: fix activity-indicator color in button (#692)

ZhongAnTech · Jun 28, 2021 · 2a4c8c8 · 2a4c8c8
1 parent 0c86d81
commit 2a4c8c8
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/packages/zarm/src/button/__tests__/__snapshots__/index.test.jsx.snap b/packages/zarm/src/button/__tests__/__snapshots__/index.test.jsx.snap
@@ -84,7 +84,7 @@ exports[`Button icon 1`] = `
 exports[`Button loading 1`] = `
 <button
   aria-disabled="false"
-  class="za-button za-button--default za-button--md za-button--radius"
+  class="za-button za-button--default za-button--md za-button--radius za-button--loading"
   type="button"
 >
   <div

diff --git a/packages/zarm/src/button/index.tsx b/packages/zarm/src/button/index.tsx
@@ -77,6 +77,7 @@ export default class Button extends PureComponent<ButtonProps, {}> {
       [`${prefixCls}--ghost`]: !!ghost,
       [`${prefixCls}--shadow`]: !!shadow,
       [`${prefixCls}--disabled`]: !!disabled,
+      [`${prefixCls}--loading`]: loading,
     });
 
     const iconRender = loading ? <ActivityIndicator /> : icon;

diff --git a/packages/zarm/src/button/style/component.scss b/packages/zarm/src/button/style/component.scss
@@ -93,6 +93,10 @@
       var(--button-primary-shadow-color),
     );
 
+    @include m(loading) {
+      @include button-loading(var(--button-primary-color));
+    }
+
     @include m(link) {
       @include button-link(
         var(--button-primary-ghost-color),
@@ -130,6 +134,10 @@
       var(--button-danger-shadow-color),
     );
 
+    @include m(loading) {
+      @include button-loading(var(--button-danger-color));
+    }
+
     @include m(link) {
       @include button-link(
         var(--button-danger-ghost-color),

diff --git a/packages/zarm/src/button/style/mixins.scss b/packages/zarm/src/button/style/mixins.scss
@@ -177,3 +177,14 @@
   border-style: solid;
   border-radius: $border-radius;
 }
+
+// 加载状态图标颜色设置
+@mixin button-loading($color) {
+  @include b(activity-indicator) {
+    @include m(circular) {
+      circle {
+        stroke: $color;
+      }
+    }
+  }
+}