Merge pull request #676 from thejackshelton/collapsible

tests: larger collapsible test suite

Author: thejackshelton

.changeset/eleven-bulldogs-hug.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+refactor: strip browser user agent styles relating to max-width

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

@@ -6,22 +6,28 @@ import SVG from './svg';
 export default component$(() => {
   useStyles$(styles);
   const count = useSignal<number>(0);
+  const isOpen = useSignal<boolean>(false);
 
   const handleOpenChange$ = $((open: boolean) => {
-    if (open) {
-      count.value++;
-    }
+    isOpen.value = 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>
+    <>
+      <p>
+        count: <strong> {count.value}</strong>
+      </p>
+
+      <Collapsible class="collapsible" onOpenChange$={handleOpenChange$}>
+        <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/programmatic.tsx

@@ -4,7 +4,7 @@ import styles from '../snippets/collapsible.css?inline';
 
 export default component$(() => {
   useStyles$(styles);
-  const isOpen = useSignal<boolean>(true);
+  const isOpen = useSignal<boolean>(false);
 
   return (
     <>

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

@@ -154,6 +154,20 @@ This means that if a user is navigating through the modal using the Tab key, rea
 
 > Focus locking behavior is provided by default in Qwik UI. If you encounter any use cases that require customized focus lock behavior, please [submit an issue](https://github.com/qwikifiers/qwik-ui/issues) on our GitHub repository.
 
+## Stripped Styles
+
+As a headless library, we intentionally try not to add any styles to the components.
+
+However, because Qwik UI builds on top of native solutions when they are well-supported, feasible, and performant, some of the widgets may inclue browser user-agent styles.
+
+These styles can be unintuitive tricky to debug. Which has been the case with Qwik UI's own docs site. As a result, we have stripped these styles from the Modal component.
+
+<CodeSnippet name="stripped-styles.css" />
+
+While in most cases, this would be up to a consumer's CSS reset to solve, in this case we are **stripping** the max-width and max-height styles on the dialog element under the hood.
+
+This is done in a separate layer so that styles are easily overridable in consumer facing applications.
+
 ## Animations
 
 Animating things to display none has historically been a significant challenge on the web. This is because display none is a `discrete` property, and is **unanimatable**.

apps/website/src/routes/docs/headless/modal/snippets/stripped-styles.css

@@ -0,0 +1,9 @@
+@layer qwik-ui {
+  /* browsers automatically set an interesting max-width and max-height for dialogs 
+      https://twitter.com/t3dotgg/status/1774350919133691936
+  */
+  dialog:modal {
+    max-width: unset;
+    max-height: unset;
+  }
+}

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

@@ -12,7 +12,7 @@ async function setup(page: Page, exampleName: string) {
 }
 
 test.describe('Mouse Behavior', () => {
-  test(`GIVEN a hero collapsible
+  test(`GIVEN a collapsible
         WHEN clicking on the trigger
         THEN the content should be visible
         AND aria-expanded is true`, async ({ page }) => {
@@ -24,13 +24,11 @@ test.describe('Mouse Behavior', () => {
     await expect(d.getTrigger()).toHaveAttribute('aria-expanded', 'true');
   });
 
-  test(`GIVEN an open hero collapsible
+  test(`GIVEN an open 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');
-
+    const { driver: d } = await setup(page, 'open');
     await d.getTrigger().click();
 
     await expect(d.getContent()).toBeHidden();
@@ -55,9 +53,7 @@ test.describe('Keyboard Behavior', () => {
         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');
-
+    const { driver: d } = await setup(page, 'open');
     await d.getTrigger().press('Space');
 
     await expect(d.getContent()).toBeHidden();
@@ -80,9 +76,7 @@ test.describe('Keyboard Behavior', () => {
         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');
-
+    const { driver: d } = await setup(page, 'open');
     await d.getTrigger().press('Enter');
 
     await expect(d.getContent()).toBeHidden();
@@ -111,7 +105,6 @@ test.describe('Animations', () => {
         THEN the content should open`, async ({ page }) => {
     const { driver: d } = await setup(page, 'animation');
 
-    await d.getTrigger().focus();
     await d.getTrigger().click();
     await d.waitForAnimationEnd('[data-collapsible-content]');
     await expect(d.getContent()).toBeVisible();
@@ -123,11 +116,76 @@ test.describe('Animations', () => {
     const { driver: d } = await setup(page, 'animation');
     await d.openCollapsible('click');
 
-    await d.getTrigger().focus();
     await d.getTrigger().click();
     await d.waitForAnimationEnd('[data-collapsible-content]');
     await expect(d.getContent()).toBeHidden();
   });
 });
 
-test.describe('Content resizing', () => {});
+test.describe('Reactive values', () => {
+  test(`GIVEN a collapsible with a bind:open prop
+        WHEN the signal value changes to true
+        THEN the content should be visible
+  `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'programmatic');
+
+    // our example uses bind:checked on the checkbox with our same signal.
+
+    await d.locator.getByRole('checkbox').check();
+    await expect(d.getContent()).toBeVisible();
+  });
+
+  test(`GIVEN a collapsible with a bind:open prop
+        WHEN the signal value changes to false
+        THEN the content should be hidden
+  `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'programmatic');
+
+    await d.locator.getByRole('checkbox').uncheck();
+    await expect(d.getContent()).toBeHidden();
+  });
+});
+
+test.describe('Handlers', () => {
+  test(`GIVEN a collapsible with an onOpenChange$ prop
+        WHEN the content is opened
+        THEN the handler should be called
+  `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'open-change');
+
+    const countText = d.locator.getByRole('paragraph');
+    await expect(countText).toHaveText('count: 0');
+    await d.openCollapsible('click');
+
+    await expect(countText).toHaveText('count: 1');
+  });
+
+  test(`GIVEN a collapsible with an onOpenChange$ prop
+        WHEN the content is closed
+        THEN the handler should be called
+  `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'open-change');
+
+    const countText = d.locator.getByRole('paragraph');
+    await d.openCollapsible('click');
+    await expect(countText).toHaveText('count: 1');
+    await d.getTrigger().click();
+
+    await expect(countText).toHaveText('count: 2');
+  });
+});
+
+test.describe('Disabled', () => {
+  test(`GIVEN a collapsible with a disabled prop
+        WHEN the trigger is clicked
+        THEN the content should remain closed
+  `, async ({ page }) => {
+    const { driver: d } = await setup(page, 'disabled');
+
+    await expect(d.getTrigger()).toBeDisabled();
+
+    // actionability checks are only for enabled elements
+    await d.getTrigger().click({ force: true });
+    await expect(d.getContent()).toBeHidden();
+  });
+});

packages/kit-headless/src/components/modal/modal.css

@@ -1,4 +1,9 @@
-dialog {
-  animation: placeholder 0s;
-  transition: placeholder 0s;
+@layer qwik-ui {
+  /* browsers automatically set an interesting max-width and max-height for dialogs 
+    https://twitter.com/t3dotgg/status/1774350919133691936
+  */
+  dialog:modal {
+    max-width: unset;
+    max-height: unset;
+  }
 }