feat(modal): hero example changed, fixed copy button and border radius issue, semantic markup

Author: thejackshelton

apps/website/src/routes/docs/_components/highlight/highlight.tsx

@@ -50,12 +50,18 @@ export const Highlight = component$(
  <div
  {...props}
  class={[
- 'tab-size relative max-w-full overflow-hidden overflow-x-auto rounded-xl bg-slate-50 p-12 text-sm dark:bg-slate-800',
+ 'tab-size relative max-w-full overflow-hidden overflow-x-auto rounded-b-xl bg-slate-50 p-12 text-sm dark:bg-slate-800',
  props.class,
  ]}
  >
  <div dangerouslySetInnerHTML={codeSig.value} />
- <CodeCopy class={['absolute right-2 top-2', copyCodeClass]} code={code} />
+ <CodeCopy
+ class={[
+ 'absolute right-2 top-2 bg-slate-200 text-slate-950 hover:bg-slate-300 dark:bg-slate-700 dark:text-white dark:hover:bg-slate-600',
+ copyCodeClass,
+ ]}
+ code={code}
+ />
  </div>
  );
  },

apps/website/src/routes/docs/headless/(components)/modal/examples.tsx

@@ -27,7 +27,7 @@ export const ShowExample = component$(({ example }: ShowExampleProps) => {
  const { component, code, cssClasses = '' } = examples[example];
  return (
  <PreviewCodeExampleTabs code={code}>
- <div q:slot="actualComponent" class={['tabs-example mr-auto', cssClasses]}>
+ <div q:slot="actualComponent" class={['tabs-example mx-auto', cssClasses]}>
  {component}
  </div>
  </PreviewCodeExampleTabs>

apps/website/src/routes/docs/headless/(components)/modal/examples/first-example.tsx

@@ -1,45 +1,78 @@
-import { component$, useSignal } from '@builder.io/qwik';
+import { QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
 import {
  Modal,
+ ModalPopup,
  ModalContent,
  ModalFooter,
  ModalHeader,
- ModalPortal,
  ModalTrigger,
+ ModalClose,
 } from '@qwik-ui/headless';
 
 export default component$(() => {
  const showSignal = useSignal(false);
 
  return (
  <Modal bind:show={showSignal}>
- <ModalTrigger>
- <button class="p-1 focus:shadow-[0_0_0_2px] focus:shadow-[var(--qwik-light-blue)] focus:outline-none">
- Open Modal
- </button>
+ <ModalTrigger class="rounded-md border-2 border-slate-300 bg-slate-700 px-3 py-2 text-white">
+ Open Modal
  </ModalTrigger>
- <ModalPortal class="rounded-md p-4 shadow-md">
- <ModalHeader>
- <h2 class="text:md font-bold">Are your sure?</h2>
+ <ModalPopup class="shadow-dark-medium max-w-[25rem] rounded-md bg-white p-[28px] text-slate-950">
+ <ModalHeader class="relative">
+ <h2 class="mb-2 text-lg font-bold">Edit Profile</h2>
+ <p class="leading-5">
+ You can update your profile here. Hit the save button when finished.
+ </p>
  </ModalHeader>
- <ModalContent class="pb-4 pt-4">
- <p>Yes, I want to remove my account.</p>
+ <ModalContent class="mb-2 py-4">
+ <fieldset class="mb-1 flex items-baseline justify-between">
+ <label for="name">Name</label>
+ <input
+ class="mt-2 rounded-sm px-4 py-[10px] text-white"
+ id="name"
+ type="text"
+ placeholder="John Doe"
+ />
+ </fieldset>
+ <fieldset class="flex items-baseline justify-between">
+ <label for="email">Email</label>
+ <input
+ class="mt-2 rounded-sm px-4 py-3 text-white"
+ id="email"
+ type="text"
+ placeholder="johndoe@gmail.com"
+ />
+ </fieldset>
  </ModalContent>
  <ModalFooter class="flex justify-end gap-4">
  <button
- class="rounded-sm border border-[var(--qwik-light-blue)] p-2 text-[var(--qwik-light-blue)]"
+ class="rounded-sm border border-none bg-slate-200 px-4 py-[10px] text-slate-600 outline-none focus-visible:outline-slate-700"
  onClick$={() => (showSignal.value = false)}
  >
- No
+ Cancel
  </button>
  <button
- class="rounded-sm bg-[var(--qwik-light-blue)] p-2"
+ class="rounded-sm border border-none bg-green-200 px-4 py-[10px] text-green-900 outline-none focus-visible:outline-green-700"
  onClick$={() => (showSignal.value = false)}
  >
- Yes
+ Save Changes
  </button>
  </ModalFooter>
- </ModalPortal>
+ <ModalClose class="absolute right-6 top-6">
+ <CloseIcon class="h-8 w-8" />
+ </ModalClose>
+ </ModalPopup>
  </Modal>
  );
 });
+
+export function CloseIcon(props: QwikIntrinsicElements['svg'], key: string) {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} key={key}>
+ <path
+ fill="020617"
+ 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/(components)/modal/index.mdx

@@ -16,12 +16,20 @@ import {
 
 # Modal
 
-#### A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. ([Definition comes from Radix-UI](https://www.radix-ui.com/docs/primitives/components/dialog))
-
-{' '}
+A window overlaid on either the primary window or another dialog window. Modal content is placed in the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer), rendering the underneath content as [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) meaning non-interactive.
 
 <ShowExample example="first"/>
 
+Modals are used when an important choice needs to be made in the application. The rest of the content isn't interactive until a certain action has been performed. 
+
+> For non-modal UI elements, it is preferred to use [Qwik UI's popover component](../../../docs/headless/popover/) *(in progress)*. In the near future, Qwik's popover component can be applied to the most-semantically-relevant HTML element, including the `<dialog>` element itself.
+
+##### ✨ Features
+
+- Managed focus order
+- Controlled or uncontrolled
+- Controlled or uncontrolled
+
 ## Accessibility
 
 ### Keyboard interaction

packages/kit-headless/src/components/modal/index.ts

@@ -2,7 +2,7 @@ export * from './modal-close';
 export * from './modal-content';
 export * from './modal-footer';
 export * from './modal-header';
-export * from './modal-portal';
+export * from './modal-popup';
 export * from './modal';
 export * from './modal-trigger';
 export * from './types';

packages/kit-headless/src/components/modal/modal-close.tsx

@@ -1,19 +1,14 @@
-import { $, Slot, component$, useContext, useOn } from '@builder.io/qwik';
+import { QwikIntrinsicElements, Slot, component$, useContext } from '@builder.io/qwik';
 import { modalContextId } from './modal-context-id';
 
-export const ModalClose = component$(() => {
- const modalContext = useContext(modalContextId);
+type ModalCloseProps = QwikIntrinsicElements['button'];
 
- useOn(
- 'click',
- $(function closeModal() {
- modalContext.showSig.value = false;
- }),
- );
+export const ModalClose = component$((props: ModalCloseProps) => {
+ const modalContext = useContext(modalContextId);
 
  return (
- <div>
+ <button onClick$={() => (modalContext.showSig.value = false)} {...props}>
  <Slot />
- </div>
+ </button>
  );
 });

packages/kit-headless/src/components/modal/modal-header.tsx

@@ -1,8 +1,8 @@
-import { Slot, component$ } from '@builder.io/qwik';
+import { QwikIntrinsicElements, Slot, component$ } from '@builder.io/qwik';
 
-export const ModalHeader = component$(() => {
+export const ModalHeader = component$((props: QwikIntrinsicElements['header']) => {
  return (
- <header>
+ <header {...props}>
  <Slot />
  </header>
  );

packages/kit-headless/src/components/modal/modal-portal.tsx renamed to packages/kit-headless/src/components/modal/modal-popup.tsx

@@ -12,7 +12,7 @@ import {
 import { FocusTrap, createFocusTrap } from 'focus-trap';
 import { modalContextId } from './modal-context-id';
 
-export const ModalPortal = component$(
+export const ModalPopup = component$(
  (props: Omit<QwikIntrinsicElements['dialog'], 'open'>) => {
  const modalContext = useContext(modalContextId);
  const refSig = useSignal<HTMLDialogElement>();

packages/kit-headless/src/components/modal/modal-trigger.tsx

@@ -1,19 +1,14 @@
-import { $, Slot, component$, useContext, useOn } from '@builder.io/qwik';
+import { QwikIntrinsicElements, Slot, component$, useContext } from '@builder.io/qwik';
 import { modalContextId } from './modal-context-id';
 
-export const ModalTrigger = component$(() => {
- const modalContext = useContext(modalContextId);
+export type ModalTriggerProps = QwikIntrinsicElements['button'];
 
- useOn(
- 'click',
- $(function openModal() {
- modalContext.showSig.value = true;
- }),
- );
+export const ModalTrigger = component$((props: ModalTriggerProps) => {
+ const modalContext = useContext(modalContextId);
 
  return (
- <div>
+ <button onClick$={() => (modalContext.showSig.value = true)} {...props}>
  <Slot />
- </div>
+ </button>
  );
 });

packages/kit-headless/src/components/modal/modal.spec.tsx

@@ -4,7 +4,7 @@ import { ModalClose } from './modal-close';
 import { ModalContent } from './modal-content';
 import { ModalFooter } from './modal-footer';
 import { ModalHeader } from './modal-header';
-import { ModalPortal } from './modal-portal';
+import { ModalPopup } from './modal-popup';
 import { ModalTrigger } from './modal-trigger';
 
 /**
@@ -17,7 +17,7 @@ const Sut = component$(() => {
  <ModalTrigger>
  <button data-test="modal-trigger">Open Modal</button>
  </ModalTrigger>
- <ModalPortal>
+ <ModalPopup>
  <ModalHeader>
  <h2 data-test="modal-header">Hello 👋</h2>
  </ModalHeader>
@@ -27,7 +27,7 @@ const Sut = component$(() => {
  <button data-test="modal-close-button">Close Modal</button>
  </ModalClose>
  </ModalFooter>
- </ModalPortal>
+ </ModalPopup>
  </Modal>
  );
 });