fix(VisuallyHidden): remove flex support (#3219)

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'
 ---
 

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'`.
 

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 }

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(
+        <Flex.Vertical>
+          <TestComponent />
+          <TestComponent bottom="x-large" />
+        </Flex.Vertical>
+      )
+
+      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')
     }
 
     {

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<unknown>, props)
   ) : (

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