Revert "Fix(expandable): glitching animated expansion (#151)" (#154)

This reverts commit 987e648.
fabric-ds · Sep 28, 2022 · d805741 · d805741
1 parent 987e648
commit d805741
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 17 deletions.
diff --git a/packages/_helpers/expand-transition.tsx b/packages/_helpers/expand-transition.tsx
@@ -8,7 +8,6 @@ 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));
@@ -38,15 +37,8 @@ export function ExpandTransition({
     }
   }, [show]);
 
-  // Set initial style to prevent glitching bug
-  const initialStyle = !initialShow.current ? 'overflow-hidden h-0' : undefined;
-
   return (
-    <div
-      className={initialStyle}
-      ref={expandableRef}
-      aria-hidden={!show ? true : undefined}
-    >
+    <div 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
@@ -87,14 +87,6 @@ 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}>