fix animations

Author: thejackshelton

.changeset/two-glasses-fix.md

@@ -10,15 +10,15 @@ The entire Qwik UI library now does not execute code until interaction.
 
 #### Accordion.Root
 
-- The `behavior="multi"` prop has been replaced with `multiple` on the `<Accordion.Root />` component.
+- The `behavior="multi"` prop has been deprecated with `multiple` on the `<Accordion.Root />` component.
 
 - The default behavior is a single item open at a time.
 
-- The `animated` prop has been deprecated. Animation entry and exit are now automatically handled by the component.
+- The `animated` prop has been deprecated in favor of `heightAnimation`.
 
-- `onSelectIndexChange$` has been deprecated in favor of `onChange$`.
+- `onSelectIndexChange$` has been deprecated and removed in favor of `onChange$`.
 
-- `onFocusIndexChange$` has been deprecated
+- `onFocusIndexChange$` has been deprecated and removed. Let us know if you have a use case for this.
 
 - Reactively control the accordion with the `bind:value` prop.
 

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

@@ -6,7 +6,7 @@ export default component$(() => {
   const items = [1, 2, 3];
 
   return (
-    <Accordion.Root>
+    <Accordion.Root heightAnimation>
       {items.map((item) => (
         <Accordion.Item class="collapsible" key={item}>
           <Accordion.Header>

apps/website/src/routes/docs/headless/accordion/examples/multiple.tsx

@@ -8,14 +8,14 @@ export default component$(() => {
   return (
     <Accordion.Root multiple>
       {items.map((item) => (
-        <Accordion.Item class="accordion-item" key={item}>
+        <Accordion.Item class="collapsible" key={item}>
           <Accordion.Header>
-            <Accordion.Trigger class="accordion-trigger">
+            <Accordion.Trigger class="collapsible-trigger">
               <span>Trigger {item}</span>
               <LuChevronDown />
             </Accordion.Trigger>
           </Accordion.Header>
-          <Accordion.Content class="accordion-content">
+          <Accordion.Content class="collapsible-content-outline collapsible-content">
             Inside Content {item}
           </Accordion.Content>
         </Accordion.Item>

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

@@ -103,6 +103,12 @@ Listen to when a new item is selected by passing a callback function to the `onC
 
 <Showcase name="on-change" />
 
+### Multiple items
+
+To allow multiple items to be open at the same time, set the `multiple` prop to `true`.
+
+<Showcase name="multiple" />
+
 ### Non-collapsible
 
 To disable collapsible behavior, set the `collapsible` prop to `false`.
@@ -127,14 +133,32 @@ The component itself can also be disabled by setting the `disabled` prop to true
 
 ## Advanced
 
-### Animation
+### Height Animation
 
-Animations can also be added using the `--qwikui-collapsible-content-height` variable.
+To animate the height of the content, set the `heightAnimation` prop to `true`.
 
 <Showcase name="animation" />
 
+> In the near future, you won't need JavaScript at all to animate the height of content! Here's the [CSS WG Proposal](https://github.com/w3c/csswg-drafts/blob/main/css-values-5/calc-size-explainer.md) for more info.
+
+You can use the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
+
 <CodeSnippet name="animation.css" />
 
+### Why does padding or border break the animation?
+
+Padding or border applied to `Accordion.Content` breaks our keyframe animation above. This is because the content height has changed.
+
+To fix this, add a child element to the content, and set the padding or border on that element.
+
+```tsx
+<Accordion.Content class="collapsible-animation collapsible-content">
+  <p class="collapsible-content-outline">Content</p>
+</Accordion.Content>
+```
+
+> 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!
+
 ### CSR
 
 The Accordion automatically renders based on its environment. This means that it works for both server-side and client-side rendering.

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

@@ -1,20 +1,24 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
 import { Collapsible } from '@qwik-ui/headless';
 import { LuChevronDown } from '@qwikest/icons/lucide';
 
 export default component$(() => {
   useStyles$(styles);
+  const isOpen = useSignal(true);
 
   return (
-    <Collapsible.Root class="collapsible">
-      <Collapsible.Trigger class="collapsible-trigger">
-        <span>Trigger</span>
-        <LuChevronDown class="collapsible-transition" />
-      </Collapsible.Trigger>
-      <Collapsible.Content class="collapsible-animation collapsible-content">
-        <p class="collapsible-content-outline">Content</p>
-      </Collapsible.Content>
-    </Collapsible.Root>
+    <div>
+      <Collapsible.Root class="collapsible" bind:open={isOpen} heightAnimation>
+        <Collapsible.Trigger class="collapsible-trigger">
+          <span>Trigger</span>
+          <LuChevronDown class="collapsible-transition" />
+        </Collapsible.Trigger>
+        <Collapsible.Content class="collapsible-animation collapsible-content">
+          <p class="collapsible-content-outline">Content</p>
+        </Collapsible.Content>
+      </Collapsible.Root>
+      <button onClick$={() => (isOpen.value = !isOpen.value)}>Toggle Animation</button>
+    </div>
   );
 });
 

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

@@ -33,15 +33,15 @@ An interactive section that shows or hides its connected information.
 <AnatomyTable
   propDescriptors={[
     {
-      name: 'Collapsible',
+      name: 'Collapsible.Root',
       description: 'The root container for the Collapsible component.',
     },
     {
-      name: 'CollapsibleTrigger',
+      name: 'Collapsible.Trigger',
       description: 'A button that opens the Collapsible content when interacted with.',
     },
     {
-      name: 'CollapsibleContent',
+      name: 'Collapsible.Content',
       description: 'Contains the content associated with a Collapsible.',
     },
   ]}
@@ -70,7 +70,7 @@ As much as we love the native elements, they come with a couple of problems:
 
 ### Uncontrolled / Initial value
 
-We can select an initial uncontrolled value by passing the `open` prop to the `<Collapsible />` component.
+We can select an initial uncontrolled value by passing the `open` prop to the `<Collapsible.Root />` component.
 
 <Showcase name="open" />
 
@@ -82,7 +82,7 @@ This is because the content is rendered on the server. Animations applied to `da
 
 ### Controlled / Reactive value
 
-We can pass reactive state by using the bind:open prop to the `<Collapsible />` component.
+We can pass reactive state by using the bind:open prop to the `<Collapsible.Root />` component.
 
 <Showcase name="bind-open" />
 
@@ -108,30 +108,36 @@ To do that, we can use the `onChange$` prop. A parameter is passed to the handle
 
 <Showcase name="disabled" />
 
-The collapsible can be disabled by adding the `disabled` prop to the `<Collapsible />` component.
+The collapsible can be disabled by adding the `disabled` prop to the `<Collapsible.Root />` component.
 
 ## Animating the content
 
 To animate the height of the content, we can use a keyframe animation on the height property.
 
 <Showcase name="animation" />
 
-### Height animation
+### Height Animation
 
-By default, the `--qwikui-collapsible-content-height` CSS variable will automatically be set to the height of the content.
+To animate the height of the content, set the `heightAnimation` prop to `true`.
+
+<Showcase name="animation" />
+
+> In the near future, you won't need JavaScript at all to animate the height of content! Here's the [CSS WG Proposal](https://github.com/w3c/csswg-drafts/blob/main/css-values-5/calc-size-explainer.md) for more info.
+
+You can use the `--qwikui-collapsible-content-height` CSS variable in your keyframes.
 
 <CodeSnippet name="animation.css" />
 
 ### Why does padding or border break the animation?
 
-Padding or border applied to `CollapsibleContent` breaks our keyframe animation above. This is because the content height has changed.
+Padding or border applied to `Collapsible.Content` breaks our keyframe animation above. This is because the content height has changed.
 
 To fix this, add a child element to the content, and set the padding or border on that element.
 
 ```tsx
-<CollapsibleContent class="collapsible-animation collapsible-content">
+<Collapsible.Content class="collapsible-animation collapsible-content">
   <p class="collapsible-content-outline">Content</p>
-</CollapsibleContent>
+</Collapsible.Content>
 ```
 
 > 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!
@@ -171,7 +177,7 @@ Some CSS variables are specific to the docs, feel free to plug in your own value
 
 ### Data Attributes
 
-`Collapsible`, `CollapsibleTrigger`, and `CollapsibleContent` all have the following data attributes that are used to track state:
+`Collapsible.Root`, `Collapsible.Trigger`, and `Collapsible.Content` all have the following data attributes that are used to track state:
 
 <AnatomyTable
   firstColumnLabel="Attribute"
@@ -191,7 +197,7 @@ Some CSS variables are specific to the docs, feel free to plug in your own value
   ]}
 />
 
-### Collapsible (Root)
+### Collapsible.Root
 
 <APITable
   propDescriptors={[

packages/kit-headless/src/components/accordion/accordion-context.tsx

@@ -6,12 +6,13 @@ export type AccordionContext = {
   selectedIndexSig: Signal<number | null>;
   initialIndex?: number;
   givenValueSig: Signal<string | null> | undefined;
-  multiple?: boolean;
+  isMultipleSig: Signal<boolean>;
   onChange$: QRL<(value: string) => void> | undefined;
   itemsMapSig?: Signal<Map<number, boolean>> | undefined;
   triggerRefsArray: Signal<Array<Signal>>;
   disabled?: boolean;
   collapsible?: boolean;
+  isAnimatedSig: Signal<boolean>;
 };
 
 export const accordionItemContextId =

packages/kit-headless/src/components/accordion/accordion-inline.tsx

@@ -6,6 +6,11 @@ export type AccordionRootProps = PropsOf<'div'> & {
   /** If true, multiple items can be open at the same time. */
   multiple?: boolean;
 
+  /**
+   * @deprecated Use the multiple prop instead.
+   */
+  behavior?: 'single' | 'multi';
+
   /** The reactive value controlling which item is open. */
   'bind:value'?: Signal<string | null>;
 
@@ -26,6 +31,14 @@ export type AccordionRootProps = PropsOf<'div'> & {
 
   /** If true, the accordion is collapsible. */
   collapsible?: boolean;
+
+  /** If true, the accordion is animated. */
+  heightAnimation?: boolean;
+
+  /**
+   * @deprecated Use the heightAnimation prop instead.
+   */
+  animated?: boolean;
 };
 
 export const HAccordionRoot: Component<AccordionRootProps> = (

packages/kit-headless/src/components/accordion/accordion-item.tsx

@@ -40,7 +40,7 @@ export const HAccordionItem = component$(
     useTask$(function internalState({ track }) {
       track(() => context.selectedIndexSig.value);
 
-      if (context.multiple || isServer) return;
+      if (context.isMultipleSig.value || isServer) return;
 
       if (context.selectedIndexSig.value !== localIndexSig.value) {
         isOpenSig.value = false;
@@ -105,6 +105,7 @@ export const HAccordionItem = component$(
         disabled={context.disabled || props.disabled}
         collapsible={context.collapsible}
         accordionItem
+        heightAnimation={context.isAnimatedSig.value}
         {...props}
       >
         <Slot />

packages/kit-headless/src/components/accordion/accordion-root.tsx

@@ -18,11 +18,15 @@ export const HAccordionRootImpl = component$((props: AccordionRootProps) => {
     onChange$,
     disabled,
     collapsible = true,
+    animated,
+    heightAnimation,
     ...rest
   } = props;
 
   const selectedIndexSig = useSignal<number>(initialIndex ?? -1);
   const triggerRefsArray = useSignal<Array<Signal>>([]);
+  const isAnimatedSig = useSignal<boolean>(animated === true || heightAnimation === true);
+  const isMultipleSig = useSignal<boolean>(multiple || props.behavior === 'multi');
 
   const itemsMapSig = useComputed$(() => {
     return props.itemsMap!;
@@ -31,13 +35,14 @@ export const HAccordionRootImpl = component$((props: AccordionRootProps) => {
   const context = {
     selectedIndexSig,
     givenValueSig,
-    multiple,
+    isMultipleSig,
     initialIndex,
     onChange$,
     itemsMapSig,
     triggerRefsArray,
     disabled,
     collapsible,
+    isAnimatedSig,
   };
 
   useTask$(({ track }) => {