diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden.mdx index b5e939d6015..ace0b901631 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/visually-hidden.mdx @@ -2,6 +2,8 @@ title: 'VisuallyHidden' description: 'VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.' showTabs: true +hideTabs: + - title: Events theme: 'sbanken' --- 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 3d81bae1abd..f75921d3134 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 @@ -26,7 +26,7 @@ When a element or component was given, that does not support spacing, it will st You may else wrap your custom component in a `Flex.Item` – this way, you still can change the spacing per component basis. -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`. +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 you provide `false`, it will not support spacing. If the component is a wrapper component, and you want its children to support spacing, you can add this property `ComponentName._supportsSpacingProps = 'children'`. diff --git a/packages/dnb-eufemia/src/components/flex/Container.tsx b/packages/dnb-eufemia/src/components/flex/Container.tsx index 6f1510d19a5..169aa22cb0f 100644 --- a/packages/dnb-eufemia/src/components/flex/Container.tsx +++ b/packages/dnb-eufemia/src/components/flex/Container.tsx @@ -161,6 +161,13 @@ function FlexContainer(props: Props) { spacing } + if ( + React.isValidElement(previousChild) && + previousChild?.type?.['_supportsSpacingProps'] === false + ) { + startSpacing = 0 + } + const space = direction === 'horizontal' ? { [start]: endSpacing, [end]: startSpacing } 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 87716ff7712..eee8ee4b290 100644 --- a/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx +++ b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx @@ -366,16 +366,16 @@ describe('Flex.Container', () => { const elements = document.querySelectorAll( '.dnb-flex-container > div' ) - expect(elements[0].className).toBe( + expect(elements[0]).toHaveClass( 'dnb-space dnb-space__top--zero dnb-space__bottom--zero' ) - expect(elements[1].className).toBe( + expect(elements[1]).toHaveClass( 'dnb-space dnb-space__top--small dnb-space__bottom--zero' ) - expect((elements[0].firstChild as HTMLElement).className).toBe( + expect(elements[0].firstChild as HTMLElement).toHaveClass( 'test-item' ) - expect((elements[1].firstChild as HTMLElement).className).toBe( + expect(elements[1].firstChild as HTMLElement).toHaveClass( 'dnb-space__bottom--large test-item' ) } @@ -393,15 +393,36 @@ describe('Flex.Container', () => { const elements = document.querySelectorAll( '.dnb-flex-container > div' ) - expect(elements[0].className).toBe( + expect(elements[0]).toHaveClass( 'dnb-space__top--zero dnb-space__bottom--zero test-item' ) - expect(elements[1].className).toBe( + expect(elements[1]).toHaveClass( 'dnb-space__bottom--x-large dnb-space__top--small test-item' ) expect((elements[0].firstChild as HTMLElement).className).toBeFalsy() expect((elements[1].firstChild as HTMLElement).className).toBeFalsy() } + + { + TestComponent._supportsSpacingProps = false + + rerender( + + + + + ) + + const elements = document.querySelectorAll( + '.dnb-flex-container > div' + ) + expect(elements[0]).toHaveClass('test-item') + expect(elements[1]).toHaveClass( + 'dnb-space__bottom--x-large test-item' + ) + expect((elements[0].firstChild as HTMLElement).className).toBeFalsy() + expect((elements[1].firstChild as HTMLElement).className).toBeFalsy() + } }) it('should transform children if _supportsSpacingProps="children" is given', () => { @@ -431,12 +452,10 @@ describe('Flex.Container', () => { '.dnb-flex-container > div' ) expect(elements).toHaveLength(1) - expect(elements[0].className).toBe( + expect(elements[0]).toHaveClass( 'dnb-space dnb-space__top--zero dnb-space__bottom--zero' ) - expect((elements[0].firstChild as HTMLElement).className).toBe( - 'wrapper' - ) + expect(elements[0].firstChild as HTMLElement).toHaveClass('wrapper') } { diff --git a/packages/dnb-eufemia/src/components/flex/utils.tsx b/packages/dnb-eufemia/src/components/flex/utils.tsx index f0d13c80ce3..08bb3879a6d 100644 --- a/packages/dnb-eufemia/src/components/flex/utils.tsx +++ b/packages/dnb-eufemia/src/components/flex/utils.tsx @@ -56,11 +56,18 @@ export const isEufemiaElement = (element): boolean => { export const isSpacePropsComponent = ( element: React.ReactNode ): boolean => { - return ( - (React.isValidElement(element) && - element?.type?.['_supportsSpacingProps'] === true) || - isEufemiaElement(element) - ) + if ( + React.isValidElement(element) && + typeof element?.type?.['_supportsSpacingProps'] === 'boolean' + ) { + return element?.type?.['_supportsSpacingProps'] + } + + if (isEufemiaElement(element)) { + return true + } + + return undefined } export const renderWithSpacing = ( @@ -69,6 +76,10 @@ export const renderWithSpacing = ( ) => { const takesSpaceProps = isSpacePropsComponent(element) + if (takesSpaceProps === false) { + return element + } + return takesSpaceProps ? ( React.cloneElement(element as React.ReactElement, props) ) : ( diff --git a/packages/dnb-eufemia/src/components/visually-hidden/VisuallyHidden.tsx b/packages/dnb-eufemia/src/components/visually-hidden/VisuallyHidden.tsx index 9471183522f..deae206403e 100644 --- a/packages/dnb-eufemia/src/components/visually-hidden/VisuallyHidden.tsx +++ b/packages/dnb-eufemia/src/components/visually-hidden/VisuallyHidden.tsx @@ -57,6 +57,6 @@ const VisuallyHidden = (localProps: VisuallyHiddenAllProps) => { ) } -VisuallyHidden._supportsSpacingProps = true +VisuallyHidden._supportsSpacingProps = false export default VisuallyHidden