feat: 💄 Add text type Button (#22552)

* 🆕 Add text type Button

`<Button type="text" />`

close #15892

* Add test cases

* missing type

* missing type

* fix missing type

* Update components/button/index.zh-CN.md

Co-Authored-By: zefeng <zefengbao@outlook.com>

Co-authored-by: Amumu <yoyo837@hotmail.com>
Co-authored-by: zefeng <zefengbao@outlook.com>

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

@@ -1,40 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/button/demo/basic.md correctly 1`] = `
-<div>
+Array [
   <button
     class="ant-btn ant-btn-primary"
     type="button"
   >
     <span>
-      Primary
+      Primary Button
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn"
     type="button"
   >
     <span>
-      Default
+      Default Button
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn ant-btn-dashed"
     type="button"
   >
     <span>
-      Dashed
+      Dashed Button
     </span>
-  </button>
+  </button>,
+  <br />,
+  <button
+    class="ant-btn ant-btn-text"
+    type="button"
+  >
+    <span>
+      Text Button
+    </span>
+  </button>,
   <button
     class="ant-btn ant-btn-link"
     type="button"
   >
     <span>
-      Link
+      Link Button
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/button/demo/block.md correctly 1`] = `
@@ -185,6 +194,24 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
     </span>
   </button>
   <br />
+  <button
+    class="ant-btn ant-btn-text"
+    type="button"
+  >
+    <span>
+      Text
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-text"
+    disabled=""
+    type="button"
+  >
+    <span>
+      Text(disabled)
+    </span>
+  </button>
+  <br />
   <button
     class="ant-btn ant-btn-link ant-btn-dangerous"
     type="button"
@@ -272,6 +299,14 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
       link
     </span>
   </button>
+  <button
+    class="ant-btn ant-btn-text ant-btn-background-ghost"
+    type="button"
+  >
+    <span>
+      Text Button
+    </span>
+  </button>
   <button
     class="ant-btn ant-btn-link ant-btn-background-ghost"
     type="button"

components/button/__tests__/__snapshots__/type.test.tsx.snap

@@ -268,18 +268,6 @@ exports[`Button rtl render component should be rendered correctly in RTL directi
 />
 `;
 
-exports[`Button should has click wave effect 1`] = `
-<button
-  ant-click-animating-without-extra-node="true"
-  class="ant-btn ant-btn-primary"
-  type="button"
->
-  <span>
-    button
-  </span>
-</button>
-`;
-
 exports[`Button should merge text if children using variable 1`] = `
 <button
   class="ant-btn"
@@ -291,17 +279,6 @@ exports[`Button should merge text if children using variable 1`] = `
 </button>
 `;
 
-exports[`Button should not insert space to link button 1`] = `
-<button
-  class="ant-btn ant-btn-link"
-  type="button"
->
-  <span>
-    按钮
-  </span>
-</button>
-`;
-
 exports[`Button should not render as link button when href is undefined 1`] = `
 <button
   class="ant-btn ant-btn-primary"

components/button/__tests__/type.test.tsx

@@ -95,8 +95,11 @@ describe('Button', () => {
   });
 
   // https://github.com/ant-design/ant-design/issues/18118
-  it('should not insert space to link button', () => {
-    expect(<Button type="link">按钮</Button>).toMatchRenderedSnapshot();
+  it('should not insert space to link or text button', () => {
+    const wrapper1 = mount(<Button type="link">按钮</Button>);
+    expect(wrapper1.text()).toBe('按钮');
+    const wrapper2 = mount(<Button type="text">按钮</Button>);
+    expect(wrapper2.text()).toBe('按钮');
   });
 
   it('should render empty button without errors', () => {
@@ -188,11 +191,31 @@ describe('Button', () => {
     expect(<Button>{false}</Button>).toMatchRenderedSnapshot();
   });
 
-  it('should has click wave effect', async () => {
+  it('should have click wave effect', async () => {
     const wrapper = mount(<Button type="primary">button</Button>);
     wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
-    await new Promise(resolve => setTimeout(resolve, 0));
-    expect(wrapper.render()).toMatchSnapshot();
+    await sleep(0);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(true);
+  });
+
+  it('should not have click wave effect for link type button', async () => {
+    const wrapper = mount(<Button type="link">button</Button>);
+    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
+    await sleep(0);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(false);
+  });
+
+  it('should not have click wave effect for text type button', async () => {
+    const wrapper = mount(<Button type="link">button</Button>);
+    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
+    await sleep(0);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(false);
   });
 
   it('should not render as link button when href is undefined', async () => {
@@ -212,7 +235,6 @@ describe('Button', () => {
         This {'is'} a test {1}
       </Button>,
     );
-
     expect(wrapper.render()).toMatchSnapshot();
   });
 

components/button/button.tsx

@@ -65,7 +65,7 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {
   );
 }
 
-const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link');
+const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
 export type ButtonType = typeof ButtonTypes[number];
 const ButtonShapes = tuple('circle', 'circle-outline', 'round');
 export type ButtonShape = typeof ButtonShapes[number];
@@ -120,7 +120,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
 
   const isNeedInserted = () => {
     const { icon, children, type } = props;
-    return React.Children.count(children) === 1 && !icon && type !== 'link';
+    return React.Children.count(children) === 1 && !icon && type !== 'link' && type !== 'text';
   };
 
   const fixTwoCNChar = () => {
@@ -254,7 +254,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     </button>
   );
 
-  if (type === 'link') {
+  if (type === 'link' || type === 'text') {
     return buttonNode;
   }
 

components/button/demo/basic.md

@@ -17,12 +17,14 @@ There are `primary` button, `default` button, `dashed` button and `link` button
 import { Button } from 'antd';
 
 ReactDOM.render(
-  <div>
-    <Button type="primary">Primary</Button>
-    <Button>Default</Button>
-    <Button type="dashed">Dashed</Button>
-    <Button type="link">Link</Button>
-  </div>,
+  <>
+    <Button type="primary">Primary Button</Button>
+    <Button>Default Button</Button>
+    <Button type="dashed">Dashed Button</Button>
+    <br />
+    <Button type="text">Text Button</Button>
+    <Button type="link">Link Button</Button>
+  </>,
   mountNode,
 );
 ```

components/button/demo/disabled.md

@@ -36,6 +36,11 @@ ReactDOM.render(
       Link(disabled)
     </Button>
     <br />
+    <Button type="text">Text</Button>
+    <Button type="text" disabled>
+      Text(disabled)
+    </Button>
+    <br />
     <Button type="link" danger>
       Danger Link
     </Button>

components/button/demo/ghost.md

@@ -25,6 +25,9 @@ ReactDOM.render(
     <Button type="dashed" ghost>
       link
     </Button>
+    <Button type="text" ghost>
+      Text Button
+    </Button>
     <Button type="link" ghost>
       link
     </Button>

components/button/index.en-US.md

@@ -15,6 +15,7 @@ In Ant Design we provide 4 types of button.
 - Primary button: indicate the main action, one primary button at most in one section.
 - Default button: indicate a series of actions without priority.
 - Dashed button: used for adding action commonly.
+- Text button: used for the most secondary action.
 - Link button: used for external links.
 
 And 4 other properties additionally.
@@ -39,7 +40,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 | shape | can be set to `circle`, `round` or omitted | string | - |  |
 | size | set the size of button | `large` \| `middle` \| `small` |  |  |
 | target | same as target attribute of a, works when href is specified | string | - |  |
-| type | can be set to `primary` `ghost` `dashed` `link` or omitted (meaning `default`) | string | `default` |  |
+| type | can be set to `primary` `ghost` `dashed` `danger` `link` `text` 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` |  |
 | danger | set the danger status of button | boolean | `false` |  |

components/button/index.zh-CN.md

@@ -16,7 +16,8 @@ subtitle: 按钮
 - 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
 - 默认按钮：用于没有主次之分的一组行动点。
 - 虚线按钮：常用于添加操作。
-- 链接按钮：用于次要或外链的行动点。
+- 文本按钮：用于最次级的行动点。
+- 链接按钮：用于作为外链的行动点。
 
 以及四种状态属性与上面配合使用。
 
@@ -42,7 +43,7 @@ subtitle: 按钮
 | shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |  |
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | 无 |  |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
-| type | 设置按钮类型，可选值为 `primary` `dashed` `link` 或者不设 | string | - |  |
+| type | 设置按钮类型 | `primary` \|  `ghost` \| `dashed` \| `danger` \| `link` \|  `text`  | - |  |
 | onClick | 点击按钮时的回调 | (event) => void | - |  |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |  |
 | danger | 设置危险按钮 | boolean | `false` |  |

components/button/style/index.less

@@ -80,6 +80,10 @@
     .btn-link;
   }
 
+  &-text {
+    .btn-text;
+  }
+
   &-dangerous {
     .btn-danger-default;
   }

components/button/style/mixin.less

@@ -347,6 +347,9 @@
 .btn-link() {
   .button-variant-other(@link-color, transparent, transparent);
   box-shadow: none;
+  &:hover {
+    background-color: @btn-link-hover-bg;
+  }
   &:hover,
   &:focus,
   &:active {
@@ -354,6 +357,25 @@
   }
   .button-disabled(@disabled-color; transparent; transparent);
 }
+// link button style
+.btn-text() {
+  .button-variant-other(@text-color, transparent, transparent);
+  box-shadow: none;
+  &:hover,
+  &:focus {
+    color: @text-color;
+    background-color: @btn-text-hover-bg;
+    border-color: transparent;
+  }
+
+  &:active {
+    color: @text-color;
+    background-color: fadein(@btn-text-hover-bg, 1%);
+    border-color: transparent;
+  }
+
+  .button-disabled(@disabled-color; transparent; transparent);
+}
 // round button
 .btn-round(@btnClassName: btn) {
   .button-size(@btn-circle-size; @btn-circle-size / 2; @font-size-base; @btn-circle-size);

components/style/themes/dark.less

@@ -221,6 +221,7 @@
 @btn-default-ghost-border: fade(@white, 25%);
 
 @btn-link-ghost-color: @text-color;
+@btn-text-hover-bg: rgba(255, 255, 255, 0.03);
 
 // Checkbox
 // ---

components/style/themes/default.less

@@ -219,6 +219,8 @@
 @btn-group-border: @primary-5;
 
 @btn-link-ghost-color: @component-background;
+@btn-link-hover-bg: transparent;
+@btn-text-hover-bg: rgba(0, 0, 0, 0.018);
 
 // Checkbox
 @checkbox-size: 16px;