fix: automatic animations

Author: thejackshelton

apps/website/src/routes/docs/headless/collapsible/examples/animation.tsx

@@ -1,9 +1,11 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
-import './collapsible.css';
+import styles from './collapsible.css?inline';
 import SVG from './svg';
 
 export default component$(() => {
+  useStyles$(styles);
+
   return (
     <Collapsible class="collapsible">
       <CollapsibleTrigger class="collapsible-trigger">

apps/website/src/routes/docs/headless/collapsible/examples/collapsible.css

@@ -12,7 +12,7 @@
   align-items: center;
 }
 
-.collapsible-trigger[data-state='open'] svg {
+.collapsible-trigger[data-open] svg {
   transform: rotate(180deg);
 }
 
@@ -53,10 +53,10 @@
   }
 }
 
-.collapsible-animation[data-state='open'] {
+.collapsible-animation[data-open] {
   animation: 550ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards collapsible-open;
 }
 
-.collapsible-animation[data-state='closed'] {
+.collapsible-animation[data-closed] {
   animation: 350ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards collapsible-closed;
 }

apps/website/src/routes/docs/headless/collapsible/examples/no-animation.tsx

@@ -0,0 +1,27 @@
+import { component$, useStyles$, useSignal, $ } from '@builder.io/qwik';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
+import styles from './collapsible.css?inline';
+import SVG from './svg';
+
+export default component$(() => {
+  useStyles$(styles);
+  const count = useSignal<number>(0);
+
+  const handleOpenChange$ = $((open: boolean) => {
+    if (open) {
+      count.value++;
+    }
+  });
+
+  return (
+    <Collapsible class="collapsible" onOpenChange$={handleOpenChange$}>
+      <CollapsibleTrigger class="collapsible-trigger">
+        <span>Trigger</span>
+        <SVG />
+      </CollapsibleTrigger>
+      <CollapsibleContent class="collapsible-content collapsible-content-outline ">
+        Content: {count.value}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+});

apps/website/src/routes/docs/headless/collapsible/examples/open-change.tsx

@@ -0,0 +1,20 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
+import styles from './collapsible.css?inline';
+import SVG from './svg';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Collapsible class="collapsible" open>
+      <CollapsibleTrigger class="collapsible-trigger">
+        <span>Trigger</span>
+        <SVG />
+      </CollapsibleTrigger>
+      <CollapsibleContent class="collapsible-content collapsible-content-outline ">
+        Content
+      </CollapsibleContent>
+    </Collapsible>
+  );
+});

apps/website/src/routes/docs/headless/collapsible/examples/open.tsx

@@ -1,27 +1,29 @@
-import { component$, useSignal } from '@builder.io/qwik';
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
-import './collapsible.css';
+import styles from './collapsible.css?inline';
 
 export default component$(() => {
-  const openSig = useSignal<boolean>(true);
+  useStyles$(styles);
+  const isOpen = useSignal<boolean>(true);
 
   return (
-    <div>
-      <p>state: {openSig.value ? 'true' : 'false'}</p>
-      <Collapsible bind:isOpen={openSig}>
-        <CollapsibleTrigger>I am trigger 1!</CollapsibleTrigger>
+    <>
+      <input
+        style={{ width: '20px', height: '20px', accentColor: 'hsl(var(--primary))' }}
+        type="checkbox"
+        bind:checked={isOpen}
+      />
+
+      <p>
+        is open: <strong>{isOpen.value ? 'true' : 'false'}</strong>
+      </p>
+
+      <Collapsible class="collapsible" bind:open={isOpen}>
+        <CollapsibleTrigger class="collapsible-trigger">Trigger</CollapsibleTrigger>
         <CollapsibleContent class="collapsible-content">
-          I am the content 1!
+          <p class="collapsible-content-outline">Content</p>
         </CollapsibleContent>
       </Collapsible>
-      <button
-        class="rounded-base bg-slate-500 px-2 py-3 text-white"
-        onClick$={() => {
-          openSig.value = !openSig.value;
-        }}
-      >
-        Programmatic toggle
-      </button>
-    </div>
+    </>
   );
 });

apps/website/src/routes/docs/headless/collapsible/examples/padding.tsx

@@ -19,6 +19,7 @@ An interactive component which expands/collapses a panel.
     'Full keyboard navigation',
     'Controlled or uncontrolled',
     'Initial open state does not wake up the component',
+    'Automatic animation detection',
     'Executes on interaction or programmatically',
   ]}
 />
@@ -69,73 +70,24 @@ As much as we love the native elements, they come with a couple of problems:
 
 <Showcase name="animation" />
 
-## Jack's bug watch 🔎:
+### Why does padding or border break the animation?
 
-<strong style={{ color: 'red' }}>BUG:</strong> Refresh the page and click on programmatic toggle.
-The animation does not work.
+Padding or border applied to `CollapsibleContent` breaks height animations. This is because the content height has changed.
 
-<Showcase name="programmatic" />
-
-<strong style={{ color: 'red' }}>BUG:</strong> resize the window after closing and opening
-the collapsible. (content height does not resize)
-
-<Showcase name="no-animation" />
-
-<strong style={{ color: 'red' }}>BUG:</strong> watch the animation. Issue explained further
-below.
-
-<Showcase name="padding" />
-
-## Hey Qwik developers!
-
-Qwik UI is already on the path to a library that gives you the features you know and love with other headless libraries (hopefully more functionality), with the performance of _just_ grabbing html on the page.
+To fix this, add a child element to the content, and set the padding or border on that element.
 
-To work towards this, I have been working on a new primitive to rebuild the accordion from the ground up. (which currently uses visible tasks)
+> Rather than dealing with this under the hood, we thought it'd be appropriate to keep style management as simple as possible. Let us know if you have a better solution!
 
-<Note status="warning">
-  Unfortunately, I don't have the time right now to complete it, but we are _basically
-  80%_ there. Would really appreciate some help on this. It still needs tests (many of
-  which can be taken from the accordion).
-</Note>
+## Component State
 
-It is a collapsible or [disclosure component](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/), similar to native html's `details & summary` tags. Unfortunately, the accessibility for these native elements is very flaky, and thus, this component is needed.
+### Uncontrolled / Initial value
 
-Not only does it benefit this component, but also the performance of the accordion (which would be built on top of this).
-
-### What I'd like to add:
-
-<FeatureList
-  features={[
-    'An `onOpenChange$` prop function that runs when the collapsible has opened or closed',
-  ]}
-/>
+<Showcase name="open" />
 
-## There are two minor bugs:
+### Controlled / Reactive value
 
-### **BUG #1:**
-
-We currently detect automatic animations with the `getComputedStyle` API. Unfortunately, this is on the client, and so we do not get an animation if:
-
-- was loaded on SSR **AND** open by default
-
-I was however, able to make it work when clicking the actual button's trigger with a 1ms setTimeout inside the `handleClick$`, but it is still a problem with programmatic behavior.
-
-We need to figure out how to detect the animation with SSR **OR** use a different way of animating. I briefly tried using `requestAnimationFrame` as an alternative.
-
-> My current thoughts are, setting it as an animated collapsible on the server, but then setting it back to false on the client when resumed if it does not have an animation (the current logic for that does not work)
-
-[where the issue is](https://github.com/thejackshelton/collapsible/blob/main/src/components/collapsible/collapsible-content.tsx#L27)
-
-### **BUG #2:**
-
-If you close and open the collapsible again, try resizing the window, notice that the container does not adjust its height to match its content.
-
-[where the issue is](https://github.com/thejackshelton/collapsible/blob/main/src/components/collapsible/collapsible-trigger.tsx#L16)
-
-> You can see visuals of the problems [on discord here.](https://discord.com/channels/990511757091033108/1040763063533588562/1193628593088106496)
-
-The overall component is relatively small, around 250 lines of code.
+<Showcase name="programmatic" />
 
-### **BUG #3:**
+### Handling open / close
 
-Padding currently breaks height animations. This is because the padding is applied to the content, and the content is animated. This causes the content to animate from the padding, which is not the desired effect. :facepalm
+<Showcase name="open-change" />

apps/website/src/routes/docs/headless/collapsible/examples/programmatic.tsx

@@ -8,7 +8,7 @@
 
 .select-trigger {
   width: 100%;
-  border: 2px dashed hsla(var(--primary) / 1);
+  border: 2px dotted hsla(var(--primary) / 1);
   border-radius: calc(var(--border-radius) / 2);
   height: 44px;
 }
@@ -22,7 +22,7 @@
   width: 100%;
   background-color: hsl(var(--background));
   padding: 0.5rem;
-  border: 2px dashed hsla(var(--foreground) / 0.6);
+  border: 2px dotted hsla(var(--foreground) / 0.6);
   border-radius: calc(var(--border-radius) / 2);
   max-width: var(--select-width);
   color: hsl(var(--foreground));
@@ -41,7 +41,7 @@
 }
 
 [data-highlighted] {
-  outline: 2px dashed hsla(var(--primary) / 1);
+  outline: 2px dotted hsla(var(--primary) / 1);
   border-radius: calc(var(--border-radius) / 2);
 }
 

apps/website/src/routes/docs/headless/collapsible/index.mdx

@@ -11,10 +11,14 @@ import { collapsibleContextId } from './collapsible-context-id';
 
 export type CollapsibleContentProps = PropsOf<'div'>;
 
+import { isServer } from '@builder.io/qwik/build';
+
 export const CollapsibleContent = component$((props: CollapsibleContentProps) => {
   const context = useContext(collapsibleContextId);
-  const isHiddenSig = useSignal<boolean>(false);
-  const isAnimatedSig = useSignal<boolean>(false);
+  const isHiddenSig = useSignal<boolean>(!context.isOpenSig.value);
+  // check if it's initially "animatable"
+  const isAnimatedSig = useSignal<boolean>(true);
+  const initialRenderSig = useSignal<boolean>(true);
   const contentId = `${context.itemId}-content`;
 
   const hideContent$ = $(() => {
@@ -27,27 +31,35 @@ export const CollapsibleContent = component$((props: CollapsibleContentProps) =>
   useTask$(async function automaticAnimations({ track }) {
     track(() => context.isOpenSig.value);
 
-    if (!context.contentRef.value) return;
+    if (isServer) {
+      return;
+    }
 
     await context.getContentDimensions$();
 
-    /* check if there's a transition or animation */
-    const { animationDuration, transitionDuration } = getComputedStyle(
-      context.contentRef.value,
-    );
+    /* check if there's a transition or animation, we set a timeout for the initial render */
+    setTimeout(() => {
+      const { animationDuration, transitionDuration } = getComputedStyle(
+        context.contentRef.value!,
+      );
 
-    if (animationDuration !== '0s') {
-      console.log(animationDuration);
-      isAnimatedSig.value = true;
-    } else if (transitionDuration !== '0s') {
-      isAnimatedSig.value = true;
-    }
+      // don't animate if initially open
+      if (
+        animationDuration === '0s' &&
+        transitionDuration === '0s' &&
+        !initialRenderSig.value
+      ) {
+        isAnimatedSig.value = false;
+      } else {
+        isAnimatedSig.value = true;
+      }
+    }, 15);
 
     if (context.isOpenSig.value) {
       isHiddenSig.value = false;
     }
 
-    context.initialStateSig.value = false;
+    initialRenderSig.value = false;
   });
 
   return (
@@ -56,20 +68,13 @@ export const CollapsibleContent = component$((props: CollapsibleContentProps) =>
       ref={context.contentRef}
       id={contentId}
       data-collapsible-content
-      data-state={
-        context.initialStateSig.value
-          ? 'initial'
-          : context.isOpenSig.value
-          ? 'open'
-          : 'closed'
-      }
+      data-open={!initialRenderSig.value && context.isOpenSig.value ? '' : undefined}
+      data-closed={!context.isOpenSig.value ? '' : undefined}
       onAnimationEnd$={[hideContent$, props.onAnimationEnd$]}
       onTransitionEnd$={[hideContent$, props.onTransitionEnd$]}
       hidden={isAnimatedSig.value ? isHiddenSig.value : !context.isOpenSig.value}
     >
-      <div ref={context.contentChildRef}>
-        <Slot />
-      </div>
+      <Slot />
     </div>
   );
 });