release of v10.62.4 (#4439)

When all of the current fix PR are merged, we can ship this later today.

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

@@ -641,7 +641,7 @@ export const UsingIterate = () => {
               <Flex.Vertical>
                 <Form.MainHeading>Accounts</Form.MainHeading>
 
-                <Form.Card>
+                <Form.Card gap={false}>
                   <Iterate.Array path="/accounts">
                     <MyViewItem />
                     <MyEditItem />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useValidation/info.mdx

@@ -36,6 +36,9 @@ function Component() {
   // Report a form error
   setFormError(new Error('This is a global form error'))
 
+  // Clear the form error with a null or undefined value
+  setFormError(null)
+
   // Show a field error
   setFieldStatus('/path/to/field', {
     error: new Error('This is a field error'),

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx

@@ -298,7 +298,7 @@ export const ViewAndEditContainer = () => {
               <Flex.Stack>
                 <Form.MainHeading>Accounts</Form.MainHeading>
 
-                <Form.Card>
+                <Form.Card gap={false}>
                   <Iterate.Array path="/accounts">
                     <MyViewItem />
                     <MyEditItem />
@@ -681,19 +681,80 @@ export const FilledViewAndEditContainer = () => {
             onSubmit={(data) => console.log('onSubmit', data)}
             onSubmitRequest={() => console.log('onSubmitRequest')}
           >
-            <Flex.Vertical>
+            <Flex.Stack>
               <Form.MainHeading>Accounts</Form.MainHeading>
 
-              <Form.Card>
+              <Form.Card gap={false}>
                 <Iterate.Array path="/accounts" limit={2}>
                   <MyViewItem />
                   <MyEditItem />
                 </Iterate.Array>
+
                 <CreateNewEntry />
               </Form.Card>
 
               <Form.SubmitButton variant="send" />
-            </Flex.Vertical>
+            </Flex.Stack>
+          </Form.Handler>
+        )
+      }}
+    </ComponentBox>
+  )
+}
+export const ViewAndEditContainerWithLineDivider = () => {
+  return (
+    <ComponentBox
+      data-visual-test="view-and-edit-container-with-line-divider"
+      hideCode
+    >
+      {() => {
+        const MyEditItem = () => {
+          return (
+            <Iterate.EditContainer variant="basic" divider="line">
+              <Field.Name.First itemPath="/firstName" required />
+              <Field.Name.Last itemPath="/lastName" required />
+            </Iterate.EditContainer>
+          )
+        }
+
+        const MyViewItem = () => {
+          return (
+            <Iterate.ViewContainer variant="basic" divider="line">
+              <Value.Name.First itemPath="/firstName" />
+              <Value.Name.Last itemPath="/lastName" />
+            </Iterate.ViewContainer>
+          )
+        }
+
+        return (
+          <Form.Handler
+            data={{
+              accounts: [
+                {
+                  firstName: 'Tony',
+                  lastName: 'Last',
+                },
+                {
+                  firstName: 'Maria',
+                  lastName: 'Last',
+                },
+              ],
+            }}
+            onSubmit={(data) => console.log('onSubmit', data)}
+            onSubmitRequest={() => console.log('onSubmitRequest')}
+          >
+            <Flex.Stack>
+              <Form.MainHeading>Accounts</Form.MainHeading>
+
+              <Form.Card>
+                <Iterate.Array path="/accounts" divider="line">
+                  <MyViewItem />
+                  <MyEditItem />
+                </Iterate.Array>
+              </Form.Card>
+
+              <Form.SubmitButton variant="send" />
+            </Flex.Stack>
           </Form.Handler>
         )
       }}

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx

@@ -56,6 +56,10 @@ With an optional `title` and [Iterate.Toolbar](/uilib/extensions/forms/Iterate/T
 
 <Examples.FilledViewAndEditContainer />
 
+### Using a line divider
+
+<Examples.ViewAndEditContainerWithLineDivider />
+
 ### Initially open
 
 <Examples.InitiallyOpen />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx

@@ -79,7 +79,7 @@ export const InitiallyOpen = () => {
               <Flex.Stack>
                 <Form.MainHeading>Accounts</Form.MainHeading>
 
-                <Form.Card>
+                <Form.Card gap={false}>
                   <Iterate.Array path="/accounts">
                     <MyViewItem />
                     <MyEditItem />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx

@@ -13,6 +13,12 @@ breadcrumb:
 
 Change log for the Eufemia Forms extension.
 
+## v10.62.4
+
+- Fixed so divider line is displayed when setting `divider="line"` in `Iterate.*` components.
+- Ensured `setFormError` in [Form.useValidation](/uilib/extensions/forms/Form/useValidation/) accepts `undefined` or `null` as value.
+- Prioritized `gap` over `stack` spacing in [Form.Card](/uilib/extensions/forms/Form/Card/).
+
 ## v10.62.1
 
 - Fixed font-size of non-clickable Field.Upload item in [Field.Upload](/uilib/extensions/forms/feature-fields/more-fields/Upload/).

packages/dnb-eufemia/src/components/card/Card.tsx

@@ -108,7 +108,7 @@ function Card(props: Props) {
           alignSelf={alignSelf}
           align={stack ? 'stretch' : align}
           wrap={!stack}
-          gap={stack ? 'medium' : (gap ?? spacing) || false}
+          gap={gap ?? spacing ?? (stack ? 'medium' : false)}
           rowGap={rowGap || false}
         >
           {title && (

packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx

@@ -31,7 +31,7 @@ describe('Card', () => {
 
     const element = document.querySelector('.dnb-card')
 
-    expect(element.classList).toContain('dnb-space__top--large')
+    expect(element).toHaveClass('dnb-space__top--large')
 
     rerender(
       <Card top="x-large">
@@ -40,7 +40,7 @@ describe('Card', () => {
       </Card>
     )
 
-    expect(element.classList).toContain('dnb-space__top--x-large')
+    expect(element).toHaveClass('dnb-space__top--x-large')
   })
 
   it('should contain given classes', () => {
@@ -92,6 +92,17 @@ describe('Card', () => {
     expect(element).not.toHaveClass('dnb-flex-container--wrap')
   })
 
+  it('should prioritize gap over stack spacing', () => {
+    render(
+      <Card stack gap="large">
+        content
+      </Card>
+    )
+
+    const element = document.querySelector('.dnb-flex-container')
+    expect(element).toHaveClass('dnb-flex-container--spacing-large')
+  })
+
   it('should stack children divided by space', () => {
     render(
       <Card stack>

packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss

@@ -13,18 +13,7 @@
 
     &__inner {
       flex: 1;
-      outline: none; // for JavaSCript focus
-
-      margin-bottom: var(--space);
-      &:has(.dnb-flex-container--spacing-small) {
-        --space: var(--spacing-small);
-      }
-      &:has(.dnb-flex-container--spacing-medium) {
-        --space: var(--spacing-medium);
-      }
-      &:has(.dnb-flex-container--spacing-large) {
-        --space: var(--spacing-large);
-      }
+      outline: none; // Because of JavaScript focus management (tabIndex)
 
       transition:
         transform 400ms var(--easing-default) 50ms,

packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useValidation.test.tsx

@@ -137,15 +137,6 @@ describe('useValidation', () => {
         'Error message changed'
       )
       expect(result.current.hasErrors()).toBe(false)
-
-      act(() => {
-        result.current.setFormError(undefined)
-      })
-
-      await waitFor(() => {
-        expect(document.querySelector('.dnb-form-status')).toBeNull()
-        expect(result.current.hasErrors()).toBe(false)
-      })
     })
 
     it('should handle the setFormError method without an identifier', async () => {
@@ -173,6 +164,54 @@ describe('useValidation', () => {
         'Error message'
       )
     })
+
+    it('should remove the setFormError when the value is null', async () => {
+      render(<Form.Handler id={identifier}>content</Form.Handler>)
+
+      const { result } = renderHook(() => useValidation(identifier))
+
+      act(() => {
+        result.current.setFormError(new Error('Error message'))
+      })
+
+      expect(document.querySelector('.dnb-form-status')).toHaveTextContent(
+        'Error message'
+      )
+      expect(result.current.hasErrors()).toBe(false)
+
+      act(() => {
+        result.current.setFormError(null)
+      })
+
+      await waitFor(() => {
+        expect(document.querySelector('.dnb-form-status')).toBeNull()
+        expect(result.current.hasErrors()).toBe(false)
+      })
+    })
+
+    it('should remove the setFormError when the value is undefined', async () => {
+      render(<Form.Handler id={identifier}>content</Form.Handler>)
+
+      const { result } = renderHook(() => useValidation(identifier))
+
+      act(() => {
+        result.current.setFormError(new Error('Error message'))
+      })
+
+      expect(document.querySelector('.dnb-form-status')).toHaveTextContent(
+        'Error message'
+      )
+      expect(result.current.hasErrors()).toBe(false)
+
+      act(() => {
+        result.current.setFormError(undefined)
+      })
+
+      await waitFor(() => {
+        expect(document.querySelector('.dnb-form-status')).toBeNull()
+        expect(result.current.hasErrors()).toBe(false)
+      })
+    })
   })
 
   describe('hasFieldError', () => {

packages/dnb-eufemia/src/extensions/forms/Form/data-context/useValidation.tsx

@@ -7,11 +7,12 @@ import {
 import DataContext, { ContextState } from '../../DataContext/Context'
 import { SharedAttachments } from '../../DataContext/Provider'
 import { EventStateObject, Path } from '../../types'
+import { FormError } from '../../utils'
 
 type UseDataReturn = {
   hasErrors: ContextState['hasErrors']
   hasFieldError: ContextState['hasFieldError']
-  setFormError: (error: Error) => void
+  setFormError: (error: Error | FormError | undefined | null) => void
   setFieldStatus: (path: Path, status: EventStateObject) => void
 }
 

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx

@@ -171,7 +171,12 @@ function ArrayItemArea(props: Props & FlexContainerProps) {
 
   return (
     <ArrayItemAreaContext.Provider
-      value={{ handleRemoveItem, variant, toolbarVariant }}
+      value={{
+        handleRemoveItem,
+        variant,
+        toolbarVariant,
+        divider: restProps.divider,
+      }}
     >
       <HeightAnimation
         className={classnames(

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemAreaContext.ts

@@ -1,10 +1,12 @@
 import { createContext } from 'react'
 import { ArrayItemAreaProps } from './ArrayItemArea'
+import { BasicProps } from '../../../../components/flex/Container'
 
 type ArrayItemAreaContext = {
   handleRemoveItem?: () => void
   variant?: ArrayItemAreaProps['variant']
   toolbarVariant?: ArrayItemAreaProps['toolbarVariant']
+  divider?: BasicProps['divider']
 }
 
 const ArrayItemAreaContext = createContext<ArrayItemAreaContext>(null)

packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts

@@ -35,6 +35,16 @@ describe('Iterate.Array', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match view container with line divider', async () => {
+    const screenshot = await makeScreenshot({
+      url,
+      selector:
+        '[data-visual-test="view-and-edit-container-with-line-divider"]',
+    })
+
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match filled edit container', async () => {
     const screenshot = await makeScreenshot({
       url,

packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx

@@ -173,6 +173,7 @@ function PushContainer(props: AllProps) {
         <IterateArray
           path="/pushContainerItems"
           containerMode={showOpenButton ? 'view' : 'edit'}
+          withoutFlex
         >
           <NewContainer
             title={title}

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

@@ -115,13 +115,13 @@ describe('PushContainer', () => {
 
     expect(
       document.querySelectorAll('.dnb-forms-iterate__element')
-    ).toHaveLength(1)
+    ).toHaveLength(0)
 
     await userEvent.click(button)
 
     expect(
       document.querySelectorAll('.dnb-forms-iterate__element')
-    ).toHaveLength(2)
+    ).toHaveLength(1)
     expect(
       document.querySelector('.dnb-forms-section-edit-block')
     ).toHaveAttribute('aria-hidden', 'true')

packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx

@@ -28,7 +28,8 @@ export default function Toolbar({
     value,
     arrayValue: items,
   } = useContext(IterateItemContext) || {}
-  const { toolbarVariant } = useContext(ArrayItemAreaContext) || {}
+  const { toolbarVariant, divider } =
+    useContext(ArrayItemAreaContext) || {}
   const { errorInContainer } = useTranslation().IterateEditContainer
   const { hasError, hasVisibleError } =
     useContext(FieldBoundaryContext) || {}
@@ -54,7 +55,9 @@ export default function Toolbar({
       className={classnames('dnb-forms-iterate-toolbar', className)}
       {...rest}
     >
-      {toolbarVariant !== 'custom' && <Hr space={0} />}
+      {toolbarVariant !== 'custom' && divider !== 'line' && (
+        <Hr space={0} />
+      )}
 
       <ToolbarContext.Provider value={{ setShowError }}>
         <Flex.Horizontal