From 35d97aa975d0dcde158e526f25a4b8b78cb0f53e Mon Sep 17 00:00:00 2001
From: Alf Kristian Stoyle <alf.kristian.stoyle@schibsted.com>
Date: Thu, 22 Sep 2022 11:51:02 +0200
Subject: [PATCH 1/2] Fix glitching animated expansion

https://github.com/fabric-ds/react/commit/fd69c9a80c2a453f86841044f95eb673e599a497
removed base styles which is needed when using element-collapse. Basically
not have a `overflow: hidden` and `height: 0px`, makes it have default values
causing the glitching effect.

However when in default expanded mode, these styles must not be there.

Closes
https://github.com/fabric-ds/issues/issues/108
https://github.com/fabric-ds/react/issues/144
---
 packages/_helpers/expand-transition.tsx            | 9 ++++++++-
 packages/expandable/stories/Expandable.stories.tsx | 8 ++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/_helpers/expand-transition.tsx b/packages/_helpers/expand-transition.tsx
index d436fb49..058275a0 100644
--- a/packages/_helpers/expand-transition.tsx
+++ b/packages/_helpers/expand-transition.tsx
@@ -8,6 +8,7 @@ export function ExpandTransition({
   const [removeElement, setRemoveElement] = useState(!show);
   const expandableRef = useRef<HTMLDivElement>(null);
   const isMounted = useRef(false);
+  const initialShow = useRef<boolean>(show === true);
 
   function collapseElement(el: HTMLElement) {
     collapse(el, () => setRemoveElement(true));
@@ -37,8 +38,14 @@ export function ExpandTransition({
     }
   }, [show]);
 
+  const initialStyle = !initialShow.current ? 'overflow-hidden h-0' : undefined;
+
   return (
-    <div ref={expandableRef} aria-hidden={!show ? true : undefined}>
+    <div
+      className={initialStyle}
+      ref={expandableRef}
+      aria-hidden={!show ? true : undefined}
+    >
       {removeElement ? null : children}
     </div>
   );
diff --git a/packages/expandable/stories/Expandable.stories.tsx b/packages/expandable/stories/Expandable.stories.tsx
index d29ec5b2..682c9e73 100644
--- a/packages/expandable/stories/Expandable.stories.tsx
+++ b/packages/expandable/stories/Expandable.stories.tsx
@@ -87,6 +87,14 @@ export const Animated = () => {
   );
 };
 
+export const AnimatedExpanded = () => {
+  return (
+    <Expandable title="Animated box" expanded box info animated>
+      <h1>I am expandable</h1>
+    </Expandable>
+  );
+};
+
 export const Heading = () => {
   return (
     <Expandable title="I'm also a heading" headingLevel={1}>

From 485db22cff39d466c95d5d0cb1653041414e5a14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alf=20Kristian=20St=C3=B8yle?=
 <20624+stoyle@users.noreply.github.com>
Date: Tue, 27 Sep 2022 08:59:36 +0200
Subject: [PATCH 2/2] Update packages/_helpers/expand-transition.tsx

Co-authored-by: Richard Walker <digitalsadhu@gmail.com>
---
 packages/_helpers/expand-transition.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/_helpers/expand-transition.tsx b/packages/_helpers/expand-transition.tsx
index 058275a0..4a70c0f6 100644
--- a/packages/_helpers/expand-transition.tsx
+++ b/packages/_helpers/expand-transition.tsx
@@ -38,6 +38,7 @@ export function ExpandTransition({
     }
   }, [show]);
 
+  // Set initial style to prevent glitching bug
   const initialStyle = !initialShow.current ? 'overflow-hidden h-0' : undefined;
 
   return (