initial collapsible changes

Author: thejackshelton

apps/website/src/routes/docs/headless/collapsible/collapsible.spec.ts

@@ -11,7 +11,7 @@ export default component$(() => {
         <SVG class="collapsible-transition" />
       </CollapsibleTrigger>
       <CollapsibleContent class="collapsible-animation collapsible-content">
-        Content
+        <p class="collapsible-content-outline">Content</p>
       </CollapsibleContent>
     </Collapsible>
   );

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

@@ -19,14 +19,17 @@
 .collapsible-content {
   width: 100%;
   background-color: hsl(var(--background));
-  padding: 0.5rem;
-  border: 2px dotted hsla(var(--foreground) / 0.6);
   border-radius: calc(var(--border-radius) / 2);
   max-width: var(--select-width);
   color: hsl(var(--foreground));
   overflow: hidden;
 }
 
+.collapsible-content-outline {
+  padding: 0.5rem;
+  border: 2px dotted hsla(var(--foreground) / 0.6);
+}
+
 /* animations only */
 .collapsible-transition {
   transition: transform 500ms ease;

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

@@ -12,7 +12,7 @@ export default component$(() => {
         <span>Trigger</span>
         <SVG />
       </CollapsibleTrigger>
-      <CollapsibleContent class="test-animation collapsible-content">
+      <CollapsibleContent class="collapsible-content collapsible-content-outline ">
         Content
       </CollapsibleContent>
     </Collapsible>

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

@@ -1,16 +1,52 @@
 import { statusByComponent } from '~/_state/component-statuses';
 import { FeatureList } from '~/components/feature-list/feature-list';
 import { Note } from '~/components/note/note';
+import { AnatomyTable } from '~/components/anatomy-table/anatomy-table';
 
 <StatusBanner status={statusByComponent.headless.Collapsible} />
 
 # Collapsible
 
 An interactive component which expands/collapses a panel.
 
-<div data-testid="collapsible-hero-test">
-  <Showcase name="hero" />
-</div>
+<Showcase name="hero" />
+
+## ✨ Features
+
+<FeatureList
+  features={[
+    'Accessible as a button that shows content, following web a11y standards.',
+    'Full keyboard navigation',
+    'Controlled or uncontrolled',
+    'Initial open state does not wake up the component',
+    'Executes on interaction or programmatically',
+  ]}
+/>
+
+## Building blocks
+
+<CodeSnippet name="building-blocks" />
+
+### 🎨 Anatomy
+
+<AnatomyTable
+  propDescriptors={[
+    {
+      name: 'Collapsible',
+      description: 'The root container for the Collapsible component.',
+    },
+    {
+      name: 'CollapsibleTrigger',
+      description: 'A button that opens the Collapsible content when interacted with.',
+    },
+    {
+      name: 'CollapsibleContent',
+      description: 'Contains the content associated with a Collapsible.',
+    },
+  ]}
+/>
+
+## Why use a headless collapsible?
 
 ## Animation
 

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

@@ -0,0 +1,9 @@
+import { component$ } from '@builder.io/qwik';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@qwik-ui/headless';
+
+export default component$(() => (
+  <Collapsible>
+    <CollapsibleTrigger>Trigger</CollapsibleTrigger>
+    <CollapsibleContent>Content</CollapsibleContent>
+  </Collapsible>
+));

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

@@ -0,0 +1,106 @@
+import { expect, test, type Page } from '@playwright/test';
+import { createTestDriver } from './collapsible.driver';
+
+async function setup(page: Page, exampleName: string) {
+  await page.goto(`headless/collapsible/${exampleName}`);
+
+  const driver = createTestDriver(page);
+
+  return {
+    driver,
+  };
+}
+
+test.describe('Mouse Behavior', () => {
+  test(`GIVEN a hero collapsible
+        WHEN clicking on the trigger
+        THEN the content should be visible
+        AND aria-expanded is true`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+
+    await d.getTrigger().click();
+
+    await expect(d.getContent()).toBeVisible();
+    await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  test(`GIVEN an open hero collapsible
+        WHEN clicking on the trigger
+        THEN the content should be hidden
+        AND aria-expanded is false`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await d.openCollapsible('click');
+
+    await d.getTrigger().click();
+
+    await expect(d.getContent()).toBeHidden();
+    await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'false');
+  });
+});
+
+test.describe('Keyboard Behavior', () => {
+  test(`GIVEN a hero collapsible
+        WHEN pressing the space key
+        THEN the content should be visible
+        AND aria-expanded is true`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+
+    await d.getTrigger().press('Space');
+
+    await expect(d.getContent()).toBeVisible();
+    await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  test(`GIVEN an open hero collapsible
+        WHEN pressing the space key
+        THEN the content should be hidden
+        AND aria-expanded is false`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await d.openCollapsible('Space');
+
+    await d.getTrigger().press('Space');
+
+    await expect(d.getContent()).toBeHidden();
+    await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test(`GIVEN a hero collapsible
+        WHEN pressing the enter key
+        THEN the content should be visible
+        AND aria-expanded is true`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+
+    await d.getTrigger().press('Enter');
+
+    await expect(d.getContent()).toBeVisible();
+    await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  test(`GIVEN an open hero collapsible
+        WHEN pressing the enter key
+        THEN the content should be hidden
+        AND aria-expanded is false`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await d.openCollapsible('Enter');
+
+    await d.getTrigger().press('Enter');
+
+    await expect(d.getContent()).toBeHidden();
+    await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'false');
+  });
+});
+
+test.describe('Aria', () => {
+  test(`GIVEN a collapsible with aria-controls
+        WHEN a collapsible is rendered
+        THEN the trigger's aria-controls should equal the content's id`, async ({
+    page,
+  }) => {
+    const { driver: d } = await setup(page, 'hero');
+    await d.openCollapsible('Enter');
+
+    const contentId = await d.getContent().getAttribute('id');
+
+    await expect(d.getTrigger()).toHaveAttribute('aria-controls', `${contentId}`);
+  });
+});

apps/website/src/routes/docs/headless/collapsible/snippets/building-blocks.tsx

@@ -41,19 +41,6 @@ export const Collapsible = component$((props: CollapsibleProps) => {
       );
     }
 
-    const { padding, border } = window.getComputedStyle(contentRef.value);
-
-    // the animation breaks when padding is set, because the height is not initially 0.
-    if (padding !== '0px') {
-      contentRef.value.style.padding = '0';
-      contentChildRef.value.style.padding = padding;
-    }
-
-    if (!border.includes('0px')) {
-      contentRef.value.style.borderWidth = '0';
-      contentChildRef.value.style.border = border;
-    }
-
     if (contentHeightSig.value === null) {
       contentHeightSig.value = getHiddenHeight(contentRef.value);
     }