Merge branch 'feature' into master

ant-design · Apr 15, 2024 · 4a0fbd5 · 4a0fbd5
2 parents dab5eb2 + 1092660
commit 4a0fbd5
Show file tree

Hide file tree

Showing 75 changed files with 318 additions and 206 deletions.
diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx
@@ -91,7 +91,7 @@ const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, id }) =
   }, [value]);
 
   return (
-    <Flex gap="large" align="center" wrap="wrap">
+    <Flex gap="large" align="center" wrap>
       <Input
         value={typeof value === 'string' ? value : value?.toHexString()}
         onChange={(event) => onChange?.(event.target.value)}

diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx
@@ -84,7 +84,7 @@ const ThemePicker: React.FC<ThemePickerProps> = (props) => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
   return (
-    <Flex gap="large" wrap="wrap">
+    <Flex gap="large" wrap>
       {(Object.keys(THEMES) as (keyof typeof THEMES)[]).map<React.ReactNode>((theme, index) => (
         <Flex vertical gap="small" justify="center" align="center" key={theme}>
           <label

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -405,8 +405,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
               dangerouslySetInnerHTML={{ __html: description }}
             />
           )}
-
-          <Flex wrap="wrap" gap="middle" className="code-box-actions">
+          <Flex wrap gap="middle" className="code-box-actions">
             {showOnlineUrl && (
               <Tooltip title={<FormattedMessage id="app.demo.online" />}>
                 <a

diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2776,6 +2776,31 @@ exports[`renders components/button/demo/multiple.tsx extend context correctly 1`
 
 exports[`renders components/button/demo/multiple.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/button/demo/noSpace.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确定
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确 定
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders components/button/demo/noSpace.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/button/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div

diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -2243,6 +2243,29 @@ exports[`renders components/button/demo/multiple.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/button/demo/noSpace.tsx correctly 1`] = `
+<div
+  class="ant-flex ant-flex-wrap-wrap ant-flex-gap-middle"
+>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确定
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      确 定
+    </span>
+  </button>
+</div>
+`;
+
 exports[`renders components/button/demo/size.tsx correctly 1`] = `
 Array [
   <div

diff --git a/components/button/__tests__/index.test.tsx b/components/button/__tests__/index.test.tsx
@@ -442,4 +442,10 @@ describe('Button', () => {
     const { container } = render(<Button type={'' as any} />);
     expect(container.querySelector('.ant-btn-default')).toBeTruthy();
   });
+
+  it('should support autoInsertSpace', () => {
+    const text = '确定';
+    const { container } = render(<Button autoInsertSpace={false}>{text}</Button>);
+    expect(container.querySelector<HTMLButtonElement>('button')?.textContent).toBe(text);
+  });
 });
diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -51,6 +51,7 @@ type MergedHTMLAttributes = Omit<
 export interface ButtonProps extends BaseButtonProps, MergedHTMLAttributes {
   href?: string;
   htmlType?: ButtonHTMLType;
+  autoInsertSpace?: boolean;
 }
 
 type LoadingConfigType = {
@@ -98,14 +99,18 @@ const InternalCompoundedButton = React.forwardRef<
     htmlType = 'button',
     classNames: customClassNames,
     style: customStyle = {},
+    autoInsertSpace,
     ...rest
   } = props;
 
   // https://github.com/ant-design/ant-design/issues/47605
   // Compatible with original `type` behavior
   const mergedType = type || 'default';
 
-  const { getPrefixCls, autoInsertSpaceInButton, direction, button } = useContext(ConfigContext);
+  const { getPrefixCls, direction, button } = useContext(ConfigContext);
+
+  const mergedInsertSpace = autoInsertSpace ?? button?.autoInsertSpace ?? true;
+
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -151,7 +156,7 @@ const InternalCompoundedButton = React.forwardRef<
 
   useEffect(() => {
     // FIXME: for HOC usage like <FormatMessage />
-    if (!buttonRef || !(buttonRef as any).current || autoInsertSpaceInButton === false) {
+    if (!buttonRef || !(buttonRef as any).current || !mergedInsertSpace) {
       return;
     }
     const buttonText = (buttonRef as any).current.textContent;
@@ -190,7 +195,6 @@ const InternalCompoundedButton = React.forwardRef<
     );
   }
 
-  const autoInsertSpace = autoInsertSpaceInButton !== false;
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
   const sizeClassNameMap = { large: 'lg', small: 'sm', middle: undefined };
@@ -214,7 +218,7 @@ const InternalCompoundedButton = React.forwardRef<
       [`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType,
       [`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonType(mergedType),
       [`${prefixCls}-loading`]: innerLoading,
-      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace && !innerLoading,
+      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && mergedInsertSpace && !innerLoading,
       [`${prefixCls}-block`]: block,
       [`${prefixCls}-dangerous`]: !!danger,
       [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -252,12 +256,11 @@ const InternalCompoundedButton = React.forwardRef<
     );
 
   const kids =
-    children || children === 0 ? spaceChildren(children, needInserted && autoInsertSpace) : null;
+    children || children === 0 ? spaceChildren(children, needInserted && mergedInsertSpace) : null;
 
   const genButtonContent = (iconComponent: React.ReactNode, kidsComponent: React.ReactNode) => {
     const isRTL = direction === 'rtl';
     const iconFirst = (iconPosition === 'start' && !isRTL) || (iconPosition === 'end' && isRTL);
-
     return (
       <>
         {iconFirst ? iconComponent : kidsComponent}

diff --git a/components/button/demo/basic.tsx b/components/button/demo/basic.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex gap="small" wrap="wrap">
+  <Flex gap="small" wrap>
     <Button type="primary">Primary Button</Button>
     <Button>Default Button</Button>
     <Button type="dashed">Dashed Button</Button>

diff --git a/components/button/demo/chinese-chars-loading.tsx b/components/button/demo/chinese-chars-loading.tsx
@@ -7,7 +7,7 @@ const Text2 = () => <span>部署</span>;
 const Text3 = () => <>Submit</>;
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     <Button>
       <span>
         <span>部署</span>

diff --git a/components/button/demo/component-token.tsx b/components/button/demo/component-token.tsx
@@ -24,12 +24,12 @@ const App: React.FC = () => (
     }}
   >
     <Flex gap="small" vertical>
-      <Flex wrap="wrap" gap="small">
+      <Flex wrap gap="small">
         <Button type="text">TEXT</Button>
         <Button type="primary">CONTAINED</Button>
         <Button>OUTLINED</Button>
       </Flex>
-      <Flex wrap="wrap" gap="small">
+      <Flex wrap gap="small">
         <Button type="text" disabled>
           TEXT
         </Button>
@@ -38,7 +38,7 @@ const App: React.FC = () => (
         </Button>
         <Button disabled>OUTLINED</Button>
       </Flex>
-      <Flex wrap="wrap" gap="small">
+      <Flex wrap gap="small">
         <Button type="text" size="small">
           TEXT
         </Button>

diff --git a/components/button/demo/danger.tsx b/components/button/demo/danger.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small">
+  <Flex wrap gap="small">
     <Button type="primary" danger>
       Primary
     </Button>

diff --git a/components/button/demo/debug-icon.tsx b/components/button/demo/debug-icon.tsx
@@ -19,7 +19,7 @@ const App: React.FC = () => {
       </Divider>
       <ConfigProvider componentSize={size}>
         <Flex gap="small" vertical>
-          <Flex gap="small" wrap="wrap">
+          <Flex gap="small" wrap>
             <Tooltip title="search">
               <Button type="primary" shape="circle" icon={<SearchOutlined />} />
             </Tooltip>
@@ -34,7 +34,7 @@ const App: React.FC = () => {
             </Tooltip>
             <Button icon={<SearchOutlined />}>Search</Button>
           </Flex>
-          <Flex gap="small" wrap="wrap">
+          <Flex gap="small" wrap>
             <Tooltip title="search">
               <Button shape="circle" icon={<SearchOutlined />} />
             </Tooltip>

diff --git a/components/button/demo/ghost.tsx b/components/button/demo/ghost.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Flex } from 'antd';
 
 const App: React.FC = () => (
-  <Flex wrap="wrap" gap="small" className="site-button-ghost-wrapper">
+  <Flex wrap gap="small" className="site-button-ghost-wrapper">
     <Button type="primary" ghost>
       Primary
     </Button>

diff --git a/components/button/demo/icon-position.tsx b/components/button/demo/icon-position.tsx
@@ -17,7 +17,7 @@ const App: React.FC = () => {
         Preview
       </Divider>
       <Flex gap="small" vertical>
-        <Flex wrap="wrap" gap="small">
+        <Flex wrap gap="small">
           <Tooltip title="search">
             <Button type="primary" shape="circle" icon={<SearchOutlined />} />
           </Tooltip>
@@ -34,7 +34,7 @@ const App: React.FC = () => {
             Search
           </Button>
         </Flex>
-        <Flex wrap="wrap" gap="small">
+        <Flex wrap gap="small">
           <Tooltip title="search">
             <Button shape="circle" icon={<SearchOutlined />} />
           </Tooltip>

diff --git a/components/button/demo/icon.tsx b/components/button/demo/icon.tsx
@@ -4,7 +4,7 @@ import { Button, Flex, Tooltip } from 'antd';
 
 const App: React.FC = () => (
   <Flex gap="small" vertical>
-    <Flex wrap="wrap" gap="small">
+    <Flex wrap gap="small">
       <Tooltip title="search">
         <Button type="primary" shape="circle" icon={<SearchOutlined />} />
       </Tooltip>
@@ -19,7 +19,7 @@ const App: React.FC = () => (
       </Tooltip>
       <Button icon={<SearchOutlined />}>Search</Button>
     </Flex>
-    <Flex wrap="wrap" gap="small">
+    <Flex wrap gap="small">
       <Tooltip title="search">
         <Button shape="circle" icon={<SearchOutlined />} />
       </Tooltip>

diff --git a/components/button/demo/loading.tsx b/components/button/demo/loading.tsx
@@ -23,7 +23,7 @@ const App: React.FC = () => {
 
   return (
     <Flex gap="small" vertical>
-      <Flex gap="small" align="center" wrap="wrap">
+      <Flex gap="small" align="center" wrap>
         <Button type="primary" loading>
           Loading
         </Button>
@@ -32,7 +32,7 @@ const App: React.FC = () => {
         </Button>
         <Button type="primary" icon={<PoweroffOutlined />} loading />
       </Flex>
-      <Flex gap="small" wrap="wrap">
+      <Flex gap="small" wrap>
         <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
           Click me!
         </Button>

diff --git a/components/button/demo/noSpace.md b/components/button/demo/noSpace.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+我们默认在两个汉字之间添加空格，可以通过设置 `autoInsertSpace` 为 `false` 关闭。
+
+## en-US
+
+We add a space between two Chinese characters by default, which can be removed by setting `autoInsertSpace` to `false`.
diff --git a/components/button/demo/noSpace.tsx b/components/button/demo/noSpace.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button, Flex } from 'antd';
+
+const App: React.FC = () => (
+  <Flex gap="middle" wrap>
+    <Button type="primary" autoInsertSpace={false}>
+      确定
+    </Button>
+    <Button type="primary" autoInsertSpace>
+      确定
+    </Button>
+  </Flex>
+);
+
+export default App;
diff --git a/components/button/demo/size.tsx b/components/button/demo/size.tsx
@@ -18,7 +18,7 @@ const App: React.FC = () => {
         Preview
       </Divider>
       <Flex gap="small" align="flex-start" vertical>
-        <Flex gap="small" wrap="wrap">
+        <Flex gap="small" wrap>
           <Button type="primary" size={size}>
             Primary
           </Button>
@@ -30,7 +30,7 @@ const App: React.FC = () => {
         <Button type="link" size={size}>
           Link
         </Button>
-        <Flex gap="small" wrap="wrap">
+        <Flex gap="small" wrap>
           <Button type="primary" icon={<DownloadOutlined />} size={size} />
           <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
           <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />

diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -58,6 +58,7 @@ Different button styles can be generated by setting Button properties. The recom
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| autoInsertSpace | We add a space between two Chinese characters by default, which can be removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 |
 | block | Option to fit button width to its parent width | boolean | false |  |
 | classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
 | danger | Set the danger status of button | boolean | false |  |
@@ -73,7 +74,7 @@ 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 | - |  |
 
 It accepts all props which native buttons support.
 
@@ -97,18 +98,6 @@ If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvi
 </ConfigProvider>
 ```
 
-### How to remove space between 2 chinese characters?
-
-Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#api) to set `autoInsertSpaceInButton` as `false`.
-
-```jsx
-<ConfigProvider autoInsertSpaceInButton={false}>
-  <Button>按钮</Button>
-</ConfigProvider>
-```
-
-<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>
 .site-button-ghost-wrapper {
   padding: 16px;