V10 button (#1834)

- ✨ 新增 `type ="icon"` 按钮类型 - ✨ 新增 `type="text"` 按钮类型 - 🦀️ 修改次级按钮样式 ## break change - 🦀️ disabled的按钮外层套了一层父元素，以支持 cursor: not-allowed #142
youzan · Feb 10, 2022 · 2979091 · 2979091
1 parent 49e0b6e
commit 2979091
Show file tree

Hide file tree

Showing 17 changed files with 244 additions and 213 deletions.
diff --git a/packages/zent/__tests__/button.spec.jsx b/packages/zent/__tests__/button.spec.jsx
@@ -66,12 +66,6 @@ describe('<Button />', () => {
     expect(buttonNode.classList.contains('zent-btn-danger-outline')).toBe(true);
   });
 
-  test('Transparent Border Button', () => {
-    const tree = renderIntoDocument(<Button bordered={false} />);
-    const buttonNode = findRenderedDOMComponentWithTag(tree, 'button');
-    expect(buttonNode.className).toContain('zent-btn-border-transparent');
-  });
-
   test('Large Button', () => {
     const tree = renderIntoDocument(<Button size="large" />);
     const buttonNode = findRenderedDOMComponentWithTag(tree, 'button');

diff --git a/packages/zent/__tests__/disabled.spec.jsx b/packages/zent/__tests__/disabled.spec.jsx
@@ -57,7 +57,9 @@ it('disabled children', () => {
       ).length
     ).toBe(1);
     expect(
-      document.querySelectorAll('#root > .zent-btn-disabled.zent-btn').length
+      document.querySelectorAll(
+        '#root > .zent-btn-disabled-wrapper .zent-btn-disabled.zent-btn'
+      ).length
     ).toBe(1);
     expect(
       document.querySelectorAll(

diff --git a/packages/zent/assets/button.scss b/packages/zent/assets/button.scss
@@ -6,6 +6,13 @@ $btn-height-small: 24px;
 $btn-height-normal: 32px;
 $btn-height-large: 40px;
 
+$btn-icon-size-small: 24px;
+$btn-icon-size-small-font: 16px;
+$btn-icon-size-normal: 28px;
+$btn-icon-size-normal-font: 20px;
+$btn-icon-size-large: 32px;
+$btn-icon-size-large-font: 24px;
+
 @mixin btn-white($prop) {
   @include theme-color($prop, stroke, 9);
 }
@@ -15,7 +22,7 @@ $btn-height-large: 40px;
 }
 
 @mixin btn-light-grey($prop) {
-  @include theme-color($prop, stroke, 6);
+  @include theme-color($prop, stroke, 8);
 }
 
 /* styles begin */
@@ -156,8 +163,8 @@ $btn-warning-active: 1;
 
 .zent-btn {
   @include theme-color(color, stroke, 1);
-  @include btn-white(background-color);
-  @include theme-color(border-color, stroke, 5);
+  @include theme-color(background-color, stroke, 12, 0.06);
+  @include theme-color(border-color, stroke, 12, 0.06);
   display: inline-block;
   height: $btn-height-normal;
   line-height: $btn-height-normal - 2px;
@@ -172,6 +179,7 @@ $btn-warning-active: 1;
   box-sizing: border-box;
   cursor: pointer;
   transition: all 0.3s;
+  background-clip: padding-box;
 
   &:focus {
     outline: none;
@@ -185,25 +193,23 @@ $btn-warning-active: 1;
   }
 
   &:hover {
-    @include btn-primary-hover(color);
-    @include btn-primary-hover(border-color);
+    @include theme-color(background-color, stroke, 12, 0.03);
+    @include theme-color(border-color, stroke, 12, 0.03);
     text-decoration: none;
   }
 
   &:active {
     @include theme-color(color, stroke, 1);
-    @include theme-color(background-color, stroke, 10);
-    @include theme-color(border-color, stroke, 5);
+    @include theme-color(background-color, stroke, 12, 0.09);
     text-decoration: none;
   }
 
   &.zent-btn-loading {
-    &:hover,
-    &:active {
-      @include btn-white(background-color);
-      @include theme-color(border-color, stroke, 5);
-      border-width: 1px;
-      border-style: solid;
+    &.zent-btn-icon {
+      background-color: transparent;
+    }
+    &.zent-btn-text {
+      @include theme-color(background-color, primary, 4, 0.03);
     }
   }
 
@@ -225,12 +231,23 @@ $btn-warning-active: 1;
     height: $btn-height-large;
     line-height: $btn-height-large - 2px;
     font-size: $font-size-large;
+    &.zent-btn-icon {
+      height: $btn-icon-size-large;
+      width: $btn-icon-size-large;
+      font-size: $btn-icon-size-large-font;
+    }
   }
 
   &-small {
     height: $btn-height-small;
     line-height: $btn-height-small - 2px;
     padding: 0 8px;
+    font-size: $font-size-small;
+    &.zent-btn-icon {
+      height: $btn-icon-size-small;
+      width: $btn-icon-size-small;
+      font-size: $btn-icon-size-small-font;
+    }
   }
 
   &-block {
@@ -323,7 +340,6 @@ $btn-warning-active: 1;
     @include theme-color(background-color, stroke, 8);
     @include btn-light-grey(border-color);
     @include prevent-pointer-events;
-
     &:link,
     &:visited,
     &:focus {
@@ -343,6 +359,74 @@ $btn-warning-active: 1;
     }
   }
 
+  &-text {
+    @include theme-color(background-color, primary, 4, 0.03);
+    @include theme-color(color, primary, 4);
+    font-size: $font-size-small;
+    height: $btn-height-small;
+    line-height: $btn-height-small;
+    padding: 0 8px;
+    border: 0;
+
+    &:link,
+    &:visited,
+    &:hover,
+    &:active,
+    &:focus {
+      border: 0;
+      @include theme-color(color, primary, 4);
+    }
+
+    &:hover {
+      @include theme-color(background-color, primary, 4, 0.06);
+    }
+
+    &:active {
+      @include theme-color(background-color, primary, 4, 0.09);
+    }
+  }
+
+  &-icon {
+    height: $btn-icon-size-normal;
+    width: $btn-icon-size-normal;
+    font-size: $btn-icon-size-normal-font;
+    color: $text-600;
+    background-color: transparent;
+    padding: 0;
+    line-height: $btn-height-small;
+    text-align: center;
+    border-radius: 2px;
+    border: 0;
+
+    &:link,
+    &:visited,
+    &:hover,
+    &:active,
+    &:focus {
+      color: $text-600;
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    i.zenticon {
+      margin: 0;
+
+      &:last-child {
+        margin: 0;
+      }
+
+      &:first-child {
+        margin: 0;
+      }
+    }
+  }
+
   &-loading {
     position: relative;
     color: transparent;
@@ -372,12 +456,33 @@ $btn-warning-active: 1;
     }
 
     &::after {
+      @include theme-color(border-top-color, stroke, 1);
+      @include theme-color(border-right-color, stroke, 1);
+      @include theme-color(border-bottom-color, stroke, 9);
+      @include theme-color(border-left-color, stroke, 9);
+      animation: zent-ani-spin 0.6s linear;
+      animation-iteration-count: infinite;
+    }
+
+    &.zent-btn-small::after,
+    &.zent-btn-text::after {
+      width: 12px;
+      height: 12px;
+      margin-left: -6px;
+      margin-top: -6px;
+      border-radius: 6px;
+    }
+
+    &.zent-btn-text::after {
       @include theme-color(border-top-color, primary, 4);
       @include theme-color(border-right-color, primary, 4);
       @include theme-color(border-bottom-color, section, bg);
       @include theme-color(border-left-color, section, bg);
-      animation: zent-ani-spin 0.6s linear;
-      animation-iteration-count: infinite;
+    }
+
+    &.zent-btn-icon::after {
+      @include theme-color(border-top-color, stroke, 1);
+      @include theme-color(border-right-color, stroke, 1);
     }
   }
 
@@ -393,19 +498,26 @@ $btn-warning-active: 1;
     }
   }
 
+  &:not(.zent-btn-icon, .zent-btn-text) .zenticon {
+    font-size: 20px;
+    vertical-align: -2px;
+  }
+
   .zenticon:first-child {
-    margin-right: 8px;
+    margin-right: 4px;
   }
 
   .zenticon:last-child {
-    margin-left: 8px;
+    margin-left: 4px;
   }
 
   &-group {
     display: inline-block;
-
-    .zent-btn + .zent-btn {
-      margin-left: -1px;
+    .zent-btn + .zent-btn,
+    .zent-btn-disabled-wrapper + .zent-btn,
+    .zent-btn + .zent-btn-disabled-wrapper,
+    .zent-btn-disabled-wrapper + .zent-btn-disabled-wrapper {
+      margin-left: 1px;
     }
 
     .zent-btn {

diff --git a/packages/zent/assets/theme/semantic/_color.scss b/packages/zent/assets/theme/semantic/_color.scss
@@ -93,7 +93,8 @@ $default-colors: (
   'selected': $text-200,
   'disabled-color': $text-400,
   'disabled-bg': $text-200,
-  'disabled-border-color': $text-400
+  'disabled-border-color': $text-400,
+  'bg': $text-700
 );
 
 $primary-colors: (
@@ -164,6 +165,10 @@ $theme-stroke-9: map-get(
 // Button background color
 $theme-stroke-10: map-get($section-colors, 'border-color') !default; // Active
 $theme-stroke-11: map-get(map-get($color-sets, 'body'), 'bg') !default; // Hover
+$theme-stroke-12: map-get(
+  map-get($color-sets, 'default'),
+  'bg'
+) !default; // default-back
 
 // Blue(primary)
 $theme-primary-1: map-get(
@@ -310,6 +315,10 @@ $theme-colors-mapping: (
       cat: 'body',
       attr: 'bg',
     ),
+    (
+      cat: 'default',
+      attr: 'bg',
+    ),
   ),
   'primary': (
     (

diff --git a/packages/zent/src/button/Directive.tsx b/packages/zent/src/button/Directive.tsx
@@ -24,7 +24,9 @@ export type IButtonType =
   | 'danger'
   | 'warning'
   | 'error'
-  | 'success';
+  | 'success'
+  | 'text'
+  | 'icon';
 
 export type IButtonHtmlType = 'button' | 'submit' | 'reset';
 
@@ -86,9 +88,11 @@ export function ButtonDirective<ChildProps extends IButtonDirectiveChildProps>(
     onClick?.(e);
   }, []);
   const iconNode = icon ? <Icon type={icon} /> : null;
+  // icon text 或者 outline 为false 不需要outline
+  const needOutline = type !== 'text' && type !== 'icon' && outline;
   const className = cx(
     {
-      [`zent-btn-${type}${outline ? '-outline' : ''}`]: type !== 'default',
+      [`zent-btn-${type}${needOutline ? '-outline' : ''}`]: type !== 'default',
       [`zent-btn-${size}`]: size !== 'medium',
       'zent-btn-block': block,
       'zent-btn-loading': loading,
@@ -115,7 +119,8 @@ export function ButtonDirective<ChildProps extends IButtonDirectiveChildProps>(
   );
 
   return renderCompatibleChildren(commonChildren, {
-    disabled: popoverHoverTriggerContext.fixMouseEventsOnDisabledChildren,
+    disabled:
+      popoverHoverTriggerContext.fixMouseEventsOnDisabledChildren || disabled,
     onMouseEnter,
     onMouseLeave,
   });

diff --git a/packages/zent/src/button/README_en-US.md b/packages/zent/src/button/README_en-US.md
@@ -1,7 +1,7 @@
 ---
 title: Button
 path: component/button
-group: Data Entry
+group: Basics
 ---
 
 ## Button
@@ -29,7 +29,6 @@ Button. Basic style and basic status are provided.
 | disabled         | controls status                                                                                      | bool   | `false`     |                                      |
 | loading          | controls status                                                                                      | bool   | `false`     |                                      |
 | outline          | determines whether the background is transparent                                                     | bool   | `false`     |                                      |
-| bordered         | determines whether the border is displayed                                                           | bool   | `true`      |                                      |
 | Other Properties |                                                                                                      |        |             |                                      |
 | href             | Optional, the component will be rendered as an a tag instead of a button tag if this property is set | string |             |                                      |
 | target           | Optional, used together with href, which is the target property of the a tag                         | string | `''`        | `'_blank'`                           |
@@ -40,10 +39,3 @@ Button. Basic style and basic status are provided.
 #### ButtonDirective
 
 `ButtonDirective` renders button styles onto its child. Use this to make a `react-router` `Link` look like a button, and preserve all of its router functionalities.
-
-#### ButtonGroup
-
-| Property  | Description       | Type   | Default  | Alternative |
-| --------- | ----------------- | ------ | -------- | ----------- |
-| className | custom class name | string |          |             |
-| style     | custom style      | object |          |             |