From a4d957c50fb3321f3bd067d100491ac438487b14 Mon Sep 17 00:00:00 2001 From: undefined Date: Wed, 25 Oct 2023 00:52:11 +0800 Subject: [PATCH 1/4] feat(Flex): New component --- components/_util/gapSize.ts | 13 +++ components/_util/type.ts | 2 + components/components.ts | 3 + components/config-provider/context.ts | 3 + components/flex/demo/align.vue | 56 ++++++++++++ components/flex/demo/basic.vue | 43 +++++++++ components/flex/demo/combination.vue | 48 ++++++++++ components/flex/demo/gap.vue | 47 ++++++++++ components/flex/demo/index.vue | 30 ++++++ components/flex/demo/wrap.vue | 23 +++++ components/flex/index.en-US.md | 32 +++++++ components/flex/index.tsx | 66 ++++++++++++++ components/flex/index.zh-CN.md | 33 +++++++ components/flex/interface.ts | 16 ++++ components/flex/style/index.ts | 111 +++++++++++++++++++++++ components/flex/utils.ts | 68 ++++++++++++++ components/theme/interface/components.ts | 2 + 17 files changed, 596 insertions(+) create mode 100644 components/_util/gapSize.ts create mode 100644 components/flex/demo/align.vue create mode 100644 components/flex/demo/basic.vue create mode 100644 components/flex/demo/combination.vue create mode 100644 components/flex/demo/gap.vue create mode 100644 components/flex/demo/index.vue create mode 100644 components/flex/demo/wrap.vue create mode 100644 components/flex/index.en-US.md create mode 100644 components/flex/index.tsx create mode 100644 components/flex/index.zh-CN.md create mode 100644 components/flex/interface.ts create mode 100644 components/flex/style/index.ts create mode 100644 components/flex/utils.ts diff --git a/components/_util/gapSize.ts b/components/_util/gapSize.ts new file mode 100644 index 0000000000..f4f35ec380 --- /dev/null +++ b/components/_util/gapSize.ts @@ -0,0 +1,13 @@ +import type { SizeType } from '../config-provider/SizeContext'; + +export function isPresetSize(size?: SizeType | string | number): size is SizeType { + return ['small', 'middle', 'large'].includes(size as string); +} + +export function isValidGapNumber(size?: SizeType | string | number): size is number { + if (!size) { + // The case of size = 0 is deliberately excluded here, because the default value of the gap attribute in CSS is 0, so if the user passes 0 in, we can directly ignore it. + return false; + } + return typeof size === 'number' && !Number.isNaN(size); +} diff --git a/components/_util/type.ts b/components/_util/type.ts index 22f50a686b..0965d15ae3 100644 --- a/components/_util/type.ts +++ b/components/_util/type.ts @@ -92,3 +92,5 @@ export function someType(types?: any[], defaultVal?: T) { } export type CustomSlotsType = SlotsType; + +export type AnyObject = Record; diff --git a/components/components.ts b/components/components.ts index 2118711bea..fe8e4aeab8 100644 --- a/components/components.ts +++ b/components/components.ts @@ -264,3 +264,6 @@ export { default as Tour } from './tour'; export type { AppProps } from './app'; export { default as App } from './app'; + +export type { FlexProps } from './flex'; +export { default as Flex } from './flex'; diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index c90426c619..f219075952 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -151,6 +151,9 @@ export interface ConfigProviderInnerProps { wave?: ComputedRef<{ disabled?: boolean; }>; + flex?: ComputedRef<{ + vertical?: boolean; + }>; } export const configProviderKey: InjectionKey = Symbol('configProvider'); diff --git a/components/flex/demo/align.vue b/components/flex/demo/align.vue new file mode 100644 index 0000000000..0b4de582f2 --- /dev/null +++ b/components/flex/demo/align.vue @@ -0,0 +1,56 @@ + +--- +order: 1 +title: + zh-CN: 对齐方式 + en-US: Align +--- + +## zh-CN + +设置对齐方式。 + +## en-US + +Set align. + + + + + + diff --git a/components/flex/demo/basic.vue b/components/flex/demo/basic.vue new file mode 100644 index 0000000000..b1083237d9 --- /dev/null +++ b/components/flex/demo/basic.vue @@ -0,0 +1,43 @@ + +--- +order: 0 +title: + zh-CN: 基本布局 + en-US: Basic +--- + +## zh-CN + +最简单的用法。 + +## en-US + +The basic usage. + + + + + + diff --git a/components/flex/demo/combination.vue b/components/flex/demo/combination.vue new file mode 100644 index 0000000000..ef77b970da --- /dev/null +++ b/components/flex/demo/combination.vue @@ -0,0 +1,48 @@ + +--- +order: 4 +title: + zh-CN: 组合使用 + en-US: combination +--- + +## zh-CN + +嵌套使用，可以实现更复杂的布局。 + +## en-US + +Nesting can achieve more complex layouts. + + + + + + diff --git a/components/flex/demo/gap.vue b/components/flex/demo/gap.vue new file mode 100644 index 0000000000..6c189d5b03 --- /dev/null +++ b/components/flex/demo/gap.vue @@ -0,0 +1,47 @@ + +--- +order: 2 +title: + zh-CN: 设置间隙 + en-US: gap +--- + +## zh-CN + +使用 `gap` 设置元素之间的间距，预设了 `small`、`middle`、`large` 三种尺寸，也可以自定义间距。 + +## en-US + +Set the `gap` between elements, which has three preset sizes: `small`, `middle`, `large`, You can also customize the gap size. + + + + + + diff --git a/components/flex/demo/index.vue b/components/flex/demo/index.vue new file mode 100644 index 0000000000..67e82a9fc0 --- /dev/null +++ b/components/flex/demo/index.vue @@ -0,0 +1,30 @@ + + diff --git a/components/flex/demo/wrap.vue b/components/flex/demo/wrap.vue new file mode 100644 index 0000000000..939a732f2f --- /dev/null +++ b/components/flex/demo/wrap.vue @@ -0,0 +1,23 @@ + +--- +order: 3 +title: + zh-CN: 自动换行 + en-US: Wrap +--- + +## zh-CN + +自动换行。 + +## en-US + +Auto wrap line. + + + + diff --git a/components/flex/index.en-US.md b/components/flex/index.en-US.md new file mode 100644 index 0000000000..62cdab806e --- /dev/null +++ b/components/flex/index.en-US.md @@ -0,0 +1,32 @@ +--- +category: Components +group: Layout +title: Flex +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original +coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original +tag: New +--- + +## When To Use + +- Good for setting spacing between elements. +- Suitable for setting various horizontal and vertical alignments. + +### Difference with Space component + +- Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns. +- Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control. + +## API + +> This component is available since `ant-design-vue@4.0.7`. The default behavior of Flex in horizontal mode is to align upward, In vertical mode, aligns the stretch, You can adjust this via properties. + +| Property | Description | type | Default | Version | +| --- | --- | --- | --- | --- | +| vertical | Is direction of the flex vertical, use `flex-direction: column` | boolean | `false` | | +| wrap | Set whether the element is displayed in a single line or in multiple lines | reference [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | nowrap | | +| justify | Sets the alignment of elements in the direction of the main axis | reference [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | normal | | +| align | Sets the alignment of elements in the direction of the cross axis | reference [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | normal | | +| flex | flex CSS shorthand properties | reference [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | normal | | +| gap | Sets the gap between grids | `small` \| `middle` \| `large` \| string \| number | - | | +| component | custom element type | Component | `div` | | diff --git a/components/flex/index.tsx b/components/flex/index.tsx new file mode 100644 index 0000000000..b397ed5db9 --- /dev/null +++ b/components/flex/index.tsx @@ -0,0 +1,66 @@ +import { defineComponent, shallowRef } from 'vue'; +import type { CSSProperties } from 'vue'; +import { useConfigContextInject } from '../config-provider/context'; +import useConfigInject from '../config-provider/hooks/useConfigInject'; +import useStyle from './style'; +import classNames from '../_util/classNames'; +import { isPresetSize } from '../_util/gapSize'; +import omit from '../_util/omit'; +import { withInstall } from '../_util/type'; +import type { FlexProps } from './interface'; +import { flexProps } from './interface'; +import createFlexClassNames from './utils'; + +const AFlex = defineComponent({ + name: 'AFlex', + inheritAttrs: false, + props: { ...flexProps }, + setup(props, { slots, attrs }) { + const { flex: ctxFlex, direction: ctxDirection } = useConfigContextInject(); + const { prefixCls } = useConfigInject('flex', props); + const [wrapSSR, hashId] = useStyle(prefixCls); + const flexRef = shallowRef(); + + return () => { + const { flex, gap, vertical = false, component: Component = 'div', ...othersProps } = props; + + const mergedVertical = vertical ?? ctxFlex?.value.vertical; + + const mergedCls = classNames( + attrs.class, + prefixCls.value, + hashId.value, + createFlexClassNames(prefixCls.value, props), + { + [`${prefixCls.value}-rtl`]: ctxDirection.value === 'rtl', + [`${prefixCls.value}-gap-${gap}`]: isPresetSize(gap), + [`${prefixCls.value}-vertical`]: mergedVertical, + }, + ); + + const mergedStyle = { ...(attrs.style as CSSProperties) }; + + if (flex) { + mergedStyle.flex = flex; + } + + if (gap && !isPresetSize(gap)) { + mergedStyle.gap = `${gap}px`; + } + + return wrapSSR( + + {slots.default?.()} + , + ); + }; + }, +}); + +export default withInstall(AFlex); +export type { FlexProps }; diff --git a/components/flex/index.zh-CN.md b/components/flex/index.zh-CN.md new file mode 100644 index 0000000000..ea51ef635b --- /dev/null +++ b/components/flex/index.zh-CN.md @@ -0,0 +1,33 @@ +--- +category: Components +subtitle: 弹性布局 +group: 布局 +title: Flex +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original +coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original +tag: New +--- + +## 何时使用 + +- 适合设置元素之间的间距。 +- 适合设置各种水平、垂直对齐方式。 + +### 与 Space 组件的区别 + +- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。 +- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。 + +## API + +> 自 `ant-design-vue@4.0.7` 版本开始提供该组件。Flex 组件默认行为在水平模式下，为向上对齐，在垂直模式下，为拉伸对齐，你可以通过属性进行调整。 + +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| vertical | flex 主轴的方向是否垂直，使用 `flex-direction: column` | boolean | `false` | +| wrap | 设置元素单行显示还是多行显示 | 参考 [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) | nowrap | | +| justify | 设置元素在主轴方向上的对齐方式 | 参考 [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | normal | | +| align | 设置元素在交叉轴方向上的对齐方式 | 参考 [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | normal | | +| flex | flex CSS 简写属性 | 参考 [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | normal | | +| gap | 设置网格之间的间隙 | `small` \| `middle` \| `large` \| string \| number | - | | +| component | 自定义元素类型 | Component | `div` | | diff --git a/components/flex/interface.ts b/components/flex/interface.ts new file mode 100644 index 0000000000..9155fa4978 --- /dev/null +++ b/components/flex/interface.ts @@ -0,0 +1,16 @@ +import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; +import type { SizeType } from '../config-provider/SizeContext'; +import PropTypes from '../_util/vue-types'; + +export const flexProps = { + prefixCls: String, + vertical: Boolean, + wrap: String as PropType, + justify: String as PropType, + align: String as PropType, + flex: [Number, String] as PropType, + gap: [Number, String] as PropType, + component: PropTypes.any, +}; + +export type FlexProps = Partial & HTMLElement>; diff --git a/components/flex/style/index.ts b/components/flex/style/index.ts new file mode 100644 index 0000000000..1c9c0c9221 --- /dev/null +++ b/components/flex/style/index.ts @@ -0,0 +1,111 @@ +import type { CSSInterpolation } from '../../_util/cssinjs'; + +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { alignItemsValues, flexWrapValues, justifyContentValues } from '../utils'; + +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + // Component token here +} + +export interface FlexToken extends FullToken<'Flex'> { + /** + * @nameZH 小间隙 + * @nameEN Small Gap + * @desc 控制元素的小间隙。 + * @descEN Control the small gap of the element. + */ + flexGapSM: number; + /** + * @nameZH 间隙 + * @nameEN Gap + * @desc 控制元素的间隙。 + * @descEN Control the gap of the element. + */ + flexGap: number; + /** + * @nameZH 大间隙 + * @nameEN Large Gap + * @desc 控制元素的大间隙。 + * @descEN Control the large gap of the element. + */ + flexGapLG: number; +} + +const genFlexStyle: GenerateStyle = token => { + const { componentCls } = token; + return { + [componentCls]: { + display: 'flex', + '&-vertical': { + flexDirection: 'column', + }, + '&-rtl': { + direction: 'rtl', + }, + '&:empty': { + display: 'none', + }, + }, + }; +}; + +const genFlexGapStyle: GenerateStyle = token => { + const { componentCls } = token; + return { + [componentCls]: { + '&-gap-small': { + gap: token.flexGapSM, + }, + '&-gap-middle': { + gap: token.flexGap, + }, + '&-gap-large': { + gap: token.flexGapLG, + }, + }, + }; +}; + +const genFlexWrapStyle: GenerateStyle = token => { + const { componentCls } = token; + const wrapStyle: CSSInterpolation = {}; + flexWrapValues.forEach(value => { + wrapStyle[`${componentCls}-wrap-${value}`] = { flexWrap: value }; + }); + return wrapStyle; +}; + +const genAlignItemsStyle: GenerateStyle = token => { + const { componentCls } = token; + const alignStyle: CSSInterpolation = {}; + alignItemsValues.forEach(value => { + alignStyle[`${componentCls}-align-${value}`] = { alignItems: value }; + }); + return alignStyle; +}; + +const genJustifyContentStyle: GenerateStyle = token => { + const { componentCls } = token; + const justifyStyle: CSSInterpolation = {}; + justifyContentValues.forEach(value => { + justifyStyle[`${componentCls}-justify-${value}`] = { justifyContent: value }; + }); + return justifyStyle; +}; + +export default genComponentStyleHook<'Flex'>('Flex', token => { + const flexToken = mergeToken(token, { + flexGapSM: token.paddingXS, + flexGap: token.padding, + flexGapLG: token.paddingLG, + }); + return [ + genFlexStyle(flexToken), + genFlexGapStyle(flexToken), + genFlexWrapStyle(flexToken), + genAlignItemsStyle(flexToken), + genJustifyContentStyle(flexToken), + ]; +}); diff --git a/components/flex/utils.ts b/components/flex/utils.ts new file mode 100644 index 0000000000..aa442b70b1 --- /dev/null +++ b/components/flex/utils.ts @@ -0,0 +1,68 @@ +import classNames from '../_util/classNames'; + +import type { FlexProps } from './interface'; + +export const flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'] as const; + +export const justifyContentValues = [ + 'flex-start', + 'flex-end', + 'start', + 'end', + 'center', + 'space-between', + 'space-around', + 'space-evenly', + 'stretch', + 'normal', + 'left', + 'right', +] as const; + +export const alignItemsValues = [ + 'center', + 'start', + 'end', + 'flex-start', + 'flex-end', + 'self-start', + 'self-end', + 'baseline', + 'normal', + 'stretch', +] as const; + +const genClsWrap = (prefixCls: string, props: FlexProps) => { + const wrapCls: Record = {}; + flexWrapValues.forEach(cssKey => { + wrapCls[`${prefixCls}-wrap-${cssKey}`] = props.wrap === cssKey; + }); + return wrapCls; +}; + +const genClsAlign = (prefixCls: string, props: FlexProps) => { + const alignCls: Record = {}; + alignItemsValues.forEach(cssKey => { + alignCls[`${prefixCls}-align-${cssKey}`] = props.align === cssKey; + }); + alignCls[`${prefixCls}-align-stretch`] = !props.align && !!props.vertical; + return alignCls; +}; + +const genClsJustify = (prefixCls: string, props: FlexProps) => { + const justifyCls: Record = {}; + justifyContentValues.forEach(cssKey => { + justifyCls[`${prefixCls}-justify-${cssKey}`] = props.justify === cssKey; + }); + return justifyCls; +}; + +function createFlexClassNames(prefixCls: string, props: FlexProps) { + return classNames({ + ...genClsWrap(prefixCls, props), + ...genClsAlign(prefixCls, props), + ...genClsJustify(prefixCls, props), + }); +} + +export default createFlexClassNames; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 329cba4fd5..2df1ea1ef1 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -48,6 +48,7 @@ import type { ComponentToken as TourComponentToken } from '../../tour/style'; import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'; import type { ComponentToken as AppComponentToken } from '../../app/style'; import type { ComponentToken as WaveToken } from '../../_util/wave/style'; +import type { ComponentToken as FlexToken } from '../../flex/style'; export interface ComponentTokenMap { Affix?: {}; @@ -116,4 +117,5 @@ export interface ComponentTokenMap { // /** @private Internal TS definition. Do not use. */ Wave?: WaveToken; + Flex?: FlexToken; } From 0c45c00d0ce760997b0745c9ca96fc7fbd5f7eeb Mon Sep 17 00:00:00 2001 From: undefined Date: Wed, 25 Oct 2023 16:45:59 +0800 Subject: [PATCH 2/4] fix: Unified type --- components/flex/index.tsx | 2 +- components/flex/interface.ts | 26 +++++++++++++------------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/components/flex/index.tsx b/components/flex/index.tsx index b397ed5db9..bc2cf219c3 100644 --- a/components/flex/index.tsx +++ b/components/flex/index.tsx @@ -14,7 +14,7 @@ import createFlexClassNames from './utils'; const AFlex = defineComponent({ name: 'AFlex', inheritAttrs: false, - props: { ...flexProps }, + props: flexProps(), setup(props, { slots, attrs }) { const { flex: ctxFlex, direction: ctxDirection } = useConfigContextInject(); const { prefixCls } = useConfigInject('flex', props); diff --git a/components/flex/interface.ts b/components/flex/interface.ts index 9155fa4978..6994b2be8e 100644 --- a/components/flex/interface.ts +++ b/components/flex/interface.ts @@ -1,16 +1,16 @@ -import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; +import type { CSSProperties, ExtractPropTypes } from 'vue'; import type { SizeType } from '../config-provider/SizeContext'; -import PropTypes from '../_util/vue-types'; +import { anyType, booleanType, someType, stringType } from '../_util/type'; -export const flexProps = { - prefixCls: String, - vertical: Boolean, - wrap: String as PropType, - justify: String as PropType, - align: String as PropType, - flex: [Number, String] as PropType, - gap: [Number, String] as PropType, - component: PropTypes.any, -}; +export const flexProps = () => ({ + prefixCls: stringType(), + vertical: booleanType(), + wrap: stringType(), + justify: stringType(), + align: stringType(), + flex: someType([Number, String]), + gap: someType([Number, String]), + component: anyType(), +}); -export type FlexProps = Partial & HTMLElement>; +export type FlexProps = Partial> & HTMLElement>; From 63d2e38d87fbe4ee7a10f724eb0fd6c21397f0fa Mon Sep 17 00:00:00 2001 From: undefined Date: Wed, 25 Oct 2023 18:46:50 +0800 Subject: [PATCH 3/4] test: Add unit test and update snapshots --- .../__snapshots__/demo.test.js.snap | 146 ++++++++++++++++++ components/flex/__testts__/demo.test.js | 3 + components/flex/__testts__/index.test.js | 58 +++++++ 3 files changed, 207 insertions(+) create mode 100644 components/flex/__testts__/__snapshots__/demo.test.js.snap create mode 100644 components/flex/__testts__/demo.test.js create mode 100644 components/flex/__testts__/index.test.js diff --git a/components/flex/__testts__/__snapshots__/demo.test.js.snap b/components/flex/__testts__/__snapshots__/demo.test.js.snap new file mode 100644 index 0000000000..e63fb77cdf --- /dev/null +++ b/components/flex/__testts__/__snapshots__/demo.test.js.snap @@ -0,0 +1,146 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/flex/demo/align.vue correctly 1`] = ` +
+

Select justify :

+
+
+ +
+
+

Select align :

+
+
+ +
+
+
+
+`; + +exports[`renders ./components/flex/demo/basic.vue correctly 1`] = ` +
+
+
+
+
+
+
+
+
+`; + +exports[`renders ./components/flex/demo/combination.vue correctly 1`] = ` +
+ + +
+
avatar +
+
+

“antd is an enterprise-class UI design language and Vue UI library.” + +

+
+ Get Start + +
+
+
+ +
+`; + +exports[`renders ./components/flex/demo/gap.vue correctly 1`] = ` +
+
+ +
+
+`; + +exports[`renders ./components/flex/demo/wrap.vue correctly 1`] = ` +
+`; diff --git a/components/flex/__testts__/demo.test.js b/components/flex/__testts__/demo.test.js new file mode 100644 index 0000000000..9f18ce06a3 --- /dev/null +++ b/components/flex/__testts__/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest'; + +demoTest('flex'); diff --git a/components/flex/__testts__/index.test.js b/components/flex/__testts__/index.test.js new file mode 100644 index 0000000000..8dbd55c5c6 --- /dev/null +++ b/components/flex/__testts__/index.test.js @@ -0,0 +1,58 @@ +import { mount } from '@vue/test-utils'; +import Flex from '..'; +import mountTest from '../../../tests/shared/mountTest'; + +describe('Flex', () => { + mountTest(Flex); + + it('Flex', () => { + const wrapper = mount({ + render() { + return test; + }, + }); + const wrapper2 = mount({ + render() { + return test; + }, + }); + expect(wrapper.classes('ant-flex')).toBeTruthy(); + expect(wrapper.find('.ant-flex-justify-center')).toBeTruthy(); + expect(wrapper2.classes('ant-flex')).toBeTruthy(); + expect(wrapper2.element.style.gap).toBe('100px'); + }); + + it('Component work', () => { + const wrapper = mount({ + render() { + return test; + }, + }); + const wrapper2 = mount({ + render() { + return test; + }, + }); + expect(wrapper.find('.ant-flex').element.tagName).toBe('DIV'); + expect(wrapper2.find('.ant-flex').element.tagName).toBe('SPAN'); + }); + + it('when vertical=true should stretch work', () => { + const wrapper = mount({ + render() { + return test; + }, + }); + const wrapper2 = mount({ + render() { + return ( + + test + + ); + }, + }); + expect(wrapper.find('.ant-flex-align-stretch')).toBeTruthy(); + expect(wrapper2.find('.ant-flex-align-center')).toBeTruthy(); + }); +}); From f7eec747ccec39f8f8c0a0b0415f743f3bb6e17f Mon Sep 17 00:00:00 2001 From: undefined Date: Wed, 25 Oct 2023 18:50:11 +0800 Subject: [PATCH 4/4] docs: update md file --- components/flex/index.en-US.md | 2 +- components/flex/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/flex/index.en-US.md b/components/flex/index.en-US.md index 62cdab806e..15a7cd4556 100644 --- a/components/flex/index.en-US.md +++ b/components/flex/index.en-US.md @@ -1,6 +1,6 @@ --- category: Components -group: Layout +type: Layout title: Flex cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original diff --git a/components/flex/index.zh-CN.md b/components/flex/index.zh-CN.md index ea51ef635b..a8ece6fbe6 100644 --- a/components/flex/index.zh-CN.md +++ b/components/flex/index.zh-CN.md @@ -1,7 +1,7 @@ --- category: Components subtitle: 弹性布局 -group: 布局 +type: 布局 title: Flex cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original