feat(forms): add property compensateForGap to Visibility (#3733)

Based on #3732 --------- Co-authored-by: Anders <anderslangseth@gmail.com>
dnbexperience · Jun 25, 2024 · 3094b18 · 3094b18
1 parent b0c4199
commit 3094b18
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/packages/dnb-eufemia/src/components/height-animation/useHeightAnimation.tsx b/packages/dnb-eufemia/src/components/height-animation/useHeightAnimation.tsx
@@ -19,7 +19,7 @@ export type useHeightAnimationOptions = {
   animate?: boolean
 
   /**
-   * To compensate for CSS gap between the rows so animation does not jump during the animation.
+   * To compensate for CSS gap between the rows, so animation does not jump during the animation.
    * Provide a CSS unit or `var(--row-gap)`.
    */
   compensateForGap?: string | 'auto'

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/Visibility.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/Visibility.tsx
@@ -48,6 +48,8 @@ export type Props = {
   animate?: boolean
   /** Keep the content in the DOM, even if it's not visible */
   keepInDOM?: boolean
+  /** To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`. */
+  compensateForGap?: HeightAnimationProps['compensateForGap']
   /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */
   fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes
   element?: HeightAnimationProps['element']
@@ -75,6 +77,7 @@ function Visibility({
   filterData,
   animate,
   keepInDOM,
+  compensateForGap,
   fieldPropsWhenHidden,
   children,
   ...rest
@@ -110,6 +113,7 @@ function Visibility({
         open={open}
         keepInDOM={Boolean(keepInDOM)}
         className="dnb-forms-visibility"
+        compensateForGap={compensateForGap}
         {...rest}
       >
         <FieldProps {...props}>{children}</FieldProps>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/VisibilityDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/VisibilityDocs.ts
@@ -61,6 +61,11 @@ export const VisibilityProperties: PropertiesTableProps = {
     type: 'boolean',
     status: 'optional',
   },
+  compensateForGap: {
+    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',
+    type: 'string',
+    status: 'optional',
+  },
   filterData: {
     doc: 'Filter data based on provided criteria. More info about `filterData` can be found in the [Getting Started](/uilib/extensions/forms/getting-started/#filter-data) documentation.',
     type: ['object', 'function'],