should display error underneath fields when nested inside Field.Selec…

…tion or Field.ArraySelection
dnbexperience · Nov 6, 2024 · 8ec43c0 · 8ec43c0
1 parent 3b82c03
commit 8ec43c0
Show file tree

Hide file tree

Showing 14 changed files with 173 additions and 202 deletions.
diff --git a/...b-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/Examples.tsx b/...b-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/Examples.tsx
@@ -538,186 +538,6 @@ export const RadioNestingWithLogic = () => (
   </ComponentBox>
 )
 
-export const RadioNestingAdvanced = () => (
-  <ComponentBox>
-    <Form.Handler onSubmit={console.log}>
-      <Flex.Stack>
-        <Card stack>
-          <Field.Selection path="/mySelection" variant="radio">
-            <Field.Option value="first" title="First" />
-            <Form.Visibility
-              visibleWhen={{
-                path: '/mySelection',
-                hasValue: (value) => value === 'first',
-              }}
-              animate
-            >
-              <Card>
-                <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" />
-                  <Form.Visibility
-                    visibleWhen={{
-                      path: '/firstSelection',
-                      hasValue: (value) => value === 'first',
-                    }}
-                    animate
-                  >
-                    <Field.Number
-                      path="/firstNestedNumber"
-                      label="First nested number"
-                      required
-                    />
-                  </Form.Visibility>
-                  <Field.Option value="second" title="Second" />
-                </Field.Selection>
-              </Card>
-            </Form.Visibility>
-            <Field.Option value="second" title="Second" />
-            <Form.Visibility
-              visibleWhen={{
-                path: '/mySelection',
-                hasValue: (value) => value === 'second',
-              }}
-              animate
-            >
-              <Card>
-                <Field.Number
-                  path="/secondNumber"
-                  label="Second number"
-                  value={2}
-                  allowNegative={false}
-                  required
-                  exclusiveMinimum={900}
-                  exclusiveMaximum={1000}
-                />
-                <Field.String
-                  path="/secondString"
-                  label="Second String"
-                  value="foo"
-                  pattern="bar"
-                  minLength={4}
-                />
-                <Field.Boolean
-                  path="/secondBoolean"
-                  label="Second boolean"
-                  variant="checkbox"
-                  required
-                />
-                <Field.Selection
-                  path="/secondSelection"
-                  variant="radio"
-                  label="Second selection"
-                  required
-                >
-                  <Field.Option value="first" title="First" />
-                  <Form.Visibility
-                    visibleWhen={{
-                      path: '/secondSelection',
-                      hasValue: (value) => value === 'first',
-                    }}
-                    animate
-                  >
-                    <Field.Number
-                      path="/secondNestedNumber"
-                      label="Second nested number"
-                      required
-                    />
-                  </Form.Visibility>
-                  <Field.Option value="second" title="Second" />
-                </Field.Selection>
-              </Card>
-            </Form.Visibility>
-            <Field.Option value="third" title="Third" />
-            <Form.Visibility
-              visibleWhen={{
-                path: '/mySelection',
-                hasValue: (value) => value === 'third',
-              }}
-              animate
-            >
-              <Card>
-                <Field.Number
-                  path="/thirdNumber"
-                  label="Third number"
-                  value={3}
-                  allowNegative={false}
-                  required
-                  exclusiveMinimum={900}
-                  exclusiveMaximum={1000}
-                />
-                <Field.String
-                  path="/thirdString"
-                  label="Third String"
-                  value="foo"
-                  pattern="bar"
-                  minLength={4}
-                />
-                <Field.Boolean
-                  path="/thirdBoolean"
-                  label="Third boolean"
-                  variant="checkbox"
-                  required
-                />
-                <Field.Selection
-                  path="/thirdSelection"
-                  variant="radio"
-                  required
-                  label="Third selection"
-                >
-                  <Field.Option value="first" title="First" />
-                  <Form.Visibility
-                    visibleWhen={{
-                      path: '/thirdSelection',
-                      hasValue: (value) => value === 'first',
-                    }}
-                    animate
-                  >
-                    <Field.Number
-                      path="/thirdNestedNumber"
-                      label="Third nested number"
-                      required
-                    />
-                  </Form.Visibility>
-                  <Field.Option value="second" title="Second" />
-                </Field.Selection>
-              </Card>
-            </Form.Visibility>
-          </Field.Selection>
-        </Card>
-
-        <Form.SubmitButton text="Happy coding!" />
-      </Flex.Stack>
-    </Form.Handler>
-  </ComponentBox>
-)
-
 // - Button
 
 export const ButtonEmpty = () => (

diff --git a/...n-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/demos.mdx b/...n-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/demos.mdx
@@ -130,10 +130,6 @@ You can nest other fields and show them based on your desired logic.
 
 <Examples.RadioNestingWithLogic />
 
-#### Radio nesting advanced
-
-<Examples.RadioNestingAdvanced />
-
 #### Radio button with a path to populate the data
 
 <Examples.RadioWithAPath />

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

diff --git a/...src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx b/...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
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx
@@ -108,6 +108,7 @@ function ArraySelection(props: Props) {
         ) : undefined}
       </>
     ),
+    disableStatusSummary: true,
     ...pickSpacingProps(props),
   }
 

diff --git a/...s/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx b/...s/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(

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/CompositionDocs.ts b/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'],

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/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),
   }
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx
@@ -13,6 +13,9 @@ import DrawerListProvider from '../../../../../fragments/drawer-list/DrawerListP
 import { makeOptions } from '../Selection'
 import { Field, Form } from '../../..'
 
+import nbNO from '../../../constants/locales/nb-NO'
+const nb = nbNO['nb-NO']
+
 describe('Selection', () => {
   it('renders selected option', () => {
     render(
@@ -1741,6 +1744,28 @@ describe('validation and error handling', () => {
       'dnb-toggle-button__status--error'
     )
   })
+
+  it('should show errors in separate FormStatus components', () => {
+    render(
+      <Field.Selection variant="radio" required validateInitially>
+        <Field.Option value="first" title="First" />
+        <Field.Number value={1} exclusiveMinimum={900} validateInitially />
+      </Field.Selection>
+    )
+
+    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('makeOptions', () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -108,6 +108,7 @@ function ArraySelection(props: Props) { @@
             ) : undefined}
           </>
         ),
+        disableStatusSummary: true,
         ...pickSpacingProps(props),
       }
@@ Expand Down @@