docs(styled modal): refactor to match new Title and Description components

Author: maiieul

apps/website/src/routes/docs/styled/modal/examples/hero.tsx

@@ -1,5 +1,7 @@
 import { component$, useSignal } from '@builder.io/qwik';
-import { Button, Input, Label, Modal } from '~/components/ui';
+import { cn } from '@qwik-ui/utils';
+import { LuX } from '@qwikest/icons/lucide';
+import { Button, Input, Label, Modal, buttonVariants } from '~/components/ui';
 
 export default component$(() => {
   const show = useSignal(false);
@@ -8,8 +10,8 @@ export default component$(() => {
     <Modal.Root bind:show={show}>
       <Modal.Trigger>Open modal</Modal.Trigger>
       <Modal.Panel>
-        <Modal.Title class="text-lg font-bold">Edit Profile</Modal.Title>
-        <Modal.Description class="text-sm font-light">
+        <Modal.Title>Edit Profile</Modal.Title>
+        <Modal.Description>
           Make changes to your profile here. Click save when you're done.
         </Modal.Description>
         <div class="grid gap-4 py-4">
@@ -32,10 +34,19 @@ export default component$(() => {
           </div>
         </div>
         <footer>
-          <Button onClick$={() => (show.value = false)} type="submit">
-            Save changes
+          <Button look="primary" onClick$={() => (show.value = false)}>
+            Save
           </Button>
         </footer>
+        <Modal.Close
+          class={cn(
+            buttonVariants({ size: 'icon', look: 'ghost' }),
+            'absolute right-3 top-2',
+          )}
+          type="submit"
+        >
+          <LuX class="h-5 w-5" />
+        </Modal.Close>
       </Modal.Panel>
     </Modal.Root>
   );

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

@@ -21,51 +21,37 @@ qwik-ui add modal
 ```
 
 ```tsx
-import {
-  PropsOf,
-  Signal,
-  Slot,
-  component$,
-  createContextId,
-  useContextProvider,
-  useSignal,
-} from '@builder.io/qwik';
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { Modal as HeadlessModal } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
-const Context = createContextId<Signal<boolean>>('modal-context');
+const Root = HeadlessModal.Root;
 
-const Root = component$<PropsOf<typeof HeadlessModal.Root>>(({ ...props }) => {
-  const showSig = useSignal(false);
-  useContextProvider(Context, showSig);
-  return (
-    <HeadlessModal.Root bind:show={showSig} {...props}>
-      <Slot />
-    </HeadlessModal.Root>
-  );
-});
+const Trigger = HeadlessModal.Trigger;
 
-const Panel = component$(() => {
+const Close = HeadlessModal.Close;
+
+const Panel = component$<PropsOf<typeof HeadlessModal.Panel>>((props) => {
   return (
-    <HeadlessModal.Panel class="max-w-sm rounded-base border border-white bg-background p-6 text-foreground shadow-md transition-all duration-300 backdrop:brightness-50 backdrop:backdrop-blur-sm backdrop:transition-all backdrop:duration-300 data-[state=open]:appear data-[state=closed]:disappear backdrop:data-[state=open]:appear backdrop:data-[state=closed]:disappear">
+    <HeadlessModal.Panel
+      {...props}
+      class={cn(
+        'max-w-sm rounded-base border bg-background p-6 text-foreground shadow-md backdrop:brightness-50 backdrop:backdrop-blur-sm',
+        'data-[closed]:duration-300 data-[open]:duration-300 data-[open]:animate-in data-[closing]:animate-out data-[closing]:fade-out data-[open]:fade-in',
+        'backdrop:data-[closed]:duration-300 backdrop:data-[open]:duration-300 backdrop:data-[open]:animate-in backdrop:data-[closing]:animate-out backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+        props.class,
+      )}
+    >
       <Slot />
     </HeadlessModal.Panel>
   );
 });
 
-const Trigger = component$<PropsOf<typeof HeadlessModal.Trigger>>(({ ...props }) => {
-  return (
-    <HeadlessModal.Trigger>
-      <Slot {...props} />
-    </HeadlessModal.Trigger>
-  );
-});
-
 const Title = component$<PropsOf<'h2'>>(({ ...props }) => {
   return (
     <HeadlessModal.Title
       {...props}
-      class={cn('flex flex-col space-y-1.5 text-center sm:text-left', props.class)}
+      class={cn('text-lg font-semibold tracking-tight', props.class)}
     >
       <Slot />
     </HeadlessModal.Title>
@@ -74,60 +60,46 @@ const Title = component$<PropsOf<'h2'>>(({ ...props }) => {
 
 const Description = component$<PropsOf<'p'>>(({ ...props }) => {
   return (
-    <HeadlessModal.Description {...props} class={cn('text-sm font-light', props.class)}>
+    <HeadlessModal.Description
+      {...props}
+      class={cn('text-sm text-muted-foreground', props.class)}
+    >
       <Slot />
     </HeadlessModal.Description>
   );
 });
 
 export const Modal = {
   Root,
-  Panel,
   Trigger,
+  Close,
+  Panel,
   Title,
   Description,
-  Context,
 };
 ```
 
 ## Usage
 
 ```tsx
-import { Button, Input, Label, Modal } from '~/components/ui';
+import { Button, Modal } from '~/components/ui';
 ```
 
 ```tsx
 <Modal.Root bind:show={show}>
   <Modal.Trigger>Open modal</Modal.Trigger>
   <Modal.Panel>
-    <Modal.Title class="text-lg font-bold">Edit Profile</Modal.Title>
-    <Modal.Description class="text-sm font-light">
-      Make changes to your profile here. Click save when you're done.
-    </Modal.Description>
-    <div class="grid gap-4 py-4">
-      <div class="grid grid-cols-4 items-center gap-4">
-        <Label for="name" class="text-right">
-          Name
-        </Label>
-        <Input name="name" id="name" defaultValue="Pedro Duarte" class="col-span-3" />
-      </div>
-      <div class="grid grid-cols-4 items-center gap-4">
-        <Label for="username" class="text-right">
-          Username
-        </Label>
-        <Input
-          name="username"
-          id="username"
-          defaultValue="@peduarte"
-          class="col-span-3"
-        />
-      </div>
-    </div>
+    <Modal.Title>Title</Modal.Title>
+    <Modal.Description>Description</Modal.Description>
+    <div>...</div>
     <footer>
-      <Button onClick$={() => (show.value = false)} type="submit">
-        Save changes
+      <Button look="primary" onClick$={() => (show.value = false)}>
+        Save
       </Button>
     </footer>
+    <Modal.Close>
+      <LuX class="h-5 w-5" />
+    </Modal.Close>
   </Modal.Panel>
 </Modal.Root>
 ```