feat: Button support link type (#16289)

close #15892

components/button/__tests__/__snapshots__/demo.test.js.snap

@@ -34,6 +34,14 @@ exports[`renders ./components/button/demo/basic.md correctly 1`] = `
       Danger
     </span>
   </button>
+  <button
+    class="ant-btn ant-btn-link"
+    type="button"
+  >
+    <span>
+      Link
+    </span>
+  </button>
 </div>
 `;
 
@@ -68,7 +76,15 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
     type="button"
   >
     <span>
-      danger
+      Danger
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-block"
+    type="button"
+  >
+    <span>
+      Link
     </span>
   </button>
 </div>
@@ -332,6 +348,24 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
       Dashed(disabled)
     </span>
   </button>
+  <br />
+  <button
+    class="ant-btn ant-btn-link"
+    type="button"
+  >
+    <span>
+      Link
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-link"
+    disabled=""
+    type="button"
+  >
+    <span>
+      Link(disabled)
+    </span>
+  </button>
   <div
     style="padding:8px 8px 0 8px;background:rgb(190, 200, 200)"
   >
@@ -392,6 +426,14 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
       danger
     </span>
   </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-background-ghost"
+    type="button"
+  >
+    <span>
+      link
+    </span>
+  </button>
 </div>
 `;
 
@@ -895,6 +937,14 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
       Danger
     </span>
   </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-lg"
+    type="button"
+  >
+    <span>
+      Link
+    </span>
+  </button>
   <br />
   <button
     class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"

components/button/button.tsx

@@ -40,7 +40,7 @@ function insertSpace(child: React.ReactChild, needInserted: boolean) {
   return child;
 }
 
-const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger');
+const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link');
 export type ButtonType = (typeof ButtonTypes)[number];
 const ButtonShapes = tuple('circle', 'circle-outline', 'round');
 export type ButtonShape = (typeof ButtonShapes)[number];
@@ -266,20 +266,24 @@ class Button extends React.Component<ButtonProps, ButtonState> {
     // React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
     const { htmlType, ...otherProps } = rest as NativeButtonProps;
 
-    return (
-      <Wave>
-        <button
-          {...otherProps as NativeButtonProps}
-          type={htmlType}
-          className={classes}
-          onClick={this.handleClick}
-          ref={this.saveButtonRef}
-        >
-          {iconNode}
-          {kids}
-        </button>
-      </Wave>
+    const buttonNode = (
+      <button
+        {...otherProps as NativeButtonProps}
+        type={htmlType}
+        className={classes}
+        onClick={this.handleClick}
+        ref={this.saveButtonRef}
+      >
+        {iconNode}
+        {kids}
+      </button>
     );
+
+    if (type === 'link') {
+      return buttonNode;
+    }
+
+    return <Wave>{buttonNode}</Wave>;
   };
 
   render() {

components/button/demo/basic.md

@@ -22,6 +22,7 @@ ReactDOM.render(
     <Button>Default</Button>
     <Button type="dashed">Dashed</Button>
     <Button type="danger">Danger</Button>
+    <Button type="link">Link</Button>
   </div>,
   mountNode
 );

components/button/demo/block.md

@@ -21,7 +21,8 @@ ReactDOM.render(
     <Button type="primary" block>Primary</Button>
     <Button block>Default</Button>
     <Button type="dashed" block>Dashed</Button>
-    <Button type="danger" block>danger</Button>
+    <Button type="danger" block>Danger</Button>
+    <Button type="link" block>Link</Button>
   </div>,
   mountNode
 );

components/button/demo/disabled.md

@@ -26,6 +26,9 @@ ReactDOM.render(
     <br />
     <Button type="dashed">Dashed</Button>
     <Button type="dashed" disabled>Dashed(disabled)</Button>
+    <br />
+    <Button type="link">Link</Button>
+    <Button type="link" disabled>Link(disabled)</Button>
     <div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
       <Button ghost>Ghost</Button>
       <Button ghost disabled>Ghost(disabled)</Button>

components/button/demo/ghost.md

@@ -22,6 +22,7 @@ ReactDOM.render(
     <Button ghost>Default</Button>
     <Button type="dashed" ghost>Dashed</Button>
     <Button type="danger" ghost>danger</Button>
+    <Button type="link" ghost>link</Button>
   </div>,
   mountNode
 );

components/button/demo/size.md

@@ -43,6 +43,7 @@ class ButtonSize extends React.Component {
         <Button size={size}>Normal</Button>
         <Button type="dashed" size={size}>Dashed</Button>
         <Button type="danger" size={size}>Danger</Button>
+        <Button type="link" size={size}>Link</Button>
         <br />
         <Button type="primary" shape="circle" icon="download" size={size} />
         <Button type="primary" shape="round" icon="download" size={size}>Download</Button>

components/button/index.en-US.md

@@ -25,7 +25,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 | shape | can be set to `circle`, `round` or omitted | string | - |
 | size | can be set to `small` `large` or omitted | string | `default` |
 | target | same as target attribute of a, works when href is specified | string | - |
-| type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
+| type | can be set to `primary` `ghost` `dashed` `danger` `link`(added in 3.17) or omitted (meaning `default`) | string | `default` |
 | onClick | set the handler to handle `click` event | (event) => void | - |
 | block | option to fit button width to its parent width | boolean | `false` |
 

components/button/index.zh-CN.md

@@ -18,7 +18,7 @@ subtitle: 按钮
 按钮的属性说明如下：
 
 | 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | disabled | 按钮失效状态 | boolean | `false` |
 | ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
 | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |
@@ -28,7 +28,7 @@ subtitle: 按钮
 | shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |
 | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |
-| type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | - |
+| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link`(3.17 中增加) 或者不设 | string | - |
 | onClick | 点击按钮时的回调 | (event) => void | - |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |
 

components/button/style/index.less

@@ -69,6 +69,10 @@
     .btn-danger;
   }
 
