Fix(expandable): glitching animated expansion (#151)

* Fix glitching animated expansion

fd69c9a
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
fabric-ds/issues#108
#144

Co-authored-by: Alf Kristian Stoyle <alf.kristian.stoyle@schibsted.com>
Co-authored-by: Richard Walker <digitalsadhu@gmail.com>

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,15 @@ export function ExpandTransition({
     }
   }, [show]);
 
+  // Set initial style to prevent glitching bug
+  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>
   );

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}>