refactor(space): support separator and deprecate split (#53983)

* refactor(space): support separator and deprecate split

* update snap

components/space/Item.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import cls from 'classnames';
 
 import { SpaceContext } from './context';
 import type { SpaceContextType } from './context';
@@ -6,12 +7,24 @@ import type { SpaceContextType } from './context';
 export interface ItemProps {
   className: string;
   children: React.ReactNode;
+  prefix: string;
   index: number;
-  split?: React.ReactNode;
+  separator?: React.ReactNode;
   style?: React.CSSProperties;
+  classNames: Partial<Record<'separator', string>>;
+  styles: Partial<Record<'separator', React.CSSProperties>>;
 }
 
-const Item: React.FC<ItemProps> = ({ className, index, children, split, style }) => {
+const Item: React.FC<ItemProps> = ({
+  className,
+  prefix,
+  index,
+  children,
+  separator,
+  style,
+  classNames,
+  styles,
+}) => {
   const { latestIndex } = React.useContext<SpaceContextType>(SpaceContext);
 
   if (children === null || children === undefined) {
@@ -23,7 +36,14 @@ const Item: React.FC<ItemProps> = ({ className, index, children, split, style })
       <div className={className} style={style}>
         {children}
       </div>
-      {index < latestIndex && split && <span className={`${className}-split`}>{split}</span>}
+      {index < latestIndex && separator && (
+        <span
+          className={cls(`${prefix}-item-separator`, classNames.separator)}
+          style={styles.separator}
+        >
+          {separator}
+        </span>
+      )}
     </>
   );
 };

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -16736,6 +16736,58 @@ Array [
 
 exports[`renders components/space/demo/gap-in-line.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/space/demo/separator.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
+>
+  <div
+    class="ant-space-item"
+  >
+    <a
+      class="ant-typography css-var-test-id"
+    >
+      Link
+    </a>
+  </div>
+  <span
+    class="ant-space-item-separator"
+  >
+    <div
+      class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail"
+      role="separator"
+    />
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    <a
+      class="ant-typography css-var-test-id"
+    >
+      Link
+    </a>
+  </div>
+  <span
+    class="ant-space-item-separator"
+  >
+    <div
+      class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail"
+      role="separator"
+    />
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    <a
+      class="ant-typography css-var-test-id"
+    >
+      Link
+    </a>
+  </div>
+</div>
+`;
+
+exports[`renders components/space/demo/separator.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/space/demo/size.tsx extend context correctly 1`] = `
 Array [
   <div
@@ -16890,58 +16942,6 @@ Array [
 
 exports[`renders components/space/demo/size.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/space/demo/split.tsx extend context correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
->
-  <div
-    class="ant-space-item"
-  >
-    <a
-      class="ant-typography css-var-test-id"
-    >
-      Link
-    </a>
-  </div>
-  <span
-    class="ant-space-item-split"
-  >
-    <div
-      class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail"
-      role="separator"
-    />
-  </span>
-  <div
-    class="ant-space-item"
-  >
-    <a
-      class="ant-typography css-var-test-id"
-    >
-      Link
-    </a>
-  </div>
-  <span
-    class="ant-space-item-split"
-  >
-    <div
-      class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail"
-      role="separator"
-    />
-  </span>
-  <div
-    class="ant-space-item"
-  >
-    <a
-      class="ant-typography css-var-test-id"
-    >
-      Link
-    </a>
-  </div>
-</div>
-`;
-
-exports[`renders components/space/demo/split.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/space/demo/vertical.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical ant-space-gap-row-middle ant-space-gap-col-middle css-var-test-id"

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

@@ -4543,6 +4543,56 @@ Array [
 ]
 `;
 
+exports[`renders components/space/demo/separator.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
+>
+  <div
+    class="ant-space-item"
+  >
+    <a
+      class="ant-typography css-var-test-id"
+    >
+      Link
+    </a>
+  </div>
+  <span
+    class="ant-space-item-separator"
+  >
+    <div
+      class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail"
+      role="separator"
+    />
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    <a
+      class="ant-typography css-var-test-id"
+    >
+      Link
+    </a>
+  </div>
+  <span
+    class="ant-space-item-separator"
+  >
+    <div
+      class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail"
+      role="separator"
+    />
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    <a
+      class="ant-typography css-var-test-id"
+    >
+      Link
+    </a>
+  </div>
+</div>
+`;
+
 exports[`renders components/space/demo/size.tsx correctly 1`] = `
 Array [
   <div
@@ -4695,56 +4745,6 @@ Array [
 ]
 `;
 
-exports[`renders components/space/demo/split.tsx correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"
->
-  <div
-    class="ant-space-item"
-  >
-    <a
-      class="ant-typography css-var-test-id"
-    >
-      Link
-    </a>
-  </div>
-  <span
-    class="ant-space-item-split"
-  >
-    <div
-      class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail"
-      role="separator"
-    />
-  </span>
-  <div
-    class="ant-space-item"
-  >
-    <a
-      class="ant-typography css-var-test-id"
-    >
-      Link
-    </a>
-  </div>
-  <span
-    class="ant-space-item-split"
-  >
-    <div
-      class="ant-divider css-var-test-id ant-divider-vertical ant-divider-rail"
-      role="separator"
-    />
-  </span>
-  <div
-    class="ant-space-item"
-  >
-    <a
-      class="ant-typography css-var-test-id"
-    >
-      Link
-    </a>
-  </div>
-</div>
-`;
-
 exports[`renders components/space/demo/vertical.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-vertical ant-space-gap-row-middle ant-space-gap-col-middle css-var-test-id"

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

@@ -2,6 +2,40 @@
 
 exports[`Space rtl render component should be rendered correctly in RTL direction 1`] = `null`;
 
+exports[`Space separator 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-root"
+>
+  <div
+    class="ant-space-item"
+  >
+    text1
+  </div>
+  <span
+    class="ant-space-item-separator"
+  >
+    -
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    <span>
+      text1
+    </span>
+  </div>
+  <span
+    class="ant-space-item-separator"
+  >
+    -
+  </span>
+  <div
+    class="ant-space-item"
+  >
+    text3
+  </div>
+</div>
+`;
+
 exports[`Space should render correct with children 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-root"
@@ -143,37 +177,3 @@ Array [
   </div>,
 ]
 `;
-
-exports[`Space split 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-root"
->
-  <div
-    class="ant-space-item"
-  >
-    text1
-  </div>
-  <span
-    class="ant-space-item-split"
-  >
-    -
-  </span>
-  <div
-    class="ant-space-item"
-  >
-    <span>
-      text1
-    </span>
-  </div>
-  <span
-    class="ant-space-item-split"
-  >
-    -
-  </span>
-  <div
-    class="ant-space-item"
-  >
-    text3
-  </div>
-</div>
-`;

components/space/__tests__/index.test.tsx

@@ -166,9 +166,9 @@ describe('Space', () => {
     expect(container.querySelector('#demo')).toHaveTextContent('2');
   });
 
-  it('split', () => {
+  it('separator', () => {
     const { container } = render(
-      <Space split="-">
+      <Space separator="-">
         text1<span>text1</span>
         <>text3</>
       </Space>,
@@ -177,6 +177,22 @@ describe('Space', () => {
     expect(container.children[0]).toMatchSnapshot();
   });
 
+  it('legacy split', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(
+      <Space split="-">
+        text1<span>text1</span>
+        <>text3</>
+      </Space>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Space] `split` is deprecated. Please use `separator` instead.',
+    );
+
+    errorSpy.mockRestore();
+  });
+
   // https://github.com/ant-design/ant-design/issues/35305
   it('should not throw duplicated key warning', () => {
     const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
@@ -224,14 +240,16 @@ describe('Space', () => {
     const customClassNames = {
       root: 'custom-root',
       item: 'custom-item',
+      separator: 'custom-separator',
     };
 
     const customStyles = {
-      root: { backgroundColor: 'green' },
+      root: { color: 'green' },
       item: { color: 'red' },
+      separator: { color: 'blue' },
     };
     const { container } = render(
-      <Space classNames={customClassNames} styles={customStyles}>
+      <Space classNames={customClassNames} styles={customStyles} separator="-">
         <span>Text1</span>
         <span>Text2</span>
       </Space>,
@@ -239,14 +257,17 @@ describe('Space', () => {
 
     const rootElement = container.querySelector('.ant-space') as HTMLElement;
     const itemElement = container.querySelector('.ant-space-item') as HTMLElement;
+    const separatorElement = container.querySelector('.ant-space-item-separator') as HTMLElement;
 
     // Check classNames
     expect(rootElement.classList).toContain('custom-root');
     expect(itemElement.classList).toContain('custom-item');
+    expect(separatorElement.classList).toContain('custom-separator');
 
     // Check styles
-    expect(rootElement.style.backgroundColor).toBe('green');
+    expect(rootElement.style.color).toBe(customStyles.root.color);
-    expect(itemElement.style.color).toBe('red');
+    expect(itemElement.style.color).toBe(customStyles.item.color);
+    expect(separatorElement.style.color).toBe(customStyles.separator.color);
   });
 
   // ============================= orientation =============================

components/space/demo/_semantic.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
-import { Button, Space } from 'antd';
+import { Button, Divider, Space } from 'antd';
 
-import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
 import useLocale from '../../../.dumi/hooks/useLocale';
+import SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';
 
 const locales = {
   cn: {
     root: '根元素',
     item: '包裹的子组件',
+    separator: '分隔符',
   },
   en: {
     root: 'Root element',
     item: 'Wrapped item element',
+    separator: 'Separator element',
   },
 };
 
@@ -21,11 +23,12 @@ const App: React.FC = () => {
     <SemanticPreview
       componentName="Space"
       semantics={[
-        { name: 'root', desc: locale.root, version: '6.0.0' },
+        { name: 'root', desc: locale.root },
-        { name: 'item', desc: locale.item, version: '5.6.0' },
+        { name: 'item', desc: locale.item },
+        { name: 'separator', desc: locale.separator },
       ]}
     >
-      <Space>
+      <Space separator={<Divider vertical />}>
         <Button type="primary">Primary</Button>
         <Button>Default</Button>
         <Button type="dashed">Dashed</Button>

components/space/demo/separator.md

@@ -4,4 +4,4 @@
 
 ## en-US
 
-Crowded components split.
+Crowded components separator.

components/space/demo/separator.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Divider, Space, Typography } from 'antd';
 
 const App: React.FC = () => (
-  <Space split={<Divider vertical />}>
+  <Space separator={<Divider vertical />}>
     <Typography.Link>Link</Typography.Link>
     <Typography.Link>Link</Typography.Link>
     <Typography.Link>Link</Typography.Link>

components/space/index.en-US.md

@@ -25,7 +25,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 <code src="./demo/size.tsx">Space Size</code>
 <code src="./demo/align.tsx">Align</code>
 <code src="./demo/wrap.tsx">Wrap</code>
-<code src="./demo/split.tsx">Split</code>
+<code src="./demo/separator.tsx">separator</code>
 <code src="./demo/compact.tsx">Compact Mode for form component</code>
 <code src="./demo/compact-buttons.tsx">Button Compact Mode</code>
 <code src="./demo/compact-button-vertical.tsx">Vertical Compact Mode</code>
@@ -45,7 +45,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | ~~direction~~ | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | orientation | The space direction | `vertical` \| `horizontal` | `horizontal` |  |
 | size | The space size | [Size](#size) \| [Size\[\]](#size) | `small` | 4.1.0 \| Array: 4.9.0 |
-| split | Set split | ReactNode | - | 4.7.0 |
+| ~~split~~ | Set split, please use `separator` instead | ReactNode | - | 4.7.0 |
+| separator | Set separator | ReactNode | - | - |
 | styles | Semantic style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - |  |
 | vertical | Orientation, Simultaneously configure with `orientation` and prioritize `orientation` | boolean | false | - |
 | wrap | Auto wrap line, when `horizontal` effective | boolean | false | 4.9.0 |

components/space/index.tsx

@@ -3,6 +3,7 @@ import toArray from '@rc-component/util/lib/Children/toArray';
 import classNames from 'classnames';
 
 import { isPresetSize, isValidGapNumber } from '../_util/gapSize';
+import useMergeSemantic from '../_util/hooks/useMergeSemantic';
 import type { Orientation } from '../_util/hooks/useOrientation';
 import useOrientation from '../_util/hooks/useOrientation';
 import { devUseWarning } from '../_util/warning';
@@ -17,7 +18,7 @@ import useStyle from './style';
 export { SpaceContext } from './context';
 
 export type SpaceSize = SizeType | number;
-type SemanticName = 'root' | 'item';
+type SemanticName = 'root' | 'item' | 'separator';
 export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;
   className?: string;
@@ -30,7 +31,9 @@ export interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {
   orientation?: Orientation;
   // No `stretch` since many components do not support that.
   align?: 'start' | 'end' | 'center' | 'baseline';
+  /** @deprecated please use `separator` instead */
   split?: React.ReactNode;
+  separator?: React.ReactNode;
   wrap?: boolean;
   classNames?: Partial<Record<SemanticName, string>>;
   styles?: Partial<Record<SemanticName, React.CSSProperties>>;
@@ -57,6 +60,7 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
     orientation,
     prefixCls: customizePrefixCls,
     split,
+    separator,
     style,
     vertical,
     wrap = false,
@@ -80,9 +84,18 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
   const [mergedOrientation, mergedVertical] = useOrientation(orientation, vertical, direction);
 
   const mergedAlign = align === undefined && !mergedVertical ? 'center' : align;
+
+  const mergedSeparator = separator ?? split;
+
   const prefixCls = getPrefixCls('space', customizePrefixCls);
+
   const [hashId, cssVarCls] = useStyle(prefixCls);
 
+  const [mergedClassNames, mergedStyles] = useMergeSemantic(
+    [contextClassNames, spaceClassNames],
+    [contextStyles, styles],
+  );
+
   const rootClassNames = classNames(
     prefixCls,
     contextClassName,
@@ -97,15 +110,10 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
     className,
     rootClassName,
     cssVarCls,
-    spaceClassNames?.root,
+    mergedClassNames.root,
-    contextClassNames.root,
   );
 
-  const itemClassName = classNames(
+  const itemClassName = classNames(`${prefixCls}-item`, mergedClassNames.item);
-    `${prefixCls}-item`,
-    spaceClassNames?.item,
-    contextClassNames.item,
-  );
 
   // Calculate latest one
   let latestIndex = 0;
@@ -118,11 +126,14 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
 
     return (
       <Item
+        prefix={prefixCls}
+        classNames={mergedClassNames}
+        styles={mergedStyles}
         className={itemClassName}
         key={key}
         index={i}
-        split={split}
+        separator={mergedSeparator}
-        style={styles?.item ?? contextStyles.item}
+        style={mergedStyles.item}
       >
         {child}
       </Item>
@@ -133,7 +144,12 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Space');
 
-    warning.deprecated(!direction, 'direction', 'orientation');
+    [
+      ['direction', 'orientation'],
+      ['split', 'separator'],
+    ].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
   }
 
   const spaceContext = React.useMemo<SpaceContextType>(() => ({ latestIndex }), [latestIndex]);
@@ -161,7 +177,7 @@ const InternalSpace = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref)
     <div
       ref={ref}
       className={rootClassNames}
-      style={{ ...gapStyle, ...contextStyles.root, ...contextStyle, ...styles?.root, ...style }}
+      style={{ ...gapStyle, ...mergedStyles.root, ...contextStyle, ...style }}
       {...restProps}
     >
       <SpaceContextProvider value={spaceContext}>{nodes}</SpaceContextProvider>

components/space/index.zh-CN.md

@@ -29,7 +29,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 <code src="./demo/size.tsx">间距大小</code>
 <code src="./demo/align.tsx">对齐</code>
 <code src="./demo/wrap.tsx">自动换行</code>
-<code src="./demo/split.tsx">分隔符</code>
+<code src="./demo/separator.tsx">分隔符</code>
 <code src="./demo/compact.tsx">紧凑布局组合</code>
 <code src="./demo/compact-buttons.tsx">Button 紧凑布局</code>
 <code src="./demo/compact-button-vertical.tsx">垂直方向紧凑布局</code>
@@ -51,7 +51,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA
 | ~~direction~~ | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
 | orientation | 间距方向 | `vertical` \| `horizontal` | `horizontal` |  |
 | size | 间距大小 | [Size](#size) \| [Size\[\]](#size) | `small` | 4.1.0 \| Array: 4.9.0 |
-| split | 设置分隔符 | ReactNode | - | 4.7.0 |
+| ~~split~~ | 设置分隔符, 请使用 `separator` 替换 | ReactNode | - | 4.7.0 |
+| separator | 设置分隔符 | ReactNode | - | - |
 | styles | 语义化 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - |  |
 | vertical | 是否垂直，和 `orientation` 同时配置以 `orientation` 优先 | boolean | false | - |
 | wrap | 是否自动换行，仅在 `horizontal` 时有效 | boolean | false | 4.9.0 |