From 661c81671039d97d7f00c8ea8a3ec2e7d9248f34 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Wed, 12 Oct 2022 15:16:01 +0200
Subject: [PATCH] feat(HeightAnimation): add showOverflow property

- add showOverflow property
- And basic auto resizing example
---
 .../components/height-animation/Examples.tsx  | 41 +++++++++++++++++++
 .../components/height-animation/demos.md      |  5 +++
 .../components/height-animation/properties.md |  1 +
 .../height-animation/HeightAnimation.tsx      |  8 ++++
 .../style/_height-animation.scss              |  3 ++
 5 files changed, 58 insertions(+)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/Examples.tsx
index 683940628fa..42d56d1105e 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/Examples.tsx
+++ b/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>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/demos.md
index 40cf57898c6..7a46356f7ed 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/demos.md
+++ b/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`.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/properties.md
index 0669df078ed..d5f50e851ee 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/properties.md
+++ b/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.                                                                 |
diff --git a/packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx b/packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx
index 64317986113..a34de3f21a6 100644
--- a/packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx
+++ b/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}
diff --git a/packages/dnb-eufemia/src/components/height-animation/style/_height-animation.scss b/packages/dnb-eufemia/src/components/height-animation/style/_height-animation.scss
index 380e15a604c..683c4078646 100644
--- a/packages/dnb-eufemia/src/components/height-animation/style/_height-animation.scss
+++ b/packages/dnb-eufemia/src/components/height-animation/style/_height-animation.scss
@@ -9,4 +9,7 @@
   &--animating {
     overflow: hidden;
   }
+  &--show-overflow {
+    overflow: visible;
+  }
 }