fix(FieldBlock): automate label in label detection

dnbexperience · Sep 21, 2023 · df7d3a2 · df7d3a2
1 parent 37efa39
commit df7d3a2
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 15 deletions.
diff --git a/...rtal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx b/...rtal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx
@@ -6,8 +6,7 @@ showTabs: true
 
 ## Properties
 
-| Property                                                                                                         | Type                | Description                                                                           |
-| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------- |
-| `legend`                                                                                                         | `React.Node`        | _(optional)_ Please use `legend` over `label` when several form components are given. |
-| `width`                                                                                                          | `string` or `false` | _(optional)_ `small`, `medium` or `large` for predefined standard widths.             |
-| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | Various             | _(optional)_ `FieldProps` properties.                                                 |
+| Property                                                                                                         | Type                | Description                                                                        |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------- |
+| `width`                                                                                                          | `string` or `false` | _(optional)_ `small`, `medium`, `large` or `false` for predefined standard widths. |
+| `FieldProps` such as [Value.String-properties](/uilib/extensions/forms/create-component/Value/String/properties) | Various             | _(optional)_ `FieldProps` properties.                                              |
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { Space, FormLabel, FormStatus } from '../../../components'
 import { FormError, ComponentProps, FieldProps } from '../types'
 import FieldBlockContext from './FieldBlockContext'
+import { findElementInChildren } from '../../../shared/component-helper'
 
 export type Props = Pick<
   FieldProps,
@@ -119,7 +120,12 @@ function FieldBlock(props: Props) {
     className
   )
 
-  const enableFieldset = legend
+  // A child component with a label was found, use fieldset/legend instead of div/label
+  const enableFieldset = findElementInChildren(
+    children,
+    (child: React.ReactElement) => child.props.label
+  )
+
   const state = error || warning || info
   const stateStatus = error
     ? 'error'
@@ -143,13 +149,13 @@ function FieldBlock(props: Props) {
       >
         {labelDescription || labelSecondary ? (
           <div className="dnb-forms-field-block__label">
-            {legend || label || labelDescription ? (
+            {label || labelDescription ? (
               <FormLabel
                 element={enableFieldset ? 'legend' : 'label'}
                 for_id={forId}
                 space={{ bottom: 'x-small' }}
               >
-                {legend || label}
+                {label}
                 {labelDescription && (
                   <span className="dnb-forms-field-block__label-description">
                     {labelDescription}
@@ -166,13 +172,13 @@ function FieldBlock(props: Props) {
             )}
           </div>
         ) : (
-          (legend || label) && (
+          label && (
             <FormLabel
               element={enableFieldset ? 'legend' : 'label'}
               for_id={forId}
               space={{ bottom: 'x-small' }}
             >
-              {legend || label}
+              {label}
             </FormLabel>
           )
         )}
@@ -199,7 +205,7 @@ function FieldBlock(props: Props) {
                 (state instanceof FormError && state.message) ||
                 state?.toString()
               }
-              label={(legend || label) as string}
+              label={label as string}
               space={{ top: 'x-small' }}
             />
           </div>

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts
@@ -0,0 +1,22 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we don't require any related files
+ */
+
+import {
+  makeScreenshot,
+  setupPageScreenshot,
+} from '../../../../core/jest/jestSetupScreenshots'
+
+describe('Layout.FieldBlock', () => {
+  setupPageScreenshot({
+    url: '/uilib/extensions/forms/create-component/FieldBlock/demos/',
+  })
+
+  it('have to match widths', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="forms-field-block-widths"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
+import { Input } from '../../../../components'
 import FieldBlock from '../FieldBlock'
 import { FormError } from '../../types'
 
@@ -99,14 +100,23 @@ describe('FieldBlock', () => {
     expect(labelElement.textContent).toBe('A Secondary Label')
   })
 
-  it('should not use fieldset when legend is given', () => {
-    render(<FieldBlock legend="Legend">content</FieldBlock>)
+  it('should use fieldset/legend elements when nested component has a label property', () => {
+    render(
+      <FieldBlock label="Legend">
+        <div>
+          <span>no label</span>
+          <Input label="Label" />
+          <span>no label</span>
+        </div>
+      </FieldBlock>
+    )
 
     const element = document.querySelector('.dnb-forms-field-block')
     expect(element.tagName).toBe('FIELDSET')
 
-    const elementLegend = document.querySelector('.dnb-form-label')
-    expect(elementLegend.tagName).toBe('LEGEND')
+    const labelElements = document.querySelectorAll('.dnb-form-label')
+    expect(labelElements[0].tagName).toBe('LEGEND')
+    expect(labelElements[1].tagName).toBe('LABEL')
   })
 
   it('should render a FormStatus when "info" is given', () => {