fix(Forms): should display error underneath fields when nested inside Field.Selection or Field.ArraySelection

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

@@ -170,15 +170,21 @@ export const CheckboxWithHelp = () => (
 )
 
 export const CheckboxNestingWithLogic = () => (
-  <ComponentBox data-visual-test="array-selection-checkbox-nesting-logic">
-    <Form.Handler>
+  <ComponentBox
+    hideCode
+    data-visual-test="array-selection-checkbox-nesting-logic"
+  >
+    <Form.Handler onSubmit={console.log}>
       <Card stack>
-        <Field.ArraySelection label="Make a selection" path="/mySelection">
+        <Field.ArraySelection
+          label="Make a selection"
+          path="/mySelection"
+          required
+        >
           <Field.Option value="nothing" title="Nothing" />
 
           <Field.Option value="showInput" title="Show an input" />
           <Form.Visibility
-            animate
             visibleWhen={{
               path: '/mySelection',
               hasValue: (value) => {
@@ -187,10 +193,11 @@ export const CheckboxNestingWithLogic = () => (
                   : false
               },
             }}
-            compensateForGap="auto"
+            animate
+            compensateForGap="auto" // makes animation smooth
           >
             <Section variant="info" innerSpace>
-              <Field.String placeholder="Enter some value" />
+              <Field.String placeholder="Enter some value" required />
             </Section>
           </Form.Visibility>
 
@@ -199,7 +206,6 @@ export const CheckboxNestingWithLogic = () => (
             title="Show additional option"
           />
           <Form.Visibility
-            animate
             visibleWhen={{
               path: '/mySelection',
               hasValue: (value) => {
@@ -208,7 +214,8 @@ export const CheckboxNestingWithLogic = () => (
                   : false
               },
             }}
-            compensateForGap="auto"
+            animate
+            compensateForGap="auto" // makes animation smooth
           >
             <Field.Option
               value="showMeMore"
@@ -227,12 +234,14 @@ export const CheckboxNestingWithLogic = () => (
               }}
             >
               <Section variant="info" innerSpace>
-                <Field.String placeholder="Enter more info" />
+                <Field.String placeholder="Enter more info" required />
               </Section>
             </Form.Visibility>
           </Form.Visibility>
         </Field.ArraySelection>
       </Card>
+
+      <Form.SubmitButton />
     </Form.Handler>
   </ComponentBox>
 )
@@ -496,7 +505,6 @@ export const ButtonNestingWithLogic = () => (
 
           <Field.Option value="showInput" title="Show an input" />
           <Form.Visibility
-            animate
             visibleWhen={{
               path: '/mySelection',
               hasValue: (value) => {
@@ -505,7 +513,8 @@ export const ButtonNestingWithLogic = () => (
                   : false
               },
             }}
-            compensateForGap="auto"
+            animate
+            compensateForGap="auto" // makes animation smooth
           >
             <Section variant="info" innerSpace>
               <Field.String placeholder="Enter some value" />
@@ -517,7 +526,6 @@ export const ButtonNestingWithLogic = () => (
             title="Show additional option"
           />
           <Form.Visibility
-            animate
             visibleWhen={{
               path: '/mySelection',
               hasValue: (value) => {
@@ -526,7 +534,8 @@ export const ButtonNestingWithLogic = () => (
                   : false
               },
             }}
-            compensateForGap="auto"
+            animate
+            compensateForGap="auto" // makes animation smooth
           >
             <Field.Option
               value="showMeMore"

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

@@ -483,37 +483,38 @@ export const RadioWithAPath = () => (
 )
 
 export const RadioNestingWithLogic = () => (
-  <ComponentBox data-visual-test="selection-radio-nesting-logic">
-    <Form.Handler>
+  <ComponentBox hideCode data-visual-test="selection-radio-nesting-logic">
+    <Form.Handler onSubmit={console.log}>
       <Card stack>
         <Field.Selection
           variant="radio"
           label="Make a selection"
           path="/mySelection"
+          required
         >
           <Field.Option value="nothing" title="Nothing" />
           <Field.Option value="showInput" title="Show an input" />
           <Form.Visibility
-            animate
             visibleWhen={{ path: '/mySelection', hasValue: 'showInput' }}
-            compensateForGap="auto"
+            animate
+            compensateForGap="auto" // makes animation smooth
           >
             <Section variant="info" innerSpace>
-              <Field.String placeholder="Enter some value" />
+              <Field.String placeholder="Enter some value" required />
             </Section>
           </Form.Visibility>
           <Field.Option
             value="showAdditionalOption"
             title="Show additional option"
           />
           <Form.Visibility
-            animate
             visibleWhen={{
               path: '/mySelection',
               hasValue: (value) =>
                 value === 'showAdditionalOption' || value === 'showMeMore',
             }}
-            compensateForGap="auto"
+            animate
+            compensateForGap="auto" // makes animation smooth
           >
             <Field.Option
               value="showMeMore"
@@ -528,12 +529,92 @@ export const RadioNestingWithLogic = () => (
               }}
             >
               <Section variant="info" innerSpace>
-                <Field.String placeholder="Enter more info" />
+                <Field.String placeholder="Enter more info" required />
               </Section>
             </Form.Visibility>
           </Form.Visibility>
         </Field.Selection>
       </Card>
+
+      <Form.SubmitButton />
+    </Form.Handler>
+  </ComponentBox>
+)
+
+export const RadioNestingAdvanced = () => (
+  <ComponentBox
+    hideCode
+    data-visual-test="selection-radio-advanced-nesting-logic"
+  >
+    <Form.Handler
+      defaultData={{ mySelection: 'first', firstSelection: 'first' }}
+      onSubmit={console.log}
+    >
+      <Card stack>
+        <Field.Selection path="/mySelection" variant="radio">
+          <Field.Option value="first" title="First" />
+          <Form.Visibility
+            visibleWhen={{ path: '/mySelection', hasValue: 'first' }}
+            animate
+            compensateForGap="auto" // makes animation smooth
+          >
+            <Card stack top bottom>
+              <Field.Number
+                path="/firstNumber"
+                label="First number"
+                value={1}
+                allowNegative={false}
+                required
+                exclusiveMinimum={900}
+                exclusiveMaximum={1000}
+              />
+              <Field.String
+                path="/firstString"
+                label="First String"
+                value="foo"
+                pattern="bar"
+                minLength={4}
+              />
+              <Field.Boolean
+                path="/firstBoolean"
+                label="First boolean"
+                variant="checkbox"
+                required
+              />
+              <Field.Selection
+                path="/firstSelection"
+                variant="radio"
+                required
+                label="First selection"
+              >
+                <Field.Option value="first" title="First nested" />
+                <Form.Visibility
+                  visibleWhen={{
+                    path: '/firstSelection',
+                    hasValue: 'first',
+                  }}
+                  animate
+                  compensateForGap="auto" // makes animation smooth
+                >
+                  <Card stack top bottom>
+                    <Field.Number
+                      path="/firstNestedNumber"
+                      label="First nested number"
+                      required
+                    />
+                  </Card>
+                </Form.Visibility>
+                <Field.Option value="second" title="Second nested" />
+              </Field.Selection>
+            </Card>
+          </Form.Visibility>
+
+          <Field.Option value="second" title="Second" />
+          <Field.Option value="third" title="Third" />
+        </Field.Selection>
+      </Card>
+
+      <Form.SubmitButton />
     </Form.Handler>
   </ComponentBox>
 )

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

@@ -124,12 +124,6 @@ As there are many variants, they are split into separate sections. Here is a sum
 
 <Examples.RadioError />
 
-#### Radio nesting other fields with logic
-
-You can nest other fields and show them based on your desired logic.
-
-<Examples.RadioNestingWithLogic />
-
 #### Radio button with a path to populate the data
 
 <Examples.RadioWithAPath />
@@ -138,6 +132,16 @@ You can nest other fields and show them based on your desired logic.
 
 <Examples.RadioWithData />
 
+#### Radio nesting other fields with logic
+
+You can nest other fields and show them based on your desired logic.
+
+<Examples.RadioNestingWithLogic />
+
+#### Radio nesting advanced
+
+<Examples.RadioNestingAdvanced />
+
 ---
 
 ### Buttons variant

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/properties.mdx

@@ -4,11 +4,11 @@ showTabs: true
 
 import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
-import { fieldBlockProperties } from '@dnb/eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs'
+import { FieldBlockProperties } from '@dnb/eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs'
 
 ## Properties
 
-<PropertiesTable props={fieldBlockProperties} />
+<PropertiesTable props={FieldBlockProperties} />
 
 ## Translations
 

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx

@@ -4,7 +4,7 @@ showTabs: true
 
 import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
-import { fieldBlockProperties } from '@dnb/eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs'
+import { FieldBlockProperties } from '@dnb/eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs'
 import { PostalCodeAndCityProperties } from '@dnb/eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs'
 
 ## Properties
@@ -15,7 +15,7 @@ import { PostalCodeAndCityProperties } from '@dnb/eufemia/src/extensions/forms/F
 
 ### General properties
 
-<PropertiesTable props={fieldBlockProperties} omit={['value']} />
+<PropertiesTable props={FieldBlockProperties} omit={['value']} />
 
 ## Translations
 

packages/dnb-eufemia/src/components/card/style/dnb-card.scss

@@ -113,4 +113,9 @@
   & > .dnb-flex-container--align-stretch > .dnb-button {
     align-self: flex-start;
   }
+
+  // Nested Cards
+  & .dnb-card {
+    --outline-width: 0.125rem;
+  }
 }

packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx

@@ -108,6 +108,7 @@ function ArraySelection(props: Props) {
         ) : undefined}
       </>
     ),
+    disableStatusSummary: true,
     ...pickSpacingProps(props),
   }
 

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

@@ -5,6 +5,9 @@ import { axeComponent } from '../../../../../core/jest/jestSetup'
 import DataContext from '../../../DataContext/Context'
 import { Field, FieldBlock, Form } from '../../..'
 
+import nbNO from '../../../constants/locales/nb-NO'
+const nb = nbNO['nb-NO']
+
 describe('ArraySelection', () => {
   describe('checkbox', () => {
     it('renders correctly', () => {
@@ -381,6 +384,36 @@ describe('ArraySelection', () => {
       })
     })
 
+    it('should show errors in separate FormStatus components', () => {
+      render(
+        <Field.ArraySelection
+          variant="checkbox"
+          required
+          validateInitially
+        >
+          <Field.Option value="first" title="First" />
+          <Field.Number
+            value={1}
+            exclusiveMinimum={900}
+            validateInitially
+          />
+        </Field.ArraySelection>
+      )
+
+      expect(document.querySelectorAll('.dnb-form-status')).toHaveLength(2)
+      const [first, second] = Array.from(
+        document.querySelectorAll('.dnb-form-status')
+      )
+
+      expect(first.textContent).toBe(nb.Field.errorRequired)
+      expect(second.textContent).toBe(
+        nb.NumberField.errorExclusiveMinimum.replace(
+          '{exclusiveMinimum}',
+          '900'
+        )
+      )
+    })
+
     describe('ARIA', () => {
       it('should validate with ARIA rules', async () => {
         const result = render(

packages/dnb-eufemia/src/extensions/forms/Field/Composition/CompositionDocs.ts

@@ -1,8 +1,8 @@
 import { PropertiesTableProps } from '../../../../shared/types'
-import { fieldBlockProperties } from '../../FieldBlock/FieldBlockDocs'
+import { FieldBlockProperties } from '../../FieldBlock/FieldBlockDocs'
 
 export const CompositionProperties: PropertiesTableProps = {
-  ...fieldBlockProperties,
+  ...FieldBlockProperties,
   align: {
     doc: '`center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.',
     type: ['string', 'false'],

packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx

@@ -171,6 +171,7 @@ function Selection(props: Props) {
   const fieldBlockProps: FieldBlockProps = {
     forId: id,
     className: cn,
+    disableStatusSummary: true,
     ...pickSpacingProps(props),
   }