Merge pull request #734 from thejackshelton/prepare-0.4

New Modal API Changes

Author: thejackshelton

.changeset/few-keys-argue.md

@@ -0,0 +1,45 @@
+---
+'@qwik-ui/headless': minor
+---
+
+### Modal API Changes
+
+In a previous release, the following components have been deprecated:
+
+- ModalHeader
+- ModalContent
+- ModalFooter
+
+These components were native header, div, and footer elements and did nothing special under the hood. We are deprecating them in order to simplify the API and make it more consistent with the rest of the components.
+
+The new components are:
+
+#### <Modal.Root>
+
+This is the main container of the modal, and now holds the major props and configuration. Examples include:
+
+- 'bind:show'?: Signal<boolean>;
+- closeOnBackdropClick?: boolean;
+- alert?: boolean;
+- onShow$?: QRL<() => void>;
+- onClose$?: QRL<() => void>;
+
+#### <Modal.Panel>
+
+Previously `<Modal />` the modal panel is the dialog element that is rendered on top of the page. Its props have since been moved to the `<Modal.Root />` component, please refer to the docs for more information.
+
+#### <Modal.Trigger>
+
+The modal now comes with a default trigger, which will open the modal when clicked.
+
+#### <Modal.Title>
+
+This computes the accessible name from the string children of the modal.
+
+### <Modal.Description>
+
+This computes the accessible description from the string children of the modal.
+
+### <Modal.Close>
+
+This is a button that closes the modal when clicked.

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

