fix(Field.Toggle): removes invisible label when label not provided (#…

…3984)

Fixes https://jira.tech.dnb.no/browse/DCE-12453

---------

Co-authored-by: Tobias Høegh <[email protected]>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/Examples.tsx

@@ -229,3 +229,18 @@ export const VariantButtonsWithHelp = () => {
     </ComponentBox>
   )
 }
+
+export const VariantButtonsWithoutLabel = () => {
+  return (
+    <ComponentBox data-visual-test="toggle-variant-buttons-without-label">
+      Text above the toggle:
+      <Field.Toggle
+        valueOn="on"
+        valueOff="off"
+        variant="buttons"
+        value="on"
+        onChange={(value) => console.log('onChange', value)}
+      />
+    </ComponentBox>
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Toggle/demos.mdx

@@ -66,6 +66,10 @@ import * as Examples from './Examples'
 
 <Examples.VariantButtonsWithHelp />
 
+<VisibleWhenVisualTest>
+  <Examples.VariantButtonsWithoutLabel />
+</VisibleWhenVisualTest>
+
 #### Checkbox button
 
 <Examples.VariantCheckboxButton />

packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.screenshot.test.ts

@@ -15,4 +15,13 @@ describe('Field.Toggle', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match buttons variant without label', async () => {
+    const screenshot = await makeScreenshot({
+      url,
+      selector:
+        '[data-visual-test="toggle-variant-buttons-without-label"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })

packages/dnb-eufemia/src/extensions/forms/Field/Toggle/stories/Toggle.stories.tsx

@@ -47,6 +47,17 @@ export function Toggle() {
         validateInitially
         onChange={(value) => console.log('onChange', value)}
       />
+      <>
+        No label:
+        <Field.Toggle
+          variant="buttons"
+          valueOn="checked"
+          valueOff="unchecked"
+          required
+          validateInitially
+          onChange={(value) => console.log('onChange', value)}
+        />
+      </>
     </>
   )
 }

packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx

@@ -435,6 +435,11 @@ function FieldBlock(props: Props) {
     )
   }
 
+  const hasLabelDescription = isFragment(labelDescription)
+    ? fragmentHasChildren(labelDescription) &&
+      !fragmentHasOnlyUndefinedChildren(labelDescription)
+    : labelDescription
+
   return (
     <FieldBlockContext.Provider
       value={{
@@ -457,7 +462,7 @@ function FieldBlock(props: Props) {
               <FormLabel {...labelProps}>
                 <SubmitIndicator state={fieldState}>
                   {label}
-                  {labelDescription && (
+                  {hasLabelDescription && (
                     <span className="dnb-forms-field-block__label-description">
                       {labelDescription}
                     </span>
@@ -571,6 +576,26 @@ export function getMessage(item: Partial<StateWithMessage>): StateMessage {
     content) as StateMessage
 }
 
+function isFragment(fragment: React.ReactNode) {
+  return React.isValidElement(fragment) && fragment.type === React.Fragment
+}
+
+function fragmentHasChildren(fragment: React.ReactNode) {
+  return (
+    React.isValidElement(fragment) &&
+    React.Children.count(fragment.props.children) > 0
+  )
+}
+
+function fragmentHasOnlyUndefinedChildren(fragment: React.ReactNode) {
+  const isUndefined = (child) => child === undefined
+
+  return (
+    React.isValidElement(fragment) &&
+    React.Children.toArray(fragment.props.children).every(isUndefined)
+  )
+}
+
 FieldBlock._supportsSpacingProps = true
 
 export default FieldBlock

packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx

@@ -126,20 +126,72 @@ describe('FieldBlock', () => {
     expect(labelElement).toHaveTextContent('A Label')
   })
 
-  it('should render a "labelDescription"', () => {
-    render(
-      <FieldBlock labelDescription="A Label Description">
-        content
-      </FieldBlock>
-    )
+  describe('labelDescription', () => {
+    it('should render with a string', () => {
+      render(
+        <FieldBlock labelDescription="A Label Description">
+          content
+        </FieldBlock>
+      )
 
-    const labelElement = document.querySelector('label')
+      const labelElement = document.querySelector('label')
 
-    expect(labelElement).toBeInTheDocument()
-    expect(labelElement).toHaveClass(
-      'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small'
-    )
-    expect(labelElement).toHaveTextContent('A Label Description')
+      expect(labelElement).toBeInTheDocument()
+      expect(labelElement).toHaveClass(
+        'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small'
+      )
+      expect(labelElement).toHaveTextContent('A Label Description')
+    })
+
+    it('should render with JSX content', () => {
+      render(
+        <FieldBlock labelDescription={<span>A Label Description</span>}>
+          content
+        </FieldBlock>
+      )
+
+      const labelElement = document.querySelector('label')
+
+      expect(labelElement).toBeInTheDocument()
+      expect(labelElement).toHaveClass(
+        'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small'
+      )
+      expect(labelElement).toHaveTextContent('A Label Description')
+    })
+
+    it('should render with a React element', () => {
+      const LabelDescription = () => <span>A Label Description</span>
+
+      render(
+        <FieldBlock labelDescription={<LabelDescription />}>
+          content
+        </FieldBlock>
+      )
+
+      const labelElement = document.querySelector('label')
+
+      expect(labelElement).toBeInTheDocument()
+      expect(labelElement).toHaveClass(
+        'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small'
+      )
+      expect(labelElement).toHaveTextContent('A Label Description')
+    })
+
+    it('should not render when empty fragment is given', () => {
+      render(<FieldBlock labelDescription={<></>}>content</FieldBlock>)
+
+      expect(
+        document.querySelector('.dnb-forms-field-block__label-description')
+      ).toBeNull()
+
+      const labelElement = document.querySelector('label')
+
+      expect(labelElement).toBeInTheDocument()
+      expect(labelElement).toHaveClass(
+        'dnb-form-label dnb-space__right--small dnb-space__top--zero dnb-space__bottom--x-small'
+      )
+      expect(labelElement).toHaveTextContent('')
+    })
   })
 
   describe('labelSuffix', () => {