feat: button support `link` type (#1077)

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/button/demo/basic.md correctly 1`] = `<div><button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Default</span></button> <button type="button" class="ant-btn ant-btn-dashed"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger"><span>Danger</span></button></div>`;
+exports[`renders ./components/button/demo/basic.md correctly 1`] = `<div><button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default"><span>Default</span></button> <button type="button" class="ant-btn ant-btn-dashed"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger"><span>Danger</span></button> <button type="button" class="ant-btn ant-btn-link"><span>Link</span></button></div>`;
 
-exports[`renders ./components/button/demo/block.md correctly 1`] = `<div><button type="button" class="ant-btn ant-btn-primary ant-btn-block"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-block"><span>Default</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-block"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-block"><span>danger</span></button></div>`;
+exports[`renders ./components/button/demo/block.md correctly 1`] = `<div><button type="button" class="ant-btn ant-btn-primary ant-btn-block"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-block"><span>Default</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-block"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-block"><span>Danger</span></button> <button type="button" class="ant-btn ant-btn-link ant-btn-block"><span>Link</span></button></div>`;
 
 exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
 <div id="components-button-demo-button-group">
@@ -26,12 +26,12 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
 `;
 
 exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
-<div><button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-primary"><span>Primary(disabled)</span></button> <br> <button type="button" class="ant-btn ant-btn-default"><span>Default</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Default(disabled)</span></button> <br> <button type="button" class="ant-btn ant-btn-dashed"><span>Dashed</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-dashed"><span>Dashed(disabled)</span></button>
+<div><button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-primary"><span>Primary(disabled)</span></button> <br> <button type="button" class="ant-btn ant-btn-default"><span>Default</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Default(disabled)</span></button> <br> <button type="button" class="ant-btn ant-btn-dashed"><span>Dashed</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-dashed"><span>Dashed(disabled)</span></button> <br> <button type="button" class="ant-btn ant-btn-link"><span>Link</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-link"><span>Link(disabled)</span></button>
   <div style="padding: 8px 8px 0px 8px; background: rgb(190, 200, 200);"><button type="button" class="ant-btn ant-btn-default ant-btn-background-ghost"><span>Ghost</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-default ant-btn-background-ghost"><span>Ghost(disabled)</span></button></div>
 </div>
 `;
 
-exports[`renders ./components/button/demo/ghost.md correctly 1`] = `<div style="background: rgb(190, 200, 200); padding: 26px 16px 16px;"><button type="button" class="ant-btn ant-btn-primary ant-btn-background-ghost"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-background-ghost"><span>Default</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-background-ghost"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-background-ghost"><span>danger</span></button></div>`;
+exports[`renders ./components/button/demo/ghost.md correctly 1`] = `<div style="background: rgb(190, 200, 200); padding: 26px 16px 16px;"><button type="button" class="ant-btn ant-btn-primary ant-btn-background-ghost"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-background-ghost"><span>Default</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-background-ghost"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-background-ghost"><span>Danger</span></button> <button type="button" class="ant-btn ant-btn-link ant-btn-background-ghost"><span>Link</span></button></div>`;
 
 exports[`renders ./components/button/demo/icon.md correctly 1`] = `
 <div><button type="button" class="ant-btn ant-btn-primary ant-btn-circle"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
@@ -75,7 +75,7 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
 
 exports[`renders ./components/button/demo/size.md correctly 1`] = `
 <div>
-  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-lg"><span>Normal</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-lg"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-lg"><span>Danger</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg"><i class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-lg"><span>Normal</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-lg"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-lg"><span>Danger</span></button> <button type="button" class="ant-btn ant-btn-link ant-btn-lg"><span>Link</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg"><i class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
       </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><i class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>

components/button/button.jsx

@@ -118,6 +118,7 @@ export default {
   },
   render() {
     const {
+      type,
       htmlType,
       classes,
       icon,
@@ -151,15 +152,19 @@ export default {
           {kids}
         </a>
       );
-    } else {
+    }
-      return (
+
-        <Wave>
+    const buttonNode = (
       <button {...buttonProps} ref="buttonNode" type={htmlType || 'button'}>
         {iconNode}
         {kids}
       </button>
-        </Wave>
     );
+
+    if (type === 'link') {
+      return buttonNode;
     }
+
+    return <Wave>{buttonNode}</Wave>;
   },
 };

components/button/buttonTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from '../_util/vue-types';
 export default () => ({
   prefixCls: PropTypes.string.def('ant-btn'),
-  type: PropTypes.oneOf(['primary', 'danger', 'dashed', 'ghost', 'default']).def('default'),
+  type: PropTypes.oneOf(['primary', 'danger', 'dashed', 'ghost', 'link', 'default']).def('default'),
   htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).def('button'),
   icon: PropTypes.string,
   shape: PropTypes.oneOf(['circle', 'circle-outline']),

components/button/demo/basic.md

@@ -1,12 +1,12 @@
 
 <cn>
 #### 按钮类型
-按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
+按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
 </cn>
 
 <us>
 #### Type
-There are `primary` button, `default` button, `dashed` button and `danger` button in antd.
+There are `primary` button, `default` button, `dashed` button and `danger` button and `link` button in antd.
 </us>
 
 ```html
@@ -16,6 +16,7 @@ There are `primary` button, `default` button, `dashed` button and `danger` butto
     <a-button>Default</a-button>
     <a-button type="dashed">Dashed</a-button>
     <a-button type="danger">Danger</a-button>
+    <a-button type="link">Link</a-button>
   </div>
 </template>
 ```

components/button/demo/block.md

@@ -15,7 +15,8 @@
     <a-button type="primary" block>Primary</a-button>
     <a-button block>Default</a-button>
     <a-button type="dashed" block>Dashed</a-button>
-    <a-button type="danger" block>danger</a-button>
+    <a-button type="danger" block>Danger</a-button>
+    <a-button type="link" block>Link</a-button>
   </div>
 </template>
 ```

components/button/demo/disabled.md

@@ -20,6 +20,9 @@ To mark a button as disabled, add the `disabled` property to the `Button`.
     <br />
     <a-button type="dashed">Dashed</a-button>
     <a-button type="dashed" disabled>Dashed(disabled)</a-button>
+    <br />
+    <a-button type="link">Link</a-button>
+    <a-button type="link" disabled>Link(disabled)</a-button>
     <div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
       <a-button ghost>Ghost</a-button>
       <a-button ghost disabled>Ghost(disabled)</a-button>

components/button/demo/ghost.md

@@ -14,7 +14,8 @@
     <a-button type="primary" ghost>Primary</a-button>
     <a-button ghost>Default</a-button>
     <a-button type="dashed" ghost>Dashed</a-button>
-    <a-button type="danger" ghost>danger</a-button>
+    <a-button type="danger" ghost>Danger</a-button>
+    <a-button type="link" ghost>Link</a-button>
   </div>
 </template>
 ```

components/button/demo/size.md

@@ -23,6 +23,7 @@ If a large or small button is desired, set the `size` property to either `large`
     <a-button :size="size">Normal</a-button>
     <a-button type="dashed" :size="size">Dashed</a-button>
     <a-button type="danger" :size="size">Danger</a-button>
+    <a-button type="link" :size="size">Link</a-button>
     <br />
     <a-button type="primary" shape="circle" icon="download" :size="size" />
     <a-button type="primary" icon="download" :size="size">Download</a-button>

components/button/index.en-US.md

@@ -11,7 +11,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 | loading | set the loading status of button | boolean \| { delay: number } | false |
 | shape | can be set to `circle` or omitted | string | - |
 | size | can be set to `small` `large` or omitted | string | `default` |
-| 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` or omitted (meaning `default`) | string | `default` |
 | block | option to fit button width to its parent width | boolean | `false` |
 
 ### events

components/button/index.zh-CN.md

@@ -13,7 +13,7 @@
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
 | shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | - |
 | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
-| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` | string | - |
+| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设| string | `default` |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |
 
 ### 事件

components/button/style/index.less

@@ -69,6 +69,10 @@
     .btn-danger;
   }
 
+  &-link {
+    .btn-link;
+  }
+
   &-circle,
   &-circle-outline {
     .btn-circle(@btn-prefix-cls);
@@ -157,6 +161,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 @@
   height: @height;
 }
 
-.button-disabled() {
+.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
   &.disabled,
   &[disabled] {
     &,
@@ -15,7 +15,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;
     }
@@ -83,19 +83,29 @@
   .button-disabled();
 }
 
-.button-variant-ghost(@color) {
+.button-variant-ghost(@color; @border: @color) {
-  .button-color(@color; transparent; @color);
+  .button-color(@color; transparent; @border);
   text-shadow: none;
 
   &:hover,
   &:focus {
+    & 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 {
+    & 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();
 }
@@ -242,6 +252,19 @@
   .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);
+}
+
 // circle button: the content only contains icon
 .btn-circle(@btnClassName: btn) {
   .square(@btn-circle-size);