feat(space): support lower browser

package.json

@@ -9,6 +9,9 @@
   "typings": "es/index.d.ts",
   "unpkg": "dist/tdesign.min.js",
   "jsdelivr": "dist/tdesign.min.js",
+  "engines": {
+    "node": ">=18"
+  },
   "files": [
     "esm",
     "es",

src/space/Space.tsx

@@ -1,16 +1,20 @@
-import React, { forwardRef, useMemo } from 'react';
+import React, { CSSProperties, forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
 import { isFragment } from 'react-is';
 import useConfig from '../hooks/useConfig';
 import { TdSpaceProps } from './type';
 import { StyledProps } from '../common';
 import { spaceDefaultProps } from './defaultProps';
+import { getFlexGapPolyFill } from '../_common/js/utils/helper';
 
 // export for test
 export const SizeMap = { small: '8px', medium: '16px', large: '24px' };
+const defaultNeedPolyfill = getFlexGapPolyFill();
 
 export interface SpaceProps extends TdSpaceProps, StyledProps {
   children?: React.ReactNode;
+  /** 强制使用 margin 间距代替 gap 属性间距（某些浏览器不支持 gap 属性） */
+  forceFlexGapPolyfill?: boolean;
 }
 
 const toArray = (children: React.ReactNode): React.ReactElement[] => {
@@ -37,6 +41,8 @@ const Space = forwardRef((props: SpaceProps, ref: React.Ref<HTMLDivElement>) =>
   const { className, style, align, direction, size, breakLine, separator } = props;
   const { classPrefix } = useConfig();
 
+  const needPolyfill = Boolean(props.forceFlexGapPolyfill || defaultNeedPolyfill);
+
   const renderStyle = useMemo(() => {
     let renderGap = '';
     if (Array.isArray(size)) {
@@ -53,12 +59,16 @@ const Space = forwardRef((props: SpaceProps, ref: React.Ref<HTMLDivElement>) =>
       renderGap = `${size}px`;
     }
 
-    return {
-      gap: renderGap,
-      ...(breakLine ? { flexWrap: 'wrap' } : {}),
-      ...style,
-    };
-  }, [style, size, breakLine]) as React.CSSProperties;
+    const tStyle: CSSProperties = { ...style };
+    if (needPolyfill) {
+      const [columnGap, rowGap] = renderGap.split(' ');
+      tStyle['--td-space-column-gap'] = columnGap;
+      tStyle['--td-space-row-gap'] = rowGap || columnGap;
+    } else {
+      tStyle.gap = renderGap;
+    }
+    return tStyle;
+  }, [style, size, needPolyfill]) as React.CSSProperties;
 
   function renderChildren() {
     const children = toArray(props.children);
@@ -82,6 +92,8 @@ const Space = forwardRef((props: SpaceProps, ref: React.Ref<HTMLDivElement>) =>
       className={classNames(`${classPrefix}-space`, className, {
         [`${classPrefix}-space-align-${align}`]: align,
         [`${classPrefix}-space-${direction}`]: direction,
+        [`${classPrefix}-space--break-line`]: breakLine,
+        [`${classPrefix}-space--polyfill`]: needPolyfill,
       })}
     >
       {renderChildren()}

src/space/__tests__/space.test.tsx

@@ -49,7 +49,7 @@ describe('Space 组件测试', () => {
         <div></div>
       </Space>,
     );
-    expect((container.firstChild as HTMLDivElement).style.flexWrap).toBe('wrap');
+    expect((container.firstChild as HTMLDivElement).classList.contains('t-space--break-line')).toBeTruthy();
   });
 
   test('separator', async () => {

src/space/__tests__/vitest-space.test.jsx

@@ -16,10 +16,16 @@ describe('Space Component', () => {
     });
   });
 
-  it(`props.breakLine is equal to true`, () => {
-    const { container } = getSpaceDefaultMount(Space, { breakLine: true });
-    const domWrapper = container.firstChild;
-    expect(domWrapper.style.flexWrap).toBe('wrap');
+  it('props.breakLine works fine', () => {
+    // breakLine default value is false
+    const { container: container1 } = getSpaceDefaultMount(Space);
+    expect(container1.querySelector(`.${'t-space--break-line'}`)).toBeFalsy();
+    // breakLine = true
+    const { container: container2 } = getSpaceDefaultMount(Space, { breakLine: true });
+    expect(container2.firstChild).toHaveClass('t-space--break-line');
+    // breakLine = false
+    const { container: container3 } = getSpaceDefaultMount(Space, { breakLine: false });
+    expect(container3.querySelector(`.${'t-space--break-line'}`)).toBeFalsy();
   });
 
   ['vertical', 'horizontal'].forEach((item) => {

src/space/space.en-US.md

@@ -7,8 +7,8 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
-align | String | - | alignment。options：start/end/center/baseline | N
+align | String | - | alignment。options: start/end/center/baseline | N
 breakLine | Boolean | false | Whether to wrap, valid only in horizontal | N
-direction | String | horizontal | Spacing direction。options：vertical/horizontal | N
+direction | String | horizontal | Spacing direction。options: vertical/horizontal | N
 separator | TNode | - | separator。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 size | String / Number / Array | 'medium' | Spacing。Typescript：`SpaceSize \| SpaceSize[]` `type SpaceSize = number \| string \| SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/space/type.ts) | N