fix(comp:button): style error (#968)

IDuxFE · Jun 21, 2022 · 9db8c9f · 9db8c9f
1 parent 4bda54b
commit 9db8c9f
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 19 deletions.
diff --git a/packages/components/button/docs/Index.zh.md b/packages/components/button/docs/Index.zh.md
@@ -104,6 +104,10 @@ subtitle: 按钮
 | `@button-text-active-color` | `@color-primary-d10` | - | - |
 | `@button-text-hover-background-color` | `transparent` | - | - |
 | `@button-icon-color` | `@color-graphite-d20` | - | - |
-| `@button-icon-font-size` | `@font-size-lg` | - | - |
+| `@button-icon-font-size-xs` | `@font-size-xs` | `@font-size-lg` | - |
+| `@button-icon-font-size-sm` | `@font-size-sm` | `@font-size-lg` | - |
+| `@button-icon-font-size-md` | `@font-size-md` | `@font-size-lg` | - |
+| `@button-icon-font-size-lg` | `@font-size-md` | `@font-size-lg` | - |
+| `@button-icon-font-size-xl` | `@font-size-lg` | `@font-size-lg` | - |
 | `@button-icon-margin` | `0 @spacing-xs` | - | - |
 <!--- insert less variable end  --->
diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
@@ -130,10 +130,6 @@
     }
   }
 
-  .@{icon-prefix} {
-    font-size: @button-icon-font-size;
-  }
-
   > .@{icon-prefix} + span {
     margin: @button-icon-margin;
   }

diff --git a/packages/components/button/style/mixin.less b/packages/components/button/style/mixin.less
@@ -1,10 +1,14 @@
 @button-danger-border-color: color(~`colorPalette('@{button-danger-background-color}', 10) `);
 
-.button-size(@height; @font-size; @spacing-horizontal; @border-radius) {
+.button-size(@height; @font-size; @spacing-horizontal; @border-radius; @icon-font-size) {
   height: @height;
   padding: 0 @spacing-horizontal;
   font-size: @font-size;
   border-radius: @border-radius;
+
+   .@{icon-prefix} {
+    font-size: @icon-font-size;
+  }
 }
 
 .button-disabled(@color: @button-disable-color; @background: @button-disable-background-color; @border: @button-disable-border) {
@@ -115,6 +119,7 @@
 .button() {
   position: relative;
   display: inline-flex;
+  vertical-align: bottom;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
@@ -140,31 +145,31 @@
   }
 
   &-xs {
-    .button-size(@button-height-xs; @button-font-size-xs; @button-padding-xs; @button-border-radius);
+    .button-size(@button-height-xs; @button-font-size-xs; @button-padding-xs; @button-border-radius; @button-icon-font-size-xs);
 
     min-width: @button-min-width-xs;
   }
 
   &-sm {
-    .button-size(@button-height-sm; @button-font-size-sm; @button-padding-sm; @button-border-radius);
+    .button-size(@button-height-sm; @button-font-size-sm; @button-padding-sm; @button-border-radius; @button-icon-font-size-sm);
 
     min-width: @button-min-width-sm;
   }
 
   &-md {
-    .button-size(@button-height-md; @button-font-size-md; @button-padding-md; @button-border-radius);
+    .button-size(@button-height-md; @button-font-size-md; @button-padding-md; @button-border-radius; @button-icon-font-size-md);
 
     min-width: @button-min-width-md;
   }
 
   &-lg {
-    .button-size(@button-height-lg; @button-font-size-lg; @button-padding-lg; @button-border-radius);
+    .button-size(@button-height-lg; @button-font-size-lg; @button-padding-lg; @button-border-radius; @button-icon-font-size-lg);
 
     min-width: @button-min-width-lg;
   }
 
   &-xl {
-    .button-size(@button-height-xl; @button-font-size-xl; @button-padding-xl; @button-border-radius);
+    .button-size(@button-height-xl; @button-font-size-xl; @button-padding-xl; @button-border-radius; @button-icon-font-size-xl);
 
     min-width: @button-min-width-xl;
   }
@@ -315,21 +320,21 @@
 }
 
 .button-round(@buttonPrefix) {
-  .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md);
+  .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md; @button-icon-font-size-md);
   &.@{buttonPrefix}-xs {
-    .button-size(@button-height-xs; @button-font-size-xs; @button-height-xs / 2; @button-height-xs);
+    .button-size(@button-height-xs; @button-font-size-xs; @button-height-xs / 2; @button-height-xs; @button-icon-font-size-xs);
   }
   &.@{buttonPrefix}-sm {
-    .button-size(@button-height-sm; @button-font-size-sm; @button-height-sm / 2; @button-height-sm);
+    .button-size(@button-height-sm; @button-font-size-sm; @button-height-sm / 2; @button-height-sm; @button-icon-font-size-sm);
   }
   &.@{buttonPrefix}-md {
-    .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md);
+    .button-size(@button-height-md; @button-font-size-md; @button-height-md / 2; @button-height-md; @button-icon-font-size-md);
   }
   &.@{buttonPrefix}-lg {
-    .button-size(@button-height-lg; @button-font-size-lg; @button-height-lg / 2; @button-height-lg);
+    .button-size(@button-height-lg; @button-font-size-lg; @button-height-lg / 2; @button-height-lg; @button-icon-font-size-lg);
   }
   &.@{buttonPrefix}-xl {
-    .button-size(@button-height-xl; @button-font-size-xl; @button-height-xl / 2; @button-height-xl);
+    .button-size(@button-height-xl; @button-font-size-xl; @button-height-xl / 2; @button-height-xl; @button-icon-font-size-xl);
   }
 }
 

