feat: Button support autoInsertSpace prop

components/button/__tests__/index.test.tsx

@@ -441,4 +441,9 @@ describe('Button', () => {
     const { container } = render(<Button type={'' as any} />);
     expect(container.querySelector('.ant-btn-default')).toBeTruthy();
   });
+
+  it('should support autoInsertSpaceInButton', () => {
+    const { container } = render(<Button autoInsertSpaceInButton={false}>好的</Button>);
+    expect(container.querySelector<HTMLButtonElement>('button')?.textContent).toBe('好的');
+  });
 });

components/button/button.tsx

@@ -59,6 +59,7 @@ type MergedHTMLAttributes = Omit<
 export interface ButtonProps extends BaseButtonProps, MergedHTMLAttributes {
   href?: string;
   htmlType?: ButtonHTMLType;
+  autoInsertSpaceInButton?: boolean;
 }
 
 type CompoundedComponent = React.ForwardRefExoticComponent<
@@ -122,6 +123,9 @@ const InternalButton: React.ForwardRefRenderFunction<
   const mergedType = type || 'default';
 
   const { getPrefixCls, autoInsertSpaceInButton, direction, button } = useContext(ConfigContext);
+
+  const mergedAutoInsertSpaceInButton = props.autoInsertSpaceInButton ?? autoInsertSpaceInButton;
+
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -139,7 +143,7 @@ const InternalButton: React.ForwardRefRenderFunction<
 
   const internalRef = createRef<HTMLButtonElement | HTMLAnchorElement>();
 
-  const buttonRef = composeRef(ref, internalRef);
+  const buttonRef = composeRef<HTMLButtonElement | HTMLAnchorElement>(ref, internalRef);
 
   const needInserted =
     Children.count(children) === 1 && !icon && !isUnBorderedButtonType(mergedType);
@@ -167,7 +171,7 @@ const InternalButton: React.ForwardRefRenderFunction<
 
   useEffect(() => {
     // FIXME: for HOC usage like <FormatMessage />
-    if (!buttonRef || !(buttonRef as any).current || autoInsertSpaceInButton === false) {
+    if (!buttonRef || !(buttonRef as any).current || mergedAutoInsertSpaceInButton === false) {
       return;
     }
     const buttonText = (buttonRef as any).current.textContent;
@@ -206,7 +210,7 @@ const InternalButton: React.ForwardRefRenderFunction<
     );
   }
 
-  const autoInsertSpace = autoInsertSpaceInButton !== false;
+  const autoInsertSpace = mergedAutoInsertSpaceInButton !== false;
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
   const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };

components/button/index.en-US.md

@@ -73,7 +73,8 @@ Different button styles can be generated by setting Button properties. The recom
 | styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
 | type | Set button type | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | Set the handler to handle `click` event | (event: MouseEvent) => void | - |  |
+| onClick | Set the handler to handle `click` event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |  |
+| autoInsertSpaceInButton | Set `false` to remove space between 2 chinese characters on Button | boolean | `true` | 5.17.0 |
 
 It accepts all props which native buttons support.
 
@@ -107,6 +108,12 @@ Following the Ant Design specification, we will add one space between if Button
 </ConfigProvider>
 ```
 
+In addition, since version 5.17.0, Button component itself supports the `autoInsertSpaceInButton` prop:
+
+```jsx
+<Button autoInsertSpaceInButton={false}>按钮</Button>
+```
+
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" width="100px" height="64px" style="box-shadow: none; margin: 0;" alt="Button with two Chinese characters" />
 
 <style>

components/button/index.zh-CN.md

@@ -78,7 +78,8 @@ group:
 | styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - |  |
+| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |  |
+| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | `true` | 5.17.0 |
 
 支持原生 button 的其他所有属性。
 
@@ -112,6 +113,12 @@ group:
 </ConfigProvider>
 ```
 
+另外，自 5.17.0 版本开始，Button 组件本身支持了 `autoInsertSpaceInButton` 属性：
+
+```jsx
+<Button autoInsertSpaceInButton={false}>按钮</Button>
+```
+
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0" width="100px" height="64px" alt="移除两个汉字之间的空格"  />
 
 <style>

components/config-provider/index.en-US.md

@@ -52,7 +52,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true |  |
+| autoInsertSpaceInButton | Set `false` to remove space between 2 chinese characters on Button | boolean | true |  |
 | componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 |
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |