feat: Space add split (#26948)

* feat: Space add split

* Update index.en-US.md

* changed

* improve

* improve

* Update demo.test.js.snap

* Update vertical-split.md

* Update demo.test.js.snap

* remove vertical-split

* Update demo.test.js.snap

components/space/Item.tsx

@@ -15,6 +15,7 @@ export interface ItemProps {
   direction?: 'horizontal' | 'vertical';
   size?: SizeType | number;
   marginDirection: 'marginLeft' | 'marginRight';
+  split?: string | React.ReactNode;
 }
 
 export default function Item({
@@ -24,6 +25,7 @@ export default function Item({
   size,
   marginDirection,
   children,
+  split,
 }: ItemProps) {
   const latestIndex = React.useContext(LastIndexContext);
 
@@ -31,19 +33,24 @@ export default function Item({
     return null;
   }
 
+  const style =
+    index >= latestIndex
+      ? {}
+      : {
+          [direction === 'vertical' ? 'marginBottom' : marginDirection]:
+            ((typeof size === 'string' ? spaceSize[size] : size) ?? 0) / (split ? 2 : 1),
+        };
+
   return (
-    <div
-      className={className}
-      style={
-        index >= latestIndex
-          ? {}
-          : {
-              [direction === 'vertical' ? 'marginBottom' : marginDirection]:
-                typeof size === 'string' ? spaceSize[size] : size,
-            }
-      }
-    >
-      {children}
-    </div>
+    <>
+      <div className={className} style={style}>
+        {children}
+      </div>
+      {index < latestIndex && split && (
+        <span className={`${className}-split`} style={style}>
+          {split}
+        </span>
+      )}
+    </>
   );
 }

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

@@ -533,6 +533,60 @@ Array [
 ]
 `;
 
+exports[`renders ./components/space/demo/split.md correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:4px"
+  >
+    <a
+      class="ant-typography"
+    >
+      Link
+    </a>
+  </div>
+  <span
+    class="ant-space-item-split"
+    style="margin-right:4px"
+  >
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+  </span>
+  <div
+    class="ant-space-item"
+    style="margin-right:4px"
+  >
+    <a
+      class="ant-typography"
+    >
+      Link
+    </a>
+  </div>
+  <span
+    class="ant-space-item-split"
+    style="margin-right:4px"
+  >
+    <div
+      class="ant-divider ant-divider-vertical"
+      role="separator"
+    />
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    <a
+      class="ant-typography"
+    >
+      Link
+    </a>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"

components/space/__tests__/__snapshots__/index.test.js.snap

@@ -87,3 +87,41 @@ Array [
   </div>,
 ]
 `;
+
+exports[`Space split 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:4px"
+  >
+    text1
+  </div>
+  <span
+    class="ant-space-item-split"
+    style="margin-right:4px"
+  >
+    -
+  </span>
+  <div
+    class="ant-space-item"
+    style="margin-right:4px"
+  >
+    <span>
+      text1
+    </span>
+  </div>
+  <span
+    class="ant-space-item-split"
+    style="margin-right:4px"
+  >
+    -
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    text3
+  </div>
+</div>
+`;

components/space/__tests__/index.test.js

@@ -125,4 +125,15 @@ describe('Space', () => {
 
     expect(wrapper.find('#demo').text()).toBe('2');
   });
+
+  it('split', () => {
+    const wrapper = mount(
+      <Space split="-">
+        text1<span>text1</span>
+        <>text3</>
+      </Space>,
+    );
+
+    expect(render(wrapper)).toMatchSnapshot();
+  });
 });

components/space/demo/split.md

+---
+order: 99
+title:
+  zh-CN: 分隔符
+  en-US: Split
+---
+
+## zh-CN
+
+相邻组件分隔符。
+
+## en-US
+
+Crowded components split.
+
+```jsx
+import { Space, Typography, Divider } from 'antd';
+
+function SpaceSplit() {
+  return (
+    <Space split={<Divider type="vertical" />}>
+      <Typography.Link>Link</Typography.Link>
+      <Typography.Link>Link</Typography.Link>
+      <Typography.Link>Link</Typography.Link>
+    </Space>
+  );
+}
+
+ReactDOM.render(<SpaceSplit />, mountNode);
+```

components/space/index.en-US.md

@@ -19,3 +19,4 @@ Avoid components clinging together and set a unified space.
 | align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
 | direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | size | The space size | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
+| split | Set split | ReactNode | - | 4.7.0 |

components/space/index.tsx

 import * as React from 'react';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
-import { ConfigConsumerProps, ConfigContext } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import { SizeType } from '../config-provider/SizeContext';
 import Item from './Item';
 
@@ -15,12 +15,11 @@ export interface SpaceProps {
   direction?: 'horizontal' | 'vertical';
   // No `stretch` since many components do not support that.
   align?: 'start' | 'end' | 'center' | 'baseline';
+  split?: React.ReactNode;
 }
 
 const Space: React.FC<SpaceProps> = props => {
-  const { getPrefixCls, space, direction: directionConfig }: ConfigConsumerProps = React.useContext(
-    ConfigContext,
-  );
+  const { getPrefixCls, space, direction: directionConfig } = React.useContext(ConfigContext);
 
   const {
     size = space?.size || 'small',
@@ -29,6 +28,7 @@ const Space: React.FC<SpaceProps> = props => {
     children,
     direction = 'horizontal',
     prefixCls: customizePrefixCls,
+    split,
     ...otherProps
   } = props;
 
@@ -70,6 +70,7 @@ const Space: React.FC<SpaceProps> = props => {
         size={size}
         index={i}
         marginDirection={marginDirection}
+        split={split}
       >
         {child}
       </Item>

components/space/index.zh-CN.md

@@ -23,3 +23,4 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
 | align     | 对齐方式 | `start` \| `end` \|`center` \|`baseline`   | -            | 4.2.0 |
 | direction | 间距方向 | `vertical` \| `horizontal`                 | `horizontal` | 4.1.0 |
 | size      | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small`      | 4.1.0 |
+| split     | 设置拆分 | ReactNode                                  | -            | 4.7.0 |