🔥feat: new component Flex

components/__tests__/__snapshots__/index.test.ts.snap

@@ -27,6 +27,7 @@ exports[`antd exports modules correctly 1`] = `
   "Drawer",
   "Dropdown",
   "Empty",
+  "Flex",
   "FloatButton",
   "Form",
   "Grid",

components/config-provider/__tests__/style.test.tsx

@@ -19,6 +19,7 @@ import Descriptions from '../../descriptions';
 import Divider from '../../divider';
 import Drawer from '../../drawer';
 import Empty from '../../empty';
+import Flex from '../../flex';
 import Form from '../../form';
 import Image from '../../image';
 import Input from '../../input';
@@ -1267,4 +1268,15 @@ describe('ConfigProvider support style and className props', () => {
 
     expect(container.querySelector('.ant-picker')).toHaveStyle('color: red; font-size: 16px;');
   });
+
+  it('Should Flex className & style works', () => {
+    const { container } = render(
+      <ConfigProvider flex={{ className: 'cp-flex', style: { backgroundColor: 'blue' } }}>
+        <Flex>test</Flex>
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-flex');
+    expect(element).toHaveClass('cp-flex');
+    expect(element).toHaveStyle({ backgroundColor: 'blue' });
+  });
 });

components/config-provider/context.ts

@@ -6,6 +6,7 @@ import type { WarningContextProps } from '../_util/warning';
 import type { ShowWaveEffect } from '../_util/wave/interface';
 import type { BadgeProps } from '../badge';
 import type { ButtonProps } from '../button';
+import type { FlexProps } from '../flex/interface';
 import type { RequiredMark } from '../form/Form';
 import type { InputProps } from '../input';
 import type { Locale } from '../locale';
@@ -61,6 +62,10 @@ export interface ButtonConfig extends ComponentStyleConfig {
   styles?: ButtonProps['styles'];
 }
 
+export interface FlexConfig extends ComponentStyleConfig {
+  vertical?: FlexProps['vertical'];
+}
+
 export type PopupOverflow = 'viewport' | 'scroll';
 
 export interface WaveConfig {
@@ -154,9 +159,8 @@ export interface ConfigConsumerProps {
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
   datePicker?: ComponentStyleConfig;
-
+  flex?: FlexConfig;
   wave?: WaveConfig;
-
   warning?: WarningContextProps;
 }
 

components/config-provider/index.en-US.md

@@ -122,6 +122,7 @@ const {
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| flex | Set Flex common props | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 4.2.0 |

components/config-provider/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { createTheme } from '@ant-design/cssinjs';
 import IconContext from '@ant-design/icons/lib/components/Context';
@@ -27,6 +29,7 @@ import type {
   ConfigConsumerProps,
   CSPConfig,
   DirectionType,
+  FlexConfig,
   PopupOverflow,
   Theme,
   ThemeConfig,
@@ -194,7 +197,7 @@ export interface ConfigProviderProps {
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
   datePicker?: ComponentStyleConfig;
-
+  flex?: FlexConfig;
   /**
    * Wave is special component which only patch on the effect of component interaction.
    */
@@ -335,6 +338,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tree,
     colorPicker,
     datePicker,
+    flex,
     wave,
     warning: warningConfig,
   } = props;
@@ -425,6 +429,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     tree,
     colorPicker,
     datePicker,
+    flex,
     wave,
     warning: warningConfig,
   };

components/config-provider/index.zh-CN.md

@@ -124,6 +124,7 @@ const {
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| flex | 设置 Flex 组件的通用属性 | { className?: string, style?: React.CSSProperties, vertical?: boolean } | - | 5.10.0 |
 | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 |
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 |