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