feat(HeightAnimation): add showOverflow property

packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/Examples.tsx

@@ -65,6 +65,47 @@ render(<Example />)
   )
 }
 
+export function HeightAnimationAutosizing() {
+  return (
+    <ComponentBox useRender>
+      {
+        /* jsx */ `
+const Example = () => {
+  const [showMe, setShowMe] = React.useState(true)
+
+  return (
+    <>
+      <HeightAnimation
+        open
+        showOverflow
+      >
+        {showMe ? <Button 
+          onClick={() => {
+            setShowMe(!showMe)
+          }}
+        >
+          Click me!
+        </Button>: <Anchor
+          onClick={() => {
+            setShowMe(!showMe)
+          }}
+        >
+          No, click me!
+        </Anchor>}
+      </HeightAnimation>
+
+      <P top>Look at me 👀</P>
+    </>
+  )
+}
+
+render(<Example />)
+    `
+      }
+    </ComponentBox>
+  )
+}
+
 export function HeightAnimationKeepInDOM() {
   return (
     <ComponentBox useRender>

packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/demos.md

@@ -4,6 +4,7 @@ showTabs: true
 
 import {
 HeightAnimationDefault,
+HeightAnimationAutosizing,
 HeightAnimationKeepInDOM,
 } from 'Docs/uilib/components/height-animation/Examples'
 
@@ -13,6 +14,10 @@ HeightAnimationKeepInDOM,
 
 <HeightAnimationDefault />
 
+### Auto resize height
+
+<HeightAnimationAutosizing />
+
 ### Keep in DOM
 
 When providing `keepInDOM={true}`, your nested content will never be removed from the DOM. But rather be "hidden" with `visually: hidden` and `aria-hidden`.

packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/properties.md

@@ -9,6 +9,7 @@ showTabs: true
 | `open`                                      | _(optional)_ Set to `true` when the view should animate from 0px to auto. Defaults to `false`.              |
 | `animate`                                   | _(optional)_ Set to `false` to omit the animation. Defaults to `true`.                                      |
 | `keepInDOM`                                 | _(optional)_ Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`. |
+| `showOverflow`                              | _(optional)_ Set to `true` to omit the usage of "overflow: hidden;". Defaults to `false`.                   |
 | `duration`                                  | _(optional)_ Custom duration of the animation in ms.                                                        |
 | `element`                                   | _(optional)_ Custom HTML element for the component. Defaults to `div` HTML Element.                         |
 | `innerRef`                                  | _(optional)_ Send along a custom React Ref.                                                                 |

packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx

@@ -14,6 +14,12 @@ export type HeightAnimationProps = {
    */
   keepInDOM?: boolean
 
+  /**
+   * Set to `true` to omit the usage of "overflow: hidden;"
+   * Default: false
+   */
+  showOverflow?: boolean
+
   /**
    * Set to `true` ensure the nested children content will be kept in the DOM.
    * Default: 400
@@ -39,6 +45,7 @@ export default function HeightAnimation({
   open = false,
   animate = true,
   keepInDOM = false,
+  showOverflow = false,
   element,
   duration,
   className,
@@ -84,6 +91,7 @@ export default function HeightAnimation({
           !isAnimating &&
           !open &&
           'dnb-height-animation--hidden',
+        showOverflow && 'dnb-height-animation--show-overflow',
         className
       )}
       style={style}

packages/dnb-eufemia/src/components/height-animation/style/_height-animation.scss

@@ -9,4 +9,7 @@
   &--animating {
     overflow: hidden;
   }
+  &--show-overflow {
+    overflow: visible;
+  }
 }