Merge pull request #702 from thejackshelton/feat/modal

Refactor: Modal

Author: thejackshelton

.changeset/eight-spiders-brake.md

@@ -0,0 +1,60 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: modal does not close unless the dialog backdrop is clicked (including dangling content)
+
+fix: polyfilled popovers render correctly inside of modals.
+
+fix: nested modals will now close the current modal when the backdrop is clicked.
+
+fix: nested modals will now close the current modal when the escape key is pressed.
+
+fix: select does not execute code until interaction (including core).
+
+tests: larger test suite for modals.
+
+deprecated: `ModalHeader`, `ModalContent`, `ModalFooter` have been deprecated, as they do not pose significant a11y advantages.
+
+feat: Two new Modal component pieces. `ModalTitle` and `ModalDescription`. These help give our modal an accessible name and supporting description (optional).
+
+feat: Modal now uses the following CSS as a default inside of an @layer
+
+```css
+@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;
+  }
+}
+```
+
+The default browser styles:
+
+![alt text](image.png)
+
+Make it difficult to style a dialog element full-screen, which has led to some confusion recently both in this repo and across the web. The above change strips the responsible browser styles from the dialog eleemnt (which is used by Qwik UI's modal component).
+
+> For more info, feel free to check out the link in the code snippet above.
+
+> Note: In the future, we intend to use the dot notation for the `Modal` component.
+
+> Note: In the future, we intend to change the modal API to include a trigger. The proposed API is as follows:
+
+### Syntax Proposal
+
+```tsx
+<Modal.Root>
+  <Modal.Trigger>Trigger</Modal.Trigger>
+  <Modal.Panel>
+    {/*  This is the current <Modal /> */}
+    <Modal.Title>Edit Profile</Modal.Title>
+    <Modal.Description>You can update your profile here.</Modal.Description>
+  </Modal.Panel>
+</Modal.Root>
+```
+
+Let us know your thoughts on this potential API change in the Qwik UI discord!

.changeset/image.png

@@ -0,0 +1,7 @@
+---
+'@qwik-ui/headless': patch
+---
+
+feat: deprecate `modal-showing` and `modal-closing` classes in favor of `data-open`, `data-closing`, and `data-closed` data attributes.
+
+> These classes will still work at the moment, but will be removed in a near future release.

.changeset/mighty-snails-exist.md

@@ -46,7 +46,7 @@ export const DocsNavigation = component$(
     const location = useLocation();
 
     return (
-      <nav {...props} class={cn('flex-col gap-4 pb-6', props.class)}>
+      <nav {...props} class={cn('navigation-docs flex-col gap-4 pb-6', props.class)}>
         {linksGroups?.map((group) => {
           return (
             <div class="px-6 pt-8" key={group.name}>

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -1240,11 +1240,19 @@
 
   *::-webkit-scrollbar-thumb {
     /* Thumb color */
-    background-color: var(--qwikui-slate-500);
+    background-color: hsla(var(--foreground) / 0.25);
     border-radius: 0.5rem;
     background-clip: padding-box;
-    border-left: 0.3rem solid transparent;
-    border-right: 0.3rem solid transparent;
+    border-left: 0.15rem solid transparent;
+    border-right: 0.15rem solid transparent;
+  }
+
+  .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.1);
+  }
+
+  .dark .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.2);
   }
 
   *::-webkit-scrollbar-corner {
@@ -1256,10 +1264,6 @@
     border-left: 1px solid var(--qwikui-slate-300);
   }
 
-  .dark *::-webkit-scrollbar-thumb {
-    background-color: var(--qwikui-slate-500);
-  }
-
   .dark *::-webkit-scrollbar-track {
     background: transparent;
     border-left: 1px solid var(--qwikui-slate-800);
@@ -1272,7 +1276,7 @@
   }
 
   .code-example *::-webkit-scrollbar-thumb {
-    background: var(--qwikui-slate-500);
+    background-color: var(--qwikui-slate-600);
     border-radius: 0.5rem;
     background-clip: padding-box;
   }

apps/website/src/global.css

@@ -1,60 +1,27 @@
-import { PropsOf, component$, useSignal } from '@builder.io/qwik';
-import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
+import { component$, useSignal } from '@builder.io/qwik';
+import { Modal, ModalTitle, ModalDescription } from '@qwik-ui/headless';
 
 export default component$(() => {
   const showSig = useSignal(false);
 
   return (
     <>
-      <button
-        onClick$={() => (showSig.value = true)}
-        class="rounded-base border px-3 py-2 hover:bg-accent/80"
-      >
+      <button class="modal-trigger" onClick$={() => (showSig.value = true)}>
         Deactivate
       </button>
-      <Modal
-        alert
-        bind:show={showSig}
-        class="max-w-[25rem] rounded-base bg-background p-[28px] text-foreground shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
-      >
-        <ModalHeader>
-          <h2 class="mb-2 text-lg font-bold">Deactive Account</h2>
-        </ModalHeader>
-        <ModalContent class="mb-2 pb-4 pt-2">
-          <p class="leading-5">Are you sure you want to deactivate your account?</p>
-        </ModalContent>
-        <ModalFooter class="flex justify-end gap-4">
-          <button
-            class="rounded-base border border-none bg-muted px-4 py-[10px] text-muted-foreground outline-none ring-offset-background transition-colors hover:bg-accent/90 hover:text-accent-foreground focus:ring focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-            onClick$={() => (showSig.value = false)}
-          >
-            Cancel
-          </button>
-          <button
-            class="bg-destructive focus:ring-destructive text-destructive-foreground focus-visible:destructive-foreground/90 rounded-base border border-none px-4 py-[10px] outline-none focus:ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-            onClick$={() => (showSig.value = false)}
-          >
-            Delete
-          </button>
-        </ModalFooter>
-        <button
-          onClick$={() => (showSig.value = false)}
-          class="absolute right-6 top-[26px]"
-        >
-          <CloseIcon class="h-8 w-8" />
+      <Modal alert class="modal" bind:show={showSig}>
+        <ModalTitle>Deactive Account</ModalTitle>
+        <ModalDescription>
+          Are you sure you want to deactivate your account?
+        </ModalDescription>
+        <footer>
+          <button onClick$={() => (showSig.value = false)}>Cancel</button>
+          <button onClick$={() => (showSig.value = false)}>Delete</button>
+        </footer>
+        <button class="modal-close" onClick$={() => (showSig.value = false)}>
+          +
         </button>
       </Modal>
     </>
   );
 });
-
-export function CloseIcon(props: PropsOf<'svg'>, key: string) {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
-      <path
-        fill="currentColor"
-        d="m12 13.4l2.9 2.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275l2.9-2.9Zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z"
-      ></path>
-    </svg>
-  );
-}

apps/website/src/routes/docs/headless/modal/examples/alert-dialog.tsx

@@ -0,0 +1,34 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Modal, ModalTitle, ModalDescription, Label } from '@qwik-ui/headless';
+import styles from '../snippets/animation.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  const isOpen = useSignal(false);
+
+  return (
+    <div class="modal-container">
+      <button class="modal-trigger" onClick$={() => (isOpen.value = true)}>
+        Open Modal
+      </button>
+      <Modal class="modal modal-animation" bind:show={isOpen}>
+        <ModalTitle>Edit Profile</ModalTitle>
+        <ModalDescription>
+          You can update your profile here. Hit the save button when finished.
+        </ModalDescription>
+        <Label>
+          Name
+          <input type="text" placeholder="John Doe" />
+        </Label>
+        <Label>
+          Email
+          <input type="text" placeholder="[email protected]" />
+        </Label>
+        <footer>
+          <button onClick$={() => (isOpen.value = false)}>Cancel</button>
+          <button onClick$={() => (isOpen.value = false)}>Save Changes</button>
+        </footer>
+      </Modal>
+    </div>
+  );
+});