diff --git a/packages/components/button/style/themes/default.variable.less b/packages/components/button/style/themes/default.variable.less
@@ -76,5 +76,9 @@
 @button-text-hover-background-color: transparent;
 
 @button-icon-color: @color-graphite-d20;
-@button-icon-font-size: @font-size-lg;
+@button-icon-font-size-xs: @font-size-xs;
+@button-icon-font-size-sm: @font-size-sm;
+@button-icon-font-size-md: @font-size-md;
+@button-icon-font-size-lg: @font-size-md;
+@button-icon-font-size-xl: @font-size-lg;
 @button-icon-margin: 0 @spacing-xs;
diff --git a/packages/components/button/style/themes/seer.variable.less b/packages/components/button/style/themes/seer.variable.less
@@ -2,3 +2,9 @@
 
 @button-height-xs: 24px;
 @button-height-sm: 32px;
+
+@button-icon-font-size-xs: @font-size-lg;
+@button-icon-font-size-sm: @font-size-lg;
+@button-icon-font-size-md: @font-size-lg;
+@button-icon-font-size-lg: @font-size-lg;
+@button-icon-font-size-xl: @font-size-lg;
diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md
@@ -244,7 +244,8 @@ export type TablePaginationPosition = 'topStart' | 'top' | 'topEnd' | 'bottomSta
 | `@table-body-hover-background` | `@background-color-light` | `@color-graphite-l50` | - |
 | `@table-pagination-margin` | `@spacing-lg 0` | - | - |
 | `@table-icon-margin` | `@spacing-xs` | - | - |
-| `@table-expandable-icon-size` | `@font-size-md` | - | - |
+| `@table-filterable-trigger-font-size` | `@font-size-md` | `@font-size-sm` | - |
+| `@table-expandable-icon-size` | `@font-size-lg` | `@font-size-md` | - |
 | `@table-expandable-icon-color` | `@color-black` | `@color-graphite` | - |
 | `@table-sticky-scroll-bar-background` | `fade(#000, 35%)` | - | - |
 | `@table-sticky-scroll-bar-radius` | `4px` | - | - |