diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx index 7eca8978d7b..39b769985eb 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx @@ -4,8 +4,9 @@ showTabs: true ## Properties -| Property | Type | Description | -| ---------------------------------------------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------- | -| `width` | `string` or `false` | _(optional)_ `small`, `medium`, `large` or `false` for predefined standard widths. | -| `size` | `string` or `false` | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. | -| `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. | +| `size` | `string` or `false` | _(optional)_ define one of the following [heading size](/uilib/elements/heading/): `medium` or `large`. | +| `asFieldset` | `boolean` | _(optional)_ use `true` when you have several form elements. This way a `fieldset` with a `legend` is used. | +| `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 index 598c3ff6f3a..588dc748801 100644 --- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx @@ -19,6 +19,8 @@ export type Props = Pick< forId?: string contentClassName?: string children: React.ReactNode + /** Use true if you have more than one form element */ + asFieldset?: boolean /** Width of outer block element */ width?: false | 'small' | 'medium' | 'large' /** Width of contents block, while label etc can be wider if space is available */ @@ -37,6 +39,7 @@ function FieldBlock(props: Props) { label, labelDescription, labelSecondary, + asFieldset, info, warning, error: errorProp, @@ -127,11 +130,12 @@ function FieldBlock(props: Props) { // A child component with a label was found, use fieldset/legend instead of div/label const enableFieldset = useMemo( () => - !nestedFieldBlockContext && - findElementInChildren( - children, - (child: React.ReactElement) => child.props.label - ), + asFieldset || + (!nestedFieldBlockContext && + findElementInChildren( + children, + (child: React.ReactElement) => child.props.label + )), [] ) @@ -148,7 +152,7 @@ function FieldBlock(props: Props) { return ( 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 index 41808e4ba5e..bbf90cfc985 100644 --- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx @@ -160,6 +160,21 @@ describe('FieldBlock', () => { expect(labelElements[4]).toBe(undefined) }) + it('should use fieldset/legend when "asFieldset" is given', () => { + render( + + content + + ) + + expect(document.querySelectorAll('fieldset')).toHaveLength(1) + expect(document.querySelectorAll('legend')).toHaveLength(1) + expect(document.querySelector('legend')).not.toHaveAttribute('for') + expect(document.querySelector('.dnb-forms-field-block').tagName).toBe( + 'FIELDSET' + ) + }) + it('should render a FormStatus when "info" is given', () => { render(content)