Merge branch 'main' into dynamic-fonts

Author: maiieul

.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/components/mdx-components/index.tsx

@@ -25,6 +25,13 @@ export const components: Record<string, Component> = {
       </p>
     );
   }),
+  a: component$<PropsOf<'a'>>(({ ...props }) => {
+    return (
+      <a {...props} class={[cn('text-primary', props.class)]}>
+        <Slot />
+      </a>
+    );
+  }),
   h1: component$<PropsOf<'h1'>>(({ ...props }) => {
     return (
       <h1

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

@@ -104,7 +104,7 @@ Custom signal binds are like a remote control for components, controlling states
 
 ## The Top Layer
 
-<image src={testImage} class="rounded-base mb-6" />
+<image src={testImage} class="mb-6 rounded-base" />
 
 In Chrome and Edge, a `top layer` UI button is shown in the dev tools. This means the element content is placed above any other content on the page, preventing any overflow or style issues.
 
@@ -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;
+  }
+}

apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx

@@ -9,7 +9,25 @@ title: 'Qwik UI | Styled Kit - Installation'
 Simply run the following command:
 
 ```zsh
-npx qwik-ui init
+pnpm dlx qwik-ui init
+```
+
+(or "**npx qwik-ui init**" if you prefer npm)
+
+This will help you install tailwind, create a `qwik-ui.config.json` file and modify your root/global css and tailwind config files with the necessary Qwik UI design system variables and values ([see below](#manual-installation))
+
+### Generating components using the CLI
+
+When you want to add a component you can run:
+
+```zsh
+pnpm qwik-ui add
+```
+
+Or if you know a specific component you want to add, let's say "`input`", you can run:
+
+```zsh
+pnpm qwik-ui add input
 ```
 
 ## Manual installation

apps/website/src/routes/[email protected]

@@ -40,15 +40,13 @@ export default component$(() => {
   return (
     <div class="flex flex-col items-center gap-8 py-24">
       <h1 class="text-center text-4xl leading-normal lg:text-5xl">
-        <span class="text-outlined font-extrabold tracking-wide text-primary">Qwik</span>{' '}
+        <span class="font-extrabold tracking-wide text-primary">Qwik</span>{' '}
         <span class="font-extrabold tracking-wide text-secondary">UI</span>
       </h1>
       <h2 class="text-center text-xl font-bold leading-normal lg:text-3xl">
         Headless & styled copy-paste components
         <br />
-        <span class="text-outlined leading-normal text-primary">
-          automatically optimized for you
-        </span>
+        <span class="leading-normal text-primary">automatically optimized for you</span>
       </h2>
       <p class="text-center text-lg lg:text-xl">
         Choose a kit and start building the future{' '}

cla-signs/v1/cla.json

@@ -423,6 +423,14 @@
       "created_at": "2024-03-24T20:05:54Z",
       "repoId": 545159943,
       "pullRequestNo": 665
+    },
+    {
+      "name": "siguici",
+      "id": 62618356,
+      "comment_id": 2035079637,
+      "created_at": "2024-04-03T16:37:30Z",
+      "repoId": 545159943,
+      "pullRequestNo": 675
     }
   ]
 }

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();
+  });
+});