+  &-link {
+    .btn-link;
+  }
+
   &-round {
     .btn-round(@btn-prefix-cls);
   }
@@ -165,6 +169,12 @@
     .button-variant-ghost(@btn-danger-color);
   }
 
+  &-background-ghost&-link {
+    .button-variant-ghost(@link-color; transparent);
+
+    color: @component-background;
+  }
+
   &-two-chinese-chars::first-letter {
     letter-spacing: 0.34em;
   }

components/button/style/mixin.less

@@ -7,7 +7,7 @@
   border-radius: @border-radius;
 }
 
-.button-disabled() {
+.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
   &-disabled,
   &.disabled,
   &[disabled] {
@@ -16,7 +16,7 @@
     &:focus,
     &:active,
     &.active {
-      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+      .button-color(@color; @background; @border);
 
       text-shadow: none;
       box-shadow: none;
@@ -86,17 +86,27 @@
   }
   .button-disabled();
 }
-.button-variant-ghost(@color) {
-  .button-color(@color; transparent; @color);
+.button-variant-ghost(@color; @border: @color) {
+  .button-color(@color; transparent; @border);
 
   text-shadow: none;
   &:hover,
   &:focus {
-    .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
+    & when (@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
+    }
+    & when not(@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
+    }
   }
   &:active,
   &.active {
-    .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
+    & when (@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
+    }
+    & when not(@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
+    }
   }
   .button-disabled();
 }
@@ -226,6 +236,18 @@
 .btn-danger() {
   .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
 }
+// link button style
+.btn-link() {
+  .button-variant-other(@link-color, transparent, transparent);
+
+  box-shadow: none;
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+  .button-disabled(@disabled-color; transparent; transparent);
+}
 // round button
 .btn-round(@btnClassName: btn) {
   .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base + 2px; @btn-circle-size);