feat: 🆕 new Space component (ant-design#22363)

* feat: new component: Space * add config-provider space doc * fix lint fail * revert test -u * improve demo * compatible invalidElement * use inline-flex and wrap * review change * add space version * improve classname * review change * review change
zoechi · Mar 22, 2020 · b8109bd · b8109bd
1 parent 1e95c6c
commit b8109bd
Show file tree

Hide file tree

Showing 21 changed files with 986 additions and 0 deletions.
diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap
@@ -50,6 +50,7 @@ Array [
   "Select",
   "Skeleton",
   "Slider",
+  "Space",
   "Spin",
   "Steps",
   "Switch",

diff --git a/components/config-provider/context.tsx b/components/config-provider/context.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
 import { Locale } from '../locale-provider';
+import { SizeType } from './SizeContext';
 
 export interface CSPConfig {
   nonce?: string;
@@ -18,6 +19,9 @@ export interface ConfigConsumerProps {
     ghost: boolean;
   };
   direction?: 'ltr' | 'rtl';
+  space?: {
+    size?: SizeType | number;
+  };
 }
 
 export const ConfigContext = React.createContext<ConfigConsumerProps>({

diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
@@ -47,6 +47,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | ant |  |
 | pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost:boolean } | 'true' |  |
 | direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| space | set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
 
 ## FAQ
 

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -39,6 +39,9 @@ export interface ConfigProviderProps {
   };
   componentSize?: SizeType;
   direction?: 'ltr' | 'rtl';
+  space?: {
+    size?: SizeType | number;
+  };
 }
 
 class ConfigProvider extends React.Component<ConfigProviderProps> {
@@ -62,6 +65,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       pageHeader,
       componentSize,
       direction,
+      space,
     } = this.props;
 
     const config: ConfigConsumerProps = {
@@ -71,6 +75,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       autoInsertSpaceInButton,
       locale: locale || legacyLocale,
       direction,
+      space,
     };
 
     if (getPopupContainer) {

diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
@@ -48,6 +48,7 @@ return (
 | prefixCls | 设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式` | string | ant |  |
 | pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | 'true' |  |
 | direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
 
 ## FAQ
 

diff --git a/components/index.tsx b/components/index.tsx
@@ -112,6 +112,8 @@ export { default as Skeleton } from './skeleton';
 
 export { default as Slider } from './slider';
 
+export { default as Space } from './space';
+
 export { default as Spin } from './spin';
 
 export { default as Steps } from './steps';