Merge branch 'main' into dynamic-fonts

Author: maiieul

.changeset/lucky-carrots-pay.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: collapsible renders correctly on CSR

CONTRIBUTING.md

@@ -82,13 +82,13 @@ pnpm preview
 - Build the Cloudfare version of the qwik-ui documentation
 
 ```shell
-pnpm build.clouflare
+pnpm build.cloudflare
 ```
 
 - Preview the Cloudfare build of the qwik-ui documentation (no HMR)
 
 ```shell
-pnpm preview.clouflare
+pnpm preview.cloudflare
 ```
 
 ### 5. Make sure you add / modify tests

apps/website/src/components/copy-css-config/copy-css-config.tsx

@@ -30,7 +30,7 @@ export default component$(() => {
       </Button>
       <Modal
         bind:show={showSig}
-        class="my-animation max-w-2xl overflow-x-hidden rounded-base bg-background p-8 text-foreground shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
+        class="my-animation h-full max-w-2xl overflow-x-hidden rounded-base bg-background p-8 text-foreground shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
       >
         <ModalHeader>
           <h2 class="text-lg font-bold">Copy config</h2>

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

@@ -0,0 +1,28 @@
+import { component$, useStyles$, useSignal } from '@builder.io/qwik';
+import styles from '../snippets/collapsible.css?inline';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
+import SVG from './svg';
+
+export default component$(() => {
+  useStyles$(styles);
+  const isCollapsibleRendered = useSignal(false);
+
+  return (
+    <>
+      <button onClick$={() => (isCollapsibleRendered.value = true)}>
+        Render Collapsible
+      </button>
+      {isCollapsibleRendered.value && (
+        <Collapsible class="collapsible">
+          <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/index.mdx

@@ -136,6 +136,14 @@ To fix this, add a child element to the content, and set the padding or border o
 
 > 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 collapsible can be rendered both server-side or client-side, same with the rest of the components.
+
+<Showcase name="csr" />
+
+The main difference, is there is no server to client handoff. This can be useful if you're navigating via SPA.
+
 ## Example CSS
 
 <CodeSnippet name="collapsible.css" />

cla-signs/v1/cla.json

@@ -431,6 +431,14 @@
       "created_at": "2024-04-03T16:37:30Z",
       "repoId": 545159943,
       "pullRequestNo": 675
+    },
+    {
+      "name": "Kenzo-Wada",
+      "id": 79452224,
+      "comment_id": 2037532394,
+      "created_at": "2024-04-04T15:32:23Z",
+      "repoId": 545159943,
+      "pullRequestNo": 687
     }
   ]
 }

packages/kit-headless/src/components/collapsible/collapsible-content.tsx

@@ -35,7 +35,9 @@ export const CollapsibleContent = component$((props: CollapsibleContentProps) =>
       return;
     }
 
-    await context.getContentDimensions$();
+    if (context.isOpenSig.value) {
+      await context.getContentDimensions$();
+    }
 
     /* check if there's a transition or animation, we set a timeout for the initial render */
     setTimeout(() => {

packages/kit-headless/src/components/collapsible/collapsible.test.ts

@@ -189,3 +189,43 @@ test.describe('Disabled', () => {
     await expect(d.getContent()).toBeHidden();
   });
 });
+
+test.describe('CSR', () => {
+  test(`GIVEN a collapsible
+        WHEN it is client-side rendered
+        THEN the collapsible trigger should be visible
+  `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'csr');
+
+    await d.locator.getByRole('button', { name: 'Render Collapsible' }).click();
+    await expect(d.getTrigger()).toBeVisible();
+  });
+
+  test(`GIVEN a CSR collapsible
+        WHEN the trigger is clicked
+        THEN the collapsible should be opened
+`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'csr');
+
+    await d.locator.getByRole('button', { name: 'Render Collapsible' }).click();
+    await expect(d.getTrigger()).toBeVisible();
+
+    await d.getTrigger().click();
+    await expect(d.getContent()).toBeVisible();
+  });
+
+  test(`GIVEN an open CSR collapsible
+        WHEN the trigger is clicked
+        THEN the collapsible should be closed
+`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'csr');
+
+    await d.locator.getByRole('button', { name: 'Render Collapsible' }).click();
+    await expect(d.getTrigger()).toBeVisible();
+
+    await d.openCollapsible('click');
+    await d.getTrigger().click();
+
+    await expect(d.getContent()).toBeHidden();
+  });
+});