From 93df77caffd2349c0f94ee27b91a25d4ddd6743e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 10 Jan 2024 11:52:25 +0100 Subject: [PATCH] fix(Flex.Container): add `Flex.withChildren` HOC for handling wrapped children with spacing (#3200) --- .../uilib/layout/flex/container/Examples.tsx | 26 +++ .../uilib/layout/flex/container/demos.mdx | 4 + .../docs/uilib/layout/flex/container/info.mdx | 21 +++ .../src/components/flex/Container.tsx | 19 +- .../__tests__/Container.screenshot.test.ts | 9 + .../flex/__tests__/Container.test.tsx | 164 ++++++++++++++++-- ...ainer-have-to-match-with-children.snap.png | Bin 0 -> 6826 bytes .../dnb-eufemia/src/components/flex/export.ts | 1 + .../components/flex/stories/Flex.stories.tsx | 28 +++ .../src/components/flex/withChildren.tsx | 14 ++ .../forms/utils/TestElement/TestElement.tsx | 2 + 11 files changed, 273 insertions(+), 15 deletions(-) create mode 100644 packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-with-children.snap.png create mode 100644 packages/dnb-eufemia/src/components/flex/stories/Flex.stories.tsx create mode 100644 packages/dnb-eufemia/src/components/flex/withChildren.tsx diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx index a7e8ae6d621..8da3852b187 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx @@ -193,3 +193,29 @@ export const LayoutHorizontalFlexGrowItems = () => { ) } + +export const WrappedWithChildren = () => { + return ( + + {() => { + const Wrapper = Flex.withChildren(({ children }) => { + return
{children}
+ }) + + return ( + + FlexItem 1 + + FlexItem 2 + FlexItem 3 + + FlexItem 4 + + ) + }} + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/demos.mdx index dc660651479..a16b510a712 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/demos.mdx @@ -47,3 +47,7 @@ Will wrap on small screens. ### Vertical aligned Field.String + +### Flex.withChildren + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/info.mdx index 86aa40a8394..3d81bae1abd 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/info.mdx @@ -28,6 +28,27 @@ You may else wrap your custom component in a `Flex.Item` – this way, you still Technically, `Flex.Container` checks if a nested component has a property called `_supportsSpacingProps`. So if you have a component that supports the [spacing properties](/uilib/layout/space/), you can add this property `ComponentName._supportsSpacingProps = true`. +If the component is a wrapper component, and you want its children to support spacing, you can add this property `ComponentName._supportsSpacingProps = 'children'`. + +But for simplicity, you can use the HOC `Flex.withChildren`: + +```tsx +const Wrapper = Flex.withChildren(({ children }) => { + return
{children}
+}) + +render( + + + + + + + + , +) +``` + ### Horizontal and Vertical aliases For shortening the usage of `direction="..."`, you can use: diff --git a/packages/dnb-eufemia/src/components/flex/Container.tsx b/packages/dnb-eufemia/src/components/flex/Container.tsx index 55e4193bffc..6f1510d19a5 100644 --- a/packages/dnb-eufemia/src/components/flex/Container.tsx +++ b/packages/dnb-eufemia/src/components/flex/Container.tsx @@ -94,7 +94,7 @@ function FlexContainer(props: Props) { ...rest } = props - const childrenArray = React.Children.toArray(children) + const childrenArray = wrapChildren(props, children) const hasHeading = childrenArray.some((child, i) => { const previousChild = childrenArray?.[i - 1] return ( @@ -204,6 +204,23 @@ function FlexContainer(props: Props) { ) } +function wrapChildren(props: Props, children: React.ReactNode) { + return React.Children.toArray(children).map((child) => { + if ( + React.isValidElement(child) && + child.type['_supportsSpacingProps'] === 'children' + ) { + return React.cloneElement( + child, + child.props, + {child.props.children} + ) + } + + return child + }) +} + FlexContainer._supportsSpacingProps = true export default FlexContainer diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/Container.screenshot.test.ts b/packages/dnb-eufemia/src/components/flex/__tests__/Container.screenshot.test.ts index 737cc3a94e0..c53e598834f 100644 --- a/packages/dnb-eufemia/src/components/flex/__tests__/Container.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Container.screenshot.test.ts @@ -15,6 +15,15 @@ describe('Flex.Container', () => { expect(screenshot).toMatchImageSnapshot() }) + it('have to match with children', async () => { + const screenshot = await makeScreenshot({ + url: '/uilib/layout/flex/container/demos', + selector: + '[data-visual-test="flex-container-with-children"] .dnb-flex-container', + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match field on large viewport', async () => { const screenshot = await makeScreenshot({ url: '/uilib/layout/flex/container/demos', diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx index 241f1d24fcf..87716ff7712 100644 --- a/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx @@ -346,21 +346,8 @@ describe('Flex.Container', () => { expect(children[2].className).toContain('dnb-space__right--zero') }) - it('should set element', () => { - render(content) - - const element = document.querySelector('.dnb-flex-container') - - expect(element.tagName).toBe('SECTION') - }) - it('should not add a wrapper when _supportsSpacingProps is given', () => { - const { rerender } = render( - - content - content - - ) + const { rerender } = render(<>) const TestComponent = (props: SpaceProps) => { const cn = createSpacingClasses(props) @@ -417,6 +404,155 @@ describe('Flex.Container', () => { } }) + it('should transform children if _supportsSpacingProps="children" is given', () => { + const { rerender } = render(<>) + + const Wrapper = ({ children }) => { + return
{children}
+ } + + const TestComponent = (props: SpaceProps) => { + const cn = createSpacingClasses(props) + cn.push('test-item') + return
content
+ } + + { + rerender( + + + + + + + ) + + const elements = document.querySelectorAll( + '.dnb-flex-container > div' + ) + expect(elements).toHaveLength(1) + expect(elements[0].className).toBe( + 'dnb-space dnb-space__top--zero dnb-space__bottom--zero' + ) + expect((elements[0].firstChild as HTMLElement).className).toBe( + 'wrapper' + ) + } + + { + Wrapper._supportsSpacingProps = 'children' + + rerender( + + + + + + + ) + + { + const elements = Array.from( + document.querySelectorAll('.dnb-flex-container > div') + ) + + expect(elements).toHaveLength(3) + expect(elements[0]).toHaveClass( + 'dnb-space dnb-space__top--zero dnb-space__bottom--zero' + ) + expect(elements[1]).toHaveClass( + 'dnb-space dnb-space__top--zero dnb-space__bottom--zero' + ) + expect(elements[2]).toHaveClass( + 'dnb-space dnb-space__top--large dnb-space__bottom--zero' + ) + } + + { + const elements = Array.from( + document.querySelectorAll('.dnb-flex-container > div > div') + ) + + expect(elements).toHaveLength(3) + expect(elements[0]).toHaveClass('wrapper') + expect(elements[1]).toHaveClass('test-item') + expect(elements[2]).toHaveClass('test-item') + } + + { + const elements = Array.from( + document.querySelectorAll('.dnb-flex-container') + ) + + expect(elements).toHaveLength(2) + } + + { + const elements = Array.from( + document.querySelectorAll( + 'body > div > .dnb-flex-container > div' + ) + ) + + expect(elements).toHaveLength(1) + expect(elements[0]).toHaveClass( + 'dnb-space dnb-space__top--zero dnb-space__bottom--zero' + ) + } + } + + { + TestComponent._supportsSpacingProps = true + + rerender( + + + + + + + ) + + { + const elements = Array.from( + document.querySelectorAll( + 'body > div > .dnb-flex-container > div' + ) + ) + + expect(elements).toHaveLength(1) + expect(elements[0]).toHaveClass( + 'dnb-space dnb-space__top--zero dnb-space__bottom--zero' + ) + } + + { + const elements = Array.from( + document.querySelectorAll('.dnb-flex-container > div') + ) + + expect(elements).toHaveLength(3) + expect(elements[0]).toHaveClass( + 'dnb-space dnb-space__top--zero dnb-space__bottom--zero' + ) + expect(elements[1]).toHaveClass( + 'dnb-space__top--zero dnb-space__bottom--zero test-item' + ) + expect(elements[2]).toHaveClass( + 'dnb-space__top--x-large dnb-space__bottom--zero test-item' + ) + } + } + }) + + it('should set custom element', () => { + render(content) + + const element = document.querySelector('.dnb-flex-container') + + expect(element.tagName).toBe('SECTION') + }) + it('gets valid ref element', () => { let ref: React.RefObject diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-with-children.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexcontainer-have-to-match-with-children.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..e2762c6f2b3ce326650513233c7a34a91c9ce479 GIT binary patch literal 6826 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 S4Z{BiMSxJ(Qmcg7Jo+CUN1dSn literal 0 HcmV?d00001 diff --git a/packages/dnb-eufemia/src/components/flex/export.ts b/packages/dnb-eufemia/src/components/flex/export.ts index 3d924cf3197..e2d17f2b69a 100644 --- a/packages/dnb-eufemia/src/components/flex/export.ts +++ b/packages/dnb-eufemia/src/components/flex/export.ts @@ -3,3 +3,4 @@ export { default as Item } from './Item' export { default as Stack } from './Stack' export { default as Horizontal } from './Horizontal' export { default as Vertical } from './Vertical' +export { default as withChildren } from './withChildren' diff --git a/packages/dnb-eufemia/src/components/flex/stories/Flex.stories.tsx b/packages/dnb-eufemia/src/components/flex/stories/Flex.stories.tsx new file mode 100644 index 00000000000..4c6dc806966 --- /dev/null +++ b/packages/dnb-eufemia/src/components/flex/stories/Flex.stories.tsx @@ -0,0 +1,28 @@ +/** + * @dnb/eufemia Component Story + * + */ + +import { TestElement } from '../../../extensions/forms' +import Flex from '../Flex' + +export default { + title: 'Eufemia/Components/Flex', +} + +const Wrapper = Flex.withChildren(({ children }) => { + return
{children}
+}) + +export function FlexWithChildren() { + return ( + + FlexItem 1 + + FlexItem 2 + FlexItem 3 + + FlexItem 4 + + ) +} diff --git a/packages/dnb-eufemia/src/components/flex/withChildren.tsx b/packages/dnb-eufemia/src/components/flex/withChildren.tsx new file mode 100644 index 00000000000..73b5933789f --- /dev/null +++ b/packages/dnb-eufemia/src/components/flex/withChildren.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +type WithChildrenProps = { + children?: React.ReactNode +} + +function withChildren( + Component: React.ComponentType +): React.ComponentType { + Component['_supportsSpacingProps'] = 'children' + return Component +} + +export default withChildren diff --git a/packages/dnb-eufemia/src/extensions/forms/utils/TestElement/TestElement.tsx b/packages/dnb-eufemia/src/extensions/forms/utils/TestElement/TestElement.tsx index 15649520bba..c5c924e5a1b 100644 --- a/packages/dnb-eufemia/src/extensions/forms/utils/TestElement/TestElement.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/utils/TestElement/TestElement.tsx @@ -10,3 +10,5 @@ export default function TestElement({ className = null, ...props }) { /> ) } + +TestElement._supportsSpacingProps = true