From 3094b1889457205ae6cc5fb2d74e0e9dbcfa2976 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Tue, 25 Jun 2024 11:45:01 +0200 Subject: [PATCH] feat(forms): add property compensateForGap to Visibility (#3733) Based on #3732 --------- Co-authored-by: Anders --- .../src/components/height-animation/useHeightAnimation.tsx | 2 +- .../src/extensions/forms/Form/Visibility/Visibility.tsx | 4 ++++ .../src/extensions/forms/Form/Visibility/VisibilityDocs.ts | 5 +++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/dnb-eufemia/src/components/height-animation/useHeightAnimation.tsx b/packages/dnb-eufemia/src/components/height-animation/useHeightAnimation.tsx index be81eb87ace..099ad46da17 100644 --- 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 index 2f9bc784dd8..90428848461 100644 --- 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} > {children} diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/VisibilityDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/VisibilityDocs.ts index 600340b723c..ae0dc3496dc 100644 --- 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'],