fix: add rtl space (#22809)

* fix: add Space rtl

* fix: restore test

* fix: restore test

* add

* fix: fix lint

* fix: use original api

* fix: add rtl less

components/space/__tests__/index.test.js

@@ -42,18 +42,8 @@ describe('Space', () => {
       </Space>,
     );
 
-    expect(
+    expect(wrapper.find('.ant-space-item').at(0).prop('style').marginRight).toBe(10);
-      wrapper
+    expect(wrapper.find('.ant-space-item').at(1).prop('style').marginRight).toBeUndefined();
-        .find('.ant-space-item')
-        .at(0)
-        .prop('style').marginRight,
-    ).toBe(10);
-    expect(
-      wrapper
-        .find('.ant-space-item')
-        .at(1)
-        .prop('style').marginRight,
-    ).toBeUndefined();
   });
 
   it('should render vertical space width customize size', () => {
@@ -64,18 +54,8 @@ describe('Space', () => {
       </Space>,
     );
 
-    expect(
+    expect(wrapper.find('.ant-space-item').at(0).prop('style').marginBottom).toBe(10);
-      wrapper
+    expect(wrapper.find('.ant-space-item').at(1).prop('style').marginBottom).toBeUndefined();
-        .find('.ant-space-item')
-        .at(0)
-        .prop('style').marginBottom,
-    ).toBe(10);
-    expect(
-      wrapper
-        .find('.ant-space-item')
-        .at(1)
-        .prop('style').marginBottom,
-    ).toBeUndefined();
   });
 
   it('should render correct with children', () => {

components/space/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classnames from 'classnames';
+import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import { ConfigConsumerProps, ConfigContext } from '../config-provider';
 import { SizeType } from '../config-provider/SizeContext';
@@ -19,7 +19,9 @@ const spaceSize = {
 };
 
 const Space: React.FC<SpaceProps> = props => {
-  const { getPrefixCls, space }: ConfigConsumerProps = React.useContext(ConfigContext);
+  const { getPrefixCls, space, direction: directionConfig }: ConfigConsumerProps = React.useContext(
+    ConfigContext,
+  );
 
   const {
     size = space?.size || 'small',
@@ -38,10 +40,17 @@ const Space: React.FC<SpaceProps> = props => {
   }
 
   const prefixCls = getPrefixCls('space', customizePrefixCls);
-  const cn = classnames(prefixCls, `${prefixCls}-${direction}`, className);
+  const cn = classNames(
+    prefixCls,
+    `${prefixCls}-${direction}`,
+    { [`${prefixCls}-rtl`]: directionConfig === 'rtl' },
+    className,
+  );
 
   const itemClassName = `${prefixCls}-item`;
 
+  const marginDirection = directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
+
   return (
     <div className={cn} {...otherProps}>
       {items.map((child, i) => (
@@ -53,7 +62,7 @@ const Space: React.FC<SpaceProps> = props => {
             i === len - 1
               ? {}
               : {
-                  [direction === 'vertical' ? 'marginBottom' : 'marginRight']:
+                  [direction === 'vertical' ? 'marginBottom' : marginDirection]:
                     typeof size === 'string' ? spaceSize[size] : size,
                 }
           }

components/space/style/index.less

@@ -12,3 +12,5 @@
     flex-direction: column;
   }
 }
+
+@import './rtl';

components/space/style/rtl.less

@@ -0,0 +1,10 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@space-prefix-cls: ~'@{ant-prefix}-space';
+
+.@{space-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+}