fix(comp:button): display to inline-block and remove focus style (#1354)

IDuxFE · Dec 13, 2022 · 107c03e · 107c03e
1 parent 031834e
commit 107c03e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 35 deletions.
diff --git a/packages/components/button/src/Button.tsx b/packages/components/button/src/Button.tsx
@@ -69,12 +69,7 @@ export default defineComponent({
 
       const children: VNodeChild[] = []
       if (loading) {
-        children.push(
-          // loading 状态下的行高问题
-          <span class={`${mergedPrefixCls.value}-loading-icon`}>
-            <IxIcon name="loading"></IxIcon>
-          </span>,
-        )
+        children.push(<IxIcon name="loading"></IxIcon>)
       } else if (slots.icon) {
         children.push(slots.icon())
       } else if (icon) {

diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
@@ -6,10 +6,7 @@
   .reset-color(@button-color, @button-background-color);
 
   position: relative;
-  display: inline-flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: center;
+  display: inline-block;
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
@@ -44,16 +41,27 @@
     content: '\a0';
   }
 
-  &-loading-icon > .@{icon-prefix},
-  & > .@{icon-prefix} {
+  > .@{icon-prefix} {
+    color: @button-icon-color;
     font-size: @button-icon-font-size;
   }
 
+  &:hover,
+  &:active,
+  &-primary,
+  &-link,
+  &-danger,
+  &-ghost,
+  &-disabled {
+    > .@{icon-prefix} {
+      color: inherit;
+    }
+  }
+
   > span {
     display: inline-block;
   }
 
-  &-loading-icon + span,
   > .@{icon-prefix} + span {
     margin-left: @spacing-xs;
   }
@@ -74,7 +82,6 @@
     .button-size(@button-height-lg, @button-font-size-lg, @button-min-width-lg, @button-padding-horizontal-lg);
 
     &.@{button-prefix}-icon-only {
-      .@{button-prefix}-loading-icon > .@{icon-prefix},
       > .@{icon-prefix} {
         font-size: calc(@button-icon-font-size + 2px);
       }
@@ -85,7 +92,6 @@
     .button-size(@button-height-xl, @button-font-size-xl, @button-min-width-xl, @button-padding-horizontal-xl);
 
     &.@{button-prefix}-icon-only {
-      .@{button-prefix}-loading-icon > .@{icon-prefix},
       > .@{icon-prefix} {
         font-size: calc(@button-icon-font-size + 4px);
       }
@@ -97,7 +103,6 @@
     background-color: @button-primary-background-color;
     border-color: @button-primary-background-color;
 
-    &:focus,
     &:hover {
       background-color: @button-primary-background-color-hover;
       border-color: @button-primary-background-color-hover;
@@ -111,7 +116,6 @@
 
   &-default,
   &-dashed {
-    &:focus,
     &:hover {
       color: @button-primary-background-color-hover;
       border-color: @button-primary-background-color-hover;
@@ -135,7 +139,6 @@
     min-width: auto;
     height: auto;
 
-    &:focus,
     &:hover {
       color: @button-primary-background-color-hover;
     }
@@ -153,7 +156,6 @@
     color: @button-danger-color;
     border-color: @button-danger-color;
 
-    &:focus,
     &:hover {
       color: @button-danger-color-hover;
       border-color: @button-danger-color-hover;
@@ -169,7 +171,6 @@
     color: @button-primary-color;
     background-color: @button-danger-color;
 
-    &:focus,
     &:hover {
       color: @button-primary-color;
       background-color: @button-danger-color-hover;
@@ -185,7 +186,6 @@
     color: @button-primary-color;
     border-color: @button-ghost-border-color;
 
-    &:focus,
     &:hover {
       color: @button-primary-color;
       border-color: @button-ghost-border-color;
@@ -202,7 +202,6 @@
   &-ghost&-danger {
     background-color: transparent;
 
-    &:focus,
     &:hover {
       background-color: @button-ghost-background-color-hover;
     }
@@ -216,7 +215,6 @@
     color: @button-primary-background-color;
     border-color: @button-primary-background-color;
 
-    &:focus,
     &:hover {
       color: @button-primary-background-color-hover;
       border-color: @button-primary-background-color-hover;
@@ -232,7 +230,6 @@
     color: @button-danger-color;
     border-color: @button-danger-color;
 
-    &:focus,
     &:hover {
       color: @button-danger-color-hover;
       border-color: @button-danger-color-hover;
@@ -249,7 +246,6 @@
 
     &,
     &:hover,
-    &:focus,
     &:active {
       color: @button-color-disabled;
       background-color: @button-background-color-disabled;
@@ -261,7 +257,6 @@
   &-disabled&-text {
     &,
     &:hover,
-    &:focus,
     &:active {
       background-color: transparent;
     }
@@ -270,7 +265,6 @@
   &-disabled&-ghost {
     &,
     &:hover,
-    &:focus,
     &:active {
       background-color: @button-ghost-background-color-disabled;
     }
@@ -301,12 +295,6 @@
   &-icon-only {
     min-width: auto;
   }
-
-  &-default:not(&-danger):not(&-disabled):not(:hover):not(:focus):not(:active) {
-    .@{icon-prefix} {
-      color: @button-icon-color;
-    }
-  }
 }
 
 .@{button-prefix}-group {
@@ -316,7 +304,6 @@
     z-index: auto;
 
     &:hover,
-    &:focus,
     &:active {
       z-index: 2;
     }

diff --git a/packages/components/button/style/mixin.less b/packages/components/button/style/mixin.less
@@ -3,7 +3,7 @@
 
   height: @height;
   min-width: @min-width;
-  padding: 0 @padding-horizontal;
+  padding: calc((@height - @font-size - var(--ix-line-height-gutter) - 2px) / 2) @padding-horizontal;
 
   &.@{button-prefix}-circle,
   &.@{button-prefix}-square {

diff --git a/packages/components/icon/src/dependencies.ts b/packages/components/icon/src/dependencies.ts
@@ -30,6 +30,7 @@ import {
   ExclamationCircleFilled,
   FilterFilled,
   Holder,
+  Info,
   InfoCircle,
   InfoCircleFilled,
   LayoutCompact,
@@ -51,6 +52,7 @@ import {
   RotateRight,
   Search,
   StarFilled,
+  Success,
   TreeExpand,
   TreeUnexpand,
   Uncollapse,
@@ -84,6 +86,7 @@ export const IDUX_ICON_DEPENDENCIES: IconDefinition[] = [
   ExclamationCircleFilled, // Modal Popconfirm
   FilterFilled, // Table
   Holder, // tree
+  Info, // Stepper
   InfoCircle, // Message Result Alert Notification
   InfoCircleFilled, // Modal
   LayoutCompact, // ProTable
@@ -104,6 +107,7 @@ export const IDUX_ICON_DEPENDENCIES: IconDefinition[] = [
   RotateLeft, // Image
   RotateRight, // Image
   Search, // Select Transfer
+  Success, // Stopper
   StarFilled, // Rate
   User, // Avatar
   Uncollapse, // Pro Tree