refactor: deprecate modal footer, content, and header (not needed)

thejackshelton · thejackshelton · commit 1ba2e6b75c32 · 2024-04-12T22:27:09.000-05:00
diff --git a/apps/website/src/routes/docs/headless/modal/examples/hero.tsx b/apps/website/src/routes/docs/headless/modal/examples/hero.tsx
@@ -0,0 +1,19 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Modal } from '@qwik-ui/headless';
+import styles from '../snippets/modal.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  const isOpen = useSignal(false);
+
+  return (
+    <>
+      <button class="modal-trigger" onClick$={() => (isOpen.value = true)}>
+        Open Modal
+      </button>
+      <Modal class="modal" bind:show={isOpen}>
+        Modal Content
+      </Modal>
+    </>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/modal/examples/main.tsx b/apps/website/src/routes/docs/headless/modal/examples/main.tsx
diff --git a/apps/website/src/routes/docs/headless/modal/index.mdx b/apps/website/src/routes/docs/headless/modal/index.mdx
@@ -13,7 +13,7 @@ import {FeatureList} from '~/components/feature-list/feature-list';
 
 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) / non-interactive.
 
-<Showcase name="main" />
+<Showcase name="hero" />
 
 The modal makes use of the HTML `dialog` element, which is supported in [every major browser](https://caniuse.com/?search=dialog).
 
@@ -124,7 +124,7 @@ By default, the `dialog` element comes with a subtle backdrop, below is a snippe
 
 Styling a [backdrop in Tailwind](https://tailwindcss.com/docs/backdrop-blur) can be done using the `:backdrop` selector.
 
-<Showcase name="main" />
+<Showcase name="hero" />
 
 ## Dismissing Modals via Backdrop
 
diff --git a/apps/website/src/routes/docs/headless/modal/snippets/modal.css b/apps/website/src/routes/docs/headless/modal/snippets/modal.css
@@ -0,0 +1,16 @@
+.modal,
+.modal-trigger {
+  padding: 0.5rem;
+  border-radius: calc(var(--border-radius));
+}
+
+.modal-trigger {
+  width: 100%;
+  border: 2px dotted hsla(var(--foreground));
+  height: 44px;
+  width: fit-content;
+}
+
+.modal {
+  border: 2px dotted hsla(var(--primary));
+}
diff --git a/apps/website/src/routes/layout.tsx b/apps/website/src/routes/layout.tsx
@@ -2,7 +2,6 @@
 import { Slot, component$ } from '@builder.io/qwik';
 import { ContentMenu, useContent, useLocation } from '@builder.io/qwik-city';
 import { ComponentsStatusesMap, statusByComponent } from '~/_state/component-statuses';
-import Header from '~/components/header/header';
 import {
   DocsNavigation,
   LinkGroup,
@@ -20,7 +19,7 @@ export default component$(() => {
 
   return (
     <>
-      <Header showBottomBorder={true} showVersion={true} />
+      {/* <Header showBottomBorder={true} showVersion={true} /> */}
       <div class="flex justify-center">
         <div class="flex w-full max-w-screen-2xl justify-center lg:justify-around xl:justify-between 2xl:space-x-16">
           <DocsNavigation
diff --git a/packages/kit-headless/src/components/modal/modal-content.tsx b/packages/kit-headless/src/components/modal/modal-content.tsx
@@ -1,5 +1,8 @@
 import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ */
 export const ModalContent = component$((props: PropsOf<'div'>) => {
   return (
     <div {...props}>
diff --git a/packages/kit-headless/src/components/modal/modal-description.tsx b/packages/kit-headless/src/components/modal/modal-description.tsx
@@ -0,0 +1,3 @@
+import { component$ } from '@builder.io/qwik';
+
+export const ModalDescription = component$(() => {});
diff --git a/packages/kit-headless/src/components/modal/modal-footer.tsx b/packages/kit-headless/src/components/modal/modal-footer.tsx
@@ -1,5 +1,8 @@
 import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ */
 export const ModalFooter = component$((props: PropsOf<'footer'>) => {
   return (
     <footer {...props}>
diff --git a/packages/kit-headless/src/components/modal/modal-header.tsx b/packages/kit-headless/src/components/modal/modal-header.tsx
@@ -1,5 +1,8 @@
 import { PropsOf, Slot, component$ } from '@builder.io/qwik';
 
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ */
 export const ModalHeader = component$((props: PropsOf<'header'>) => {
   return (
     <header {...props}>
diff --git a/packages/kit-headless/src/components/modal/modal-title.tsx b/packages/kit-headless/src/components/modal/modal-title.tsx
@@ -0,0 +1,13 @@
+import { component$, Slot, type PropsOf } from '@builder.io/qwik';
+import { VisuallyHidden } from '../../utils/visually-hidden';
+
+export const ModalTitle = component$((props: PropsOf<'h2'>) => {
+  // TODO: replace this with a polymorphic component
+  return (
+    <VisuallyHidden>
+      <h2 {...props}>
+        <Slot />
+      </h2>
+    </VisuallyHidden>
+  );
+});
diff --git a/packages/kit-headless/src/components/modal/modal.driver.ts b/packages/kit-headless/src/components/modal/modal.driver.ts
@@ -0,0 +1,28 @@
+import { expect, type Locator, type Page } from '@playwright/test';
+
+export type DriverLocator = Locator | Page;
+
+export function createTestDriver<T extends DriverLocator>(rootLocator: T) {
+  const getModal = (alert?: boolean) => {
+    return rootLocator.getByRole(alert ? 'alertdialog' : 'dialog');
+  };
+
+  const getTrigger = () => {
+    return rootLocator.getByRole('button');
+  };
+
+  const openModal = async () => {
+    await getTrigger().click();
+
+    // should be open initially
+    await expect(getModal()).toBeVisible();
+  };
+
+  return {
+    ...rootLocator,
+    locator: rootLocator,
+    getModal,
+    getTrigger,
+    openModal,
+  };
+}
diff --git a/packages/kit-headless/src/components/modal/modal.test.ts b/packages/kit-headless/src/components/modal/modal.test.ts
@@ -0,0 +1,41 @@
+import { expect, test, type Page } from '@playwright/test';
+import { createTestDriver } from './modal.driver';
+
+async function setup(page: Page, exampleName: string) {
+  await page.goto(`/headless/modal/${exampleName}`);
+
+  const driver = createTestDriver(page);
+
+  return {
+    driver,
+  };
+}
+
+test('@Visual diff', async ({ page }) => {
+  const { driver: d } = await setup(page, 'hero');
+  await expect(page).toHaveScreenshot('closed modal.png');
+
+  await d.getTrigger().click();
+
+  await expect(page).toHaveScreenshot('opened modal.png');
+});
+
+// test.describe('a11y', () => {
+//   test('Axe Validation Test', async ({ page }) => {
+//     const { driver: d } = await setup(page, 'hero');
+
+//     const initialResults = await new AxeBuilder({ page })
+//       .include('[role="dialog"]')
+//       .analyze();
+
+//     expect(initialResults.violations).toEqual([]);
+
+//     await d.openModal();
+
+//     const afterClickResults = await new AxeBuilder({ page })
+//       .include('[role="dialog"]')
+//       .analyze();
+
+//     expect(afterClickResults.violations).toEqual([]);
+//   });
+// });
diff --git a/packages/kit-headless/src/components/modal/modal.tsx b/packages/kit-headless/src/components/modal/modal.tsx
@@ -9,6 +9,7 @@ import {
   useStyles$,
   useTask$,
 } from '@builder.io/qwik';
+import { ModalTitle } from './modal-title';
 
 import {
   activateFocusTrap,
@@ -96,6 +97,7 @@ export const Modal = component$((props: ModalProps) => {
       }}
       onClick$={(event) => closeOnBackdropClick$(event)}
     >
+      {props.title ? <ModalTitle>{props.title}</ModalTitle> : null}
       <Slot />
     </dialog>
   );
diff --git a/packages/kit-headless/src/index.ts b/packages/kit-headless/src/index.ts
@@ -22,3 +22,4 @@ export * from './components/tabs';
 export * from './components/toast/toast';
 export * from './components/toggle/toggle';
 export * from './components/tooltip/tooltip';
+export * from './utils/visually-hidden';

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { component$ } from '@builder.io/qwik';`
	`2`	`+`
	`3`	`+export const ModalDescription = component$(() => {});`