@@ -15,7 +15,7 @@ export default component$(() => {
   const { theme } = useTheme();
 
   return (
-    <>
+    <Modal.Root bind:show={showSig}>
       <Button
         onClick$={() => {
           cssThemeOutput.value = extractThemeCSS(
@@ -29,10 +29,7 @@ export default component$(() => {
       >
         Copy code
       </Button>
-      <Modal.Root
-        bind:show={showSig}
-        class="my-animation h-[650px] 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"
-      >
+      <Modal.Panel class="my-animation h-[650px] 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">
         <header>
           <h2 class="mb-2 text-lg font-bold">Copy config</h2>
           <p class="mb-6">
@@ -46,7 +43,7 @@ export default component$(() => {
         <button onClick$={() => (showSig.value = false)} class="absolute right-6 top-7">
           <LuX class="h-8 w-8" />
         </button>
-      </Modal.Root>
-    </>
+      </Modal.Panel>
+    </Modal.Root>
   );
 });

apps/website/src/components/header/header.tsx

@@ -21,7 +21,6 @@ import { SunIcon } from '../icons/SunIcon';
 import { LogoIcon, LogoWithBorders } from '../icons/logo';
 
 import { useTheme } from 'qwik-themes';
-import MakeItYours from '../make-it-yours/make-it-yours';
 import { Modal } from '@qwik-ui/headless';
 import { useAppState } from '~/_state/use-app-state';
 import { LuX } from '@qwikest/icons/lucide';
@@ -30,6 +29,7 @@ import { useKitMenuItems } from '~/routes/layout';
 import { cn } from '@qwik-ui/utils';
 import { DiscordIcon } from '../icons/discord';
 import { Button, buttonVariants } from '@qwik-ui/styled';
+import MakeItYours from '../make-it-yours/make-it-yours';
 
 export interface HeaderProps {
   showVersion?: boolean;
@@ -129,82 +129,75 @@ export default component$(({ showVersion = false }: HeaderProps) => {
   const { theme } = useTheme();
 
   return (
-    <>
-      <div
-        class={cn(
-          'sticky top-0 z-10 flex h-16 justify-center border-b bg-background',
-          theme?.includes('brutalist') && 'border-b-2',
-        )}
-      >
-        <header class="flex w-full max-w-screen-2xl items-center justify-between">
-          <section class="flex items-center justify-start">
-            <a href="/" aria-label="Qwik UI Logo" class="ml-4">
-              <LogoWithBorders class="hidden sm:block" />
-              <LogoIcon class="block sm:hidden" />
-            </a>
-            {showVersion && (
-              <div class="ml-4 hidden text-xs md:flex">
-                {kitSignal.value?.name &&
-                  kitSignal.value?.name + ' ' + kitSignal.value?.version}
-              </div>
-            )}
-          </section>
-
-          <div class="mr-4 flex items-center">
-            <div class="mr-6 hidden items-center space-x-8 text-sm lg:flex">
-              <a
-                class={isDocsActive('/docs/headless/')}
-                href="/docs/headless/introduction/"
-              >
-                Headless
-              </a>
-              {rootStore.featureFlags?.showStyled && (
-                <a
-                  class={isDocsActive('/docs/styled/')}
-                  href="/docs/styled/introduction/"
-                >
-                  Styled
-                </a>
-              )}
+    <Modal.Root
+      class={cn(
+        'sticky top-0 z-10 flex h-16 justify-center border-b bg-background',
+        theme?.includes('brutalist') && 'border-b-2',
+      )}
+      bind:show={isSidebarOpenedSig}
+    >
+      <header class="flex w-full max-w-screen-2xl items-center justify-between">
+        <section class="flex items-center justify-start">
+          <a href="/" aria-label="Qwik UI Logo" class="ml-4">
+            <LogoWithBorders class="hidden sm:block" />
+            <LogoIcon class="block sm:hidden" />
+          </a>
+          {showVersion && (
+            <div class="ml-4 hidden text-xs md:flex">
+              {kitSignal.value?.name &&
+                kitSignal.value?.name + ' ' + kitSignal.value?.version}
             </div>
-            <div class="flex items-center space-x-1 xs:space-x-4">
-              <MakeItYours />
-              <a
-                href="https://discord.gg/PVWUUejrez"
-                target="_blank"
-                class={cn(buttonVariants({ size: 'icon', look: 'ghost' }))}
-              >
-                <DiscordIcon />
-              </a>
-              <a
-                target="_blank"
-                href="https://github.com/qwikifiers/qwik-ui"
-                aria-label="Qwik-UI GitHub repository"
-                class={cn(buttonVariants({ size: 'icon', look: 'ghost' }))}
-              >
-                <GitHubIcon />
+          )}
+        </section>
+
+        <div class="mr-4 flex items-center">
+          <div class="mr-6 hidden items-center space-x-8 text-sm lg:flex">
+            <a
+              class={isDocsActive('/docs/headless/')}
+              href="/docs/headless/introduction/"
+            >
+              Headless
+            </a>
+            {rootStore.featureFlags?.showStyled && (
+              <a class={isDocsActive('/docs/styled/')} href="/docs/styled/introduction/">
+                Styled
               </a>
-              <DarkModeToggle />
-              <Button
-                type="button"
-                aria-label="Toggle navigation"
-                onClick$={() => {
-                  isSidebarOpenedSig.value = !isSidebarOpenedSig.value;
-                }}
-                size="icon"
-                look="ghost"
-                class="flex lg:hidden"
-              >
-                {isSidebarOpenedSig.value ? <CloseIcon /> : <MenuIcon />}
-              </Button>
-            </div>
+            )}
           </div>
-        </header>
-      </div>
-      <Modal.Root
-        bind:show={isSidebarOpenedSig}
-        class="sidebar-mobile ml-auto mr-0 h-screen w-full min-w-80 max-w-sm rounded-base border-0 bg-background p-8 text-foreground shadow-md"
-      >
+          <div class="flex items-center space-x-1 xs:space-x-4">
+            <MakeItYours />
+            <a
+              href="https://discord.gg/PVWUUejrez"
+              target="_blank"
+              class={cn(buttonVariants({ size: 'icon', look: 'ghost' }))}
+            >
+              <DiscordIcon />
+            </a>
+            <a
+              target="_blank"
+              href="https://github.com/qwikifiers/qwik-ui"
+              aria-label="Qwik-UI GitHub repository"
+              class={cn(buttonVariants({ size: 'icon', look: 'ghost' }))}
+            >
+              <GitHubIcon />
+            </a>
+            <DarkModeToggle />
+            <Button
+              type="button"
+              aria-label="Toggle navigation"
+              onClick$={() => {
+                isSidebarOpenedSig.value = !isSidebarOpenedSig.value;
+              }}
+              size="icon"
+              look="ghost"
+              class="flex lg:hidden"
+            >
+              {isSidebarOpenedSig.value ? <CloseIcon /> : <MenuIcon />}
+            </Button>
+          </div>
+        </div>
+      </header>
+      <Modal.Panel class="sidebar-mobile ml-auto mr-0 h-screen w-full min-w-80 max-w-sm rounded-base border-0 bg-background p-8 text-foreground shadow-md">
         <div class="mb-2 pb-4 pt-2">
           <DocsNavigation
             linksGroups={
@@ -220,8 +213,8 @@ export default component$(({ showVersion = false }: HeaderProps) => {
         >
           <LuX class="h-8 w-8" />
         </button>
-      </Modal.Root>
-    </>
+      </Modal.Panel>
+    </Modal.Root>
   );
 });
 

apps/website/src/components/make-it-yours/make-it-yours.tsx

@@ -132,7 +132,7 @@ export default component$<PropsOf<typeof Button>>(() => {
     return [font, mode, style, baseColor, primaryColor, borderRadius].join(' ');
   });
   return (
-    <div>
+    <Modal.Root closeOnBackdropClick={false} bind:show={showSig}>
       <Button
         size="sm"
         look="outline"
@@ -144,11 +144,7 @@ export default component$<PropsOf<typeof Button>>(() => {
         <LuSlidersHorizontal class={cn('h-4 w-4 sm:mr-3')} />
         <span class={cn('hidden', 'sm:block')}>Make it yours</span>
       </Button>
-      <Modal.Root
-        closeOnBackdropClick={false}
-        bind:show={showSig}
-        class="make-it-yours fixed bottom-[50%] right-0  top-[50%] mr-0 h-screen max-w-sm rounded-l-base border-y border-l bg-background px-4 py-8 text-foreground shadow-md sm:w-full"
-      >
+      <Modal.Panel class="make-it-yours fixed bottom-[50%] right-0  top-[50%] mr-0 h-screen max-w-sm rounded-l-base border-y border-l bg-background px-4 py-8 text-foreground shadow-md sm:w-full">
         <header class="flex w-full">
           <h2 class="justify-self-start text-lg font-bold">Edit Profile</h2>
         </header>
@@ -557,7 +553,7 @@ export default component$<PropsOf<typeof Button>>(() => {
         <button onClick$={() => (showSig.value = false)} class="absolute right-4 top-5">
           <LuX class="h-8 w-8" />
         </button>
-      </Modal.Root>
-    </div>
+      </Modal.Panel>
+    </Modal.Root>
   );
 });

apps/website/src/components/showcase/showcase.tsx

@@ -36,10 +36,10 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
           selectedClassName="bg-primary hover:bg-primary text-primary-foreground hover:text-primary-foreground border-t-1 font-medium "
         >
           <Tabs.List class="flex rounded-t-lg border border-b-0 bg-accent">
-            <Tabs.Tab class="rounded-tl-md px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
+            <Tabs.Tab class="h-[44px] rounded-tl-md px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
               Preview
             </Tabs.Tab>
-            <Tabs.Tab class="px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
+            <Tabs.Tab class="h-[44px] px-3 py-2 hover:bg-primary/90 hover:text-primary-foreground">
               Code
             </Tabs.Tab>
           </Tabs.List>

apps/website/src/global.css

@@ -1294,6 +1294,10 @@
   .dark .note-link a {
     border-bottom: 1px solid white !important;
   }
+
+  .gif-container {
+    border-radius: var(--border-radius);
+  }
 }
 
 :root {

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

@@ -1,62 +1,29 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Accordion } from '@qwik-ui/headless';
-import SVG from './svg';
+import { LuChevronDown } from '@qwikest/icons/lucide';
 
 export default component$(() => {
+  useStyles$(styles);
+  const items = [1, 2, 3];
+
   return (
-    <>
-      <div class="flex w-full justify-center">
-        <Accordion.Root class="w-full" animated enhance={true}>
-          <Accordion.Item class="border-b">
-            <Accordion.Header as="h3">
-              <Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
-                <span>Can I add headings inside the accordion?</span>
-                <span class="pl-2">
-                  <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
-                </span>
-              </Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content class="accordion-animation-1 overflow-hidden">
-              <p class="pb-4">
-                Yes, if you wrap the <strong>Accordion.Header</strong> component around
-                the trigger, screen readers will announce it properly.
-              </p>
-            </Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item class="border-b">
-            <Accordion.Header as="h3">
-              <Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
-                <span>Is it easy to animate?</span>
-                <span class="pl-2">
-                  <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
-                </span>
-              </Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content class="accordion-animation-1 overflow-hidden">
-              <p class="pb-4">
-                Yup! You can even use animations or CSS transitions using the{' '}
-                <strong>animated</strong> prop on the accordion root!
-              </p>
-            </Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item class="border-b">
-            <Accordion.Header as="h3">
-              <Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
-                <span>How about opening multiple items?</span>
-                <span class="pl-2">
-                  <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
-                </span>
-              </Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content class="accordion-animation-1 overflow-hidden">
-              <p class="pb-4">
-                You can do that by setting the <strong>behavior</strong> prop to "multi"
-                on the Accordion
-              </p>
-            </Accordion.Content>
-          </Accordion.Item>
-        </Accordion.Root>
-      </div>
-    </>
+    <Accordion.Root>
+      {items.map((item) => (
+        <Accordion.Item class="accordion-item" key={item}>
+          <Accordion.Header>
+            <Accordion.Trigger class="accordion-trigger">
+              <span>Trigger {item}</span>
+              <LuChevronDown />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content class="accordion-content">
+            Inside Content {item}
+          </Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
   );
 });
+
+// interal
+import styles from '../snippets/accordion.css?inline';