fix: remove style of ghost link & ghost text button (#24953)

* fix: remove style of ghost link & ghost text button

* feat: devWarning on link or text + ghost button

* test: update snapshot

* fix: fix devWarning valid arg

* test: test warning

* docs: update ghost button demo

* test: change resetWarned position

* chore

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

@@ -325,22 +325,6 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
       Dashed
     </span>
   </button>
-  <button
-    class="ant-btn ant-btn-text ant-btn-background-ghost"
-    type="button"
-  >
-    <span>
-      Text
-    </span>
-  </button>
-  <button
-    class="ant-btn ant-btn-link ant-btn-background-ghost"
-    type="button"
-  >
-    <span>
-      Link
-    </span>
-  </button>
 </div>
 `;
 

components/button/__tests__/type.test.tsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { mount, render } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { SearchOutlined } from '@ant-design/icons';
+import { resetWarned } from 'rc-util/lib/warning'
 import Button from '..';
 import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';
@@ -281,6 +282,7 @@ describe('Button', () => {
   });
 
   it('should warning when pass a string as icon props', () => {
+    resetWarned()
     const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     mount(<Button type="primary" icon="ab" />);
     expect(warnSpy).not.toHaveBeenCalled();
@@ -291,6 +293,26 @@ describe('Button', () => {
     warnSpy.mockRestore();
   });
 
+  it('should warning when pass type=link and ghost=true', () => {
+    resetWarned()
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Button type="link" ghost />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      "Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.",
+    );
+    warnSpy.mockRestore();
+  })
+  
+  it('should warning when pass type=text and ghost=true', () => {
+    resetWarned()
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<Button type="text" ghost />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      "Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.",
+    );
+    warnSpy.mockRestore();
+  })
+
   it('skip check 2 words when ConfigProvider disable this', () => {
     const wrapper = mount(
       <ConfigProvider autoInsertSpaceInButton={false}>

components/button/button.tsx

@@ -18,6 +18,10 @@ function isString(str: any) {
   return typeof str === 'string';
 }
 
+function isUnborderedButtonType(type: ButtonType | undefined) {
+  return type === 'text' || type === 'link';
+}
+
 // Insert one space between two chinese characters automatically.
 function insertSpace(child: React.ReactChild, needInserted: boolean) {
   // Check the child if is undefined or null.
@@ -147,7 +151,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const delayTimeoutRef = React.useRef<number>();
 
   const isNeedInserted = () => {
-    return React.Children.count(children) === 1 && !icon && type !== 'link' && type !== 'text';
+    return React.Children.count(children) === 1 && !icon && !isUnborderedButtonType(type);
   };
 
   const fixTwoCNChar = () => {
@@ -204,6 +208,12 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
   );
 
+  devWarning(
+    !(ghost && isUnborderedButtonType(type)),
+    'Button',
+    "`link` or `text` button can't be a `ghost` button.",
+  );
+
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
   const autoInsertSpace = autoInsertSpaceInButton !== false;
 
@@ -228,7 +238,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     [`${prefixCls}-${shape}`]: shape,
     [`${prefixCls}-${sizeCls}`]: sizeCls,
     [`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
-    [`${prefixCls}-background-ghost`]: ghost,
+    [`${prefixCls}-background-ghost`]: ghost && !isUnborderedButtonType(type),
     [`${prefixCls}-loading`]: innerLoading,
     [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
     [`${prefixCls}-block`]: block,
@@ -274,7 +284,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     </button>
   );
 
-  if (type === 'link' || type === 'text') {
+  if (isUnborderedButtonType(type)) {
     return buttonNode;
   }
 

components/button/demo/ghost.md

@@ -25,12 +25,6 @@ ReactDOM.render(
     <Button type="dashed" ghost>
       Dashed
     </Button>
-    <Button type="text" ghost>
-      Text
-    </Button>
-    <Button type="link" ghost>
-      Link
-    </Button>
   </div>,
   mountNode,
 );

components/button/style/index.less

@@ -208,12 +208,6 @@
     .button-variant-ghost(@btn-danger-border, transparent);
   }
 
-  &-background-ghost&-link {
-    .button-variant-ghost(@link-color; transparent);
-
-    color: @btn-link-ghost-color;
-  }
-
   &-two-chinese-chars::first-letter {
     letter-spacing: 0.34em;
   }

components/style/themes/dark.less

@@ -220,7 +220,6 @@
 @btn-default-ghost-color: @text-color;
 @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

@@ -218,7 +218,6 @@
 
 @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);