diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx index 9f401953cf2..96477ba8c66 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx @@ -641,7 +641,7 @@ export const UsingIterate = () => { Accounts - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useValidation/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useValidation/info.mdx index b8a03449ef4..e18d740cc70 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/useValidation/info.mdx +++ b/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'), diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx index a238bd87094..71436bffd2c 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/Examples.tsx @@ -298,7 +298,7 @@ export const ViewAndEditContainer = () => { Accounts - + @@ -681,19 +681,80 @@ export const FilledViewAndEditContainer = () => { onSubmit={(data) => console.log('onSubmit', data)} onSubmitRequest={() => console.log('onSubmitRequest')} > - + Accounts - + + - + + + ) + }} + + ) +} +export const ViewAndEditContainerWithLineDivider = () => { + return ( + + {() => { + const MyEditItem = () => { + return ( + + + + + ) + } + + const MyViewItem = () => { + return ( + + + + + ) + } + + return ( + console.log('onSubmit', data)} + onSubmitRequest={() => console.log('onSubmitRequest')} + > + + Accounts + + + + + + + + + + ) }} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx index 42d6de4bd4c..3036c42801a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Array/demos.mdx +++ b/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 +### Using a line divider + + + ### Initially open diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx index f9d8d5151ec..5b3de43817e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/PushContainer/Examples.tsx @@ -79,7 +79,7 @@ export const InitiallyOpen = () => { Accounts - + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx index 3cbccfe7e07..fc9eb861343 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx +++ b/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/). diff --git a/packages/dnb-eufemia/src/components/card/Card.tsx b/packages/dnb-eufemia/src/components/card/Card.tsx index 5cbf9e1530a..898efdf4985 100644 --- a/packages/dnb-eufemia/src/components/card/Card.tsx +++ b/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 && ( diff --git a/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx b/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx index b49ac267f67..b9a133407a3 100644 --- a/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx +++ b/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( @@ -40,7 +40,7 @@ describe('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( + + content + + ) + + const element = document.querySelector('.dnb-flex-container') + expect(element).toHaveClass('dnb-flex-container--spacing-large') + }) + it('should stack children divided by space', () => { render( diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-when-used-in-wizard.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-when-used-in-wizard.snap.png index 170ba026714..2bdb0261c86 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-when-used-in-wizard.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Card/__tests__/__image_snapshots__/formcard-have-to-match-when-used-in-wizard.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png index e3303eba973..1f8ace71f73 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png index 8ef615edfa2..b5653b43ac1 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-edit-container.snap.png index e7012b6e381..ba76ec16e57 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-edit-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-edit-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-view-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-view-container.snap.png index 05b167a1d58..229c4a88f52 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-view-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-view-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss index 88f1a5462bc..e05ad353b0e 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss +++ b/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, diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useValidation.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useValidation.test.tsx index bbdbc8de80d..8aa9de73d6e 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/__tests__/useValidation.test.tsx +++ b/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(content) + + 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(content) + + 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', () => { diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useValidation.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useValidation.tsx index e6b00106e04..0d24732510a 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/data-context/useValidation.tsx +++ b/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 } diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx index 7e71a21b1d3..1287a7e4815 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/ArrayItemArea.tsx @@ -171,7 +171,12 @@ function ArrayItemArea(props: Props & FlexContainerProps) { return ( void variant?: ArrayItemAreaProps['variant'] toolbarVariant?: ArrayItemAreaProps['toolbarVariant'] + divider?: BasicProps['divider'] } const ArrayItemAreaContext = createContext(null) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts index 90370890ba3..2af2329a291 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.screenshot.test.ts +++ b/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, diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-animated-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-animated-container.snap.png index a457170abc7..20d9f1fec6c 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-animated-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-animated-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png index fd7521308b7..494dcd50398 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-edit-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png index 0cd8f198706..11c20fe76f5 100644 Binary files a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-filled-view-container.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-view-container-with-line-divider.snap.png b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-view-container-with-line-divider.snap.png new file mode 100644 index 00000000000..d3b2c6f3b44 Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/__image_snapshots__/iteratearray-have-to-match-view-container-with-line-divider.snap.png differ diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx index f224bf523ec..0fec2e7cbef 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx @@ -173,6 +173,7 @@ function PushContainer(props: AllProps) { { 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') diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx index 8beb409f98f..a07b7b0f148 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx +++ b/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' &&
} + {toolbarVariant !== 'custom' && divider !== 'line' && ( +
+ )} { ).toHaveClass('dnb-space__top--large') }) + it('should render Hr by default', () => { + render(content) + + expect(document.querySelector('.dnb-hr')).toBeInTheDocument() + }) + + it('should not render Hr when toolbarVariant is custom', () => { + render( + + content + + ) + + expect(document.querySelector('.dnb-hr')).not.toBeInTheDocument() + }) + + it('should not render Hr when divider is line', () => { + render( + + content + + ) + + expect(document.querySelector('.dnb-hr')).not.toBeInTheDocument() + }) + it('has no buttons/tools by default', () => { render( diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx index 92fdba61dc3..d04f4236668 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx @@ -1,7 +1,6 @@ import React, { useContext, useMemo } from 'react' import classnames from 'classnames' import { convertJsxToString } from '../../../../shared/component-helper' -import { Flex } from '../../../../components' import { Props as FlexContainerProps } from '../../../../components/flex/Container' import { Lead } from '../../../../elements' import ArrayItemArea, { ArrayItemAreaProps } from '../Array/ArrayItemArea' @@ -67,19 +66,17 @@ function ViewContainer(props: AllProps) { toolbarVariant={toolbarVariant} {...restProps} > - - {itemTitle && {itemTitle}} - {children} - {hasToolbar - ? null - : toolbarElement ?? - (toolbarVariant !== 'custom' && ( - - - - - ))} - + {itemTitle && {itemTitle}} + {children} + {hasToolbar + ? null + : toolbarElement ?? + (toolbarVariant !== 'custom' && ( + + + + + ))} ) } diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/Iterate.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/Iterate.stories.tsx index 191e70358fc..ee0ab61bb29 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/Iterate.stories.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/stories/Iterate.stories.tsx @@ -320,3 +320,27 @@ export function InWizard() { ) } + +export const DisplayDividerWhenUsingContainer = () => ( + + + + + Displaying divider line when using container + + + + + + + + + + + + +) diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/style/dnb-iterate.scss b/packages/dnb-eufemia/src/extensions/forms/Iterate/style/dnb-iterate.scss index a0c68e23bc0..b1d0d2a045a 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Iterate/style/dnb-iterate.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Iterate/style/dnb-iterate.scss @@ -2,11 +2,34 @@ .dnb-forms-iterate { &__element { - outline: none; // for JavaSCript focus + outline: none; // Because of JavaScript focus management (tabIndex) + } + + &:has(.dnb-forms-iterate__element.dnb-space__top--small) { + --block-gap: var(--spacing-small); + } + &:has(.dnb-forms-iterate__element.dnb-space__top--medium) { + --block-gap: var(--spacing-medium); + } + &:has(.dnb-forms-iterate__element.dnb-space__top--large) { + --block-gap: var(--spacing-large); } & > &__element:has(> .dnb-forms-section-block) { - // To make Animation not jump, we add "margin-bottom" in the inner element + // To make animation not jump, + // we reset the margin-top and ... margin-top: 0; + .dnb-forms-section-block__inner { + // ... add "margin-bottom" in the inner element (.dnb-forms-section-block__inner). + margin-bottom: var(--block-gap, var(--spacing-large)); + } + + // To align the divider to the above margin swap. + &:has(~ .dnb-forms-iterate__element) { + & ~ .dnb-hr { + margin-top: 0; + margin-bottom: var(--block-gap); + } + } } }