@charcuterie/ui 1.1.0 → 2.0.0

package/src/Modal/Modal.stories.tsx

@@ -2,29 +2,16 @@ import { useVisibility } from "@charcuterie/logic"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
 
-import { toStoryChoice } from "../argTypes.storyHelpers.ts"
 import { Button } from "../Button/Button.tsx"
-import { StoryRow } from "../board.storyHelpers.tsx"
-import type { ModalSize } from "./Modal.tsx"
 import { Modal } from "./Modal.tsx"
 
 const meta = {
   title: "Components/Modal",
   component: Modal,
   parameters: { layout: "padded" },
-  argTypes: {
-    size: toStoryChoice([
-      "sm",
-      "md",
-      "lg",
-      "xl",
-      "full",
-    ] as const),
-  },
   args: {
-    headingLevel: 2,
     isDismissable: true,
-    size: "md",
+    role: "dialog",
   },
 } satisfies Meta<typeof Modal>
 
@@ -33,32 +20,21 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 /**
- * Every board here is triggers-plus-one-open-dialog rather than a
- * grid, and that is the component rather than the stories being
- * awkward: `showModal()` puts a dialog in the **top layer**, so two
- * of them side by side is not a thing the platform can do. What the
- * boards show instead is the real arrangement — a page, a scrim,
- * and one dialog over both.
- *
- * `footer` is a function of `hide` because a dialog's own buttons
- * are the normal way out of it, and they need the same `hide` the
- * close button gets. One `useVisibility` per demo, no second source
- * of truth.
+ * The base layer has no chrome, so a demo supplies its own — the
+ * point being that `Modal` is the backdrop-plus-dismiss-plus-portal
+ * foundation and the content is entirely the caller's. `Dialog` is
+ * the batteries-included version of exactly this.
  */
 const ModalDemo = ({
   buttonLabel,
   children,
-  footer,
-  heading,
-  isDismissable = true,
-  size,
+  label,
+  role,
 }: {
   buttonLabel: string
   children?: ReactNode
-  footer?: (hide: () => void) => ReactNode
-  heading: string
-  isDismissable?: boolean
-  size?: ModalSize
+  label: string
+  role?: "alertdialog" | "dialog"
 }): ReactNode => {
   const { hide, isVisible, show } = useVisibility()
 
@@ -69,21 +45,29 @@ const ModalDemo = ({
       </Button>
 
       <Modal
-        footer={footer?.(hide)}
-        heading={heading}
-        isDismissable={isDismissable}
+        aria-label={label}
         isVisible={isVisible}
         onClose={hide}
-        size={size}
+        role={role}
       >
-        {children ?? (
-          <p className="text-content-secondary text-sm">
-            MakeMKV reported a read error on title 4. The
-            rip can continue with the remaining eight
-            titles, or stop here and keep what has
-            completed.
-          </p>
-        )}
+        <div className="flex flex-col gap-3 p-4">
+          {children ?? (
+            <p className="text-content-secondary text-sm">
+              A bare `Modal`: a scrim, a focus trap, Escape,
+              and an outside press. Everything you see
+              inside is the caller's own markup.
+            </p>
+          )}
+
+          <Button
+            appearance="soft"
+            intent="neutral"
+            onClick={hide}
+            size="sm"
+          >
+            Close
+          </Button>
+        </div>
       </Modal>
     </>
   )
@@ -91,182 +75,65 @@ const ModalDemo = ({
 
 export const Default: Story = {
   args: {
-    heading: "Bay 3",
+    "aria-label": "Read error on title 4",
+    children: null,
     isVisible: false,
     onClose: () => {},
   },
   render: () => (
     <ModalDemo
-      buttonLabel="Show the read error"
-      heading="Read error on title 4"
+      buttonLabel="Open the base modal"
+      label="Read error on title 4"
     />
   ),
 }
 
-const SIZES: ModalSize[] = ["sm", "md", "lg", "xl", "full"]
-
-export const AllVariants: Story = {
-  args: {
-    heading: "Bay 3",
-    isVisible: false,
-    onClose: () => {},
-  },
-  render: () => (
-    <StoryRow>
-      {SIZES.map((size) => (
-        <ModalDemo
-          buttonLabel={`Open ${size}`}
-          heading={`Read error — ${size}`}
-          key={size}
-          size={size}
-        />
-      ))}
-    </StoryRow>
-  ),
-}
-
-export const AllStates: Story = {
-  args: {
-    heading: "Bay 3",
-    isVisible: false,
-    onClose: () => {},
-  },
-  render: () => (
-    <StoryRow>
-      <ModalDemo
-        buttonLabel="With a footer"
-        footer={(hide) => (
-          <>
-            <Button
-              appearance="soft"
-              intent="neutral"
-              onClick={hide}
-              size="sm"
-            >
-              Keep going
-            </Button>
-
-            <Button intent="danger" size="sm">
-              Stop the rip
-            </Button>
-          </>
-        )}
-        heading="Stop the rip?"
-      />
-
-      <ModalDemo
-        buttonLabel="Not dismissable"
-        footer={(hide) => (
-          <>
-            <Button
-              appearance="soft"
-              intent="neutral"
-              onClick={hide}
-              size="sm"
-            >
-              Keep the titles
-            </Button>
-
-            <Button intent="danger" size="sm">
-              Erase and re-rip
-            </Button>
-          </>
-        )}
-        heading="This erases eight completed titles"
-        isDismissable={false}
-      />
-
-      <ModalDemo
-        buttonLabel="Long body"
-        heading="MakeMKV log"
-      >
-        <div className="flex flex-col gap-2">
-          {Array.from(
-            { length: 24 },
-            (_, index) =>
-              `14:0${index % 10}:22  title ${
-                index + 1
-              }  AACS handshake complete, reading…`,
-          ).map((line) => (
-            <p
-              className="font-mono text-content-secondary text-xs"
-              key={line}
-            >
-              {line}
-            </p>
-          ))}
-        </div>
-      </ModalDemo>
-    </StoryRow>
-  ),
-}
-
 /**
- * A modal is the one surface in this library that is **not** a
- * container-query citizen, so it gets no `ContainerBoard`. Its size
- * is measured against the viewport by definition — it is the thing
- * covering the viewport — and boarding it at three container widths
- * would be measuring something that has no bearing on it.
- *
- * What does vary is the clamp: every size caps at `85dvh`, and
- * `full` takes the lot. `dvh` rather than `vh` because on a phone
- * the two differ by the address bar, and a dialog whose footer is
- * underneath it is a dialog with no buttons.
+ * `role="alertdialog"` is the one configuration the base exposes that
+ * `Dialog` does not surface directly — an interruption the user has
+ * to answer, announced as an alert rather than a plain dialog.
  */
-export const Responsive: Story = {
+export const Alert: Story = {
   args: {
-    heading: "Bay 3",
+    "aria-label": "Confirm erase",
+    children: null,
     isVisible: false,
     onClose: () => {},
   },
   render: () => (
     <ModalDemo
-      buttonLabel="Open full-bleed"
-      heading="MakeMKV log — full"
-      size="full"
+      buttonLabel="Open an alertdialog"
+      label="Confirm erase"
+      role="alertdialog"
     >
       <p className="text-content-secondary text-sm">
-        `full` is the kiosk and phone case: the dialog is
-        the screen, so there is nothing behind it worth
-        showing.
+        This erases eight completed titles.
       </p>
     </ModalDemo>
   ),
 }
 
 /**
- * The keyboard contract, driven. `showModal()` supplies the focus
- * trap and the focus restore; what this asserts is that the state
- * layer never disagrees with the element — Escape routes through
- * `onCancel` → `hide()` → the effect → `close()`, rather than the
- * browser closing the dialog behind the app's back.
+ * The keyboard contract, driven. `OverlayPanel`'s
+ * `FloatingFocusManager` traps focus and restores it to the trigger;
+ * `useDismiss` routes Escape and an outside press through `onClose`.
  */
 export const Interactive: Story = {
   args: {
-    heading: "Bay 3",
+    "aria-label": "Stop the rip?",
+    children: null,
     isVisible: false,
     onClose: () => {},
   },
   render: () => (
     <ModalDemo
       buttonLabel="Stop the rip"
-      footer={(hide) => (
-        <>
-          <Button
-            appearance="soft"
-            intent="neutral"
-            onClick={hide}
-            size="sm"
-          >
-            Keep going
-          </Button>
-
-          <Button intent="danger" size="sm">
-            Stop it now
-          </Button>
-        </>
-      )}
-      heading="Stop the rip?"
-    />
+      label="Stop the rip?"
+    >
+      <p className="text-content-secondary text-sm">
+        Escape, an outside press, or the button below all
+        land on the same `onClose`.
+      </p>
+    </ModalDemo>
   ),
 }

package/src/Modal/Modal.test.tsx

@@ -7,216 +7,85 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Modal.stories.tsx"
 
-const {
-  AllStates,
-  AllVariants,
-  Default,
-  Interactive,
-  Responsive,
-} = composeStories(stories)
-
-/**
- * Escape, as far as a test can press it — and the limit is worth
- * stating rather than working around quietly.
- *
- * `userEvent` is `@testing-library/user-event`, which dispatches
- * **untrusted** events. The browser runs a default action only for
- * trusted input, so a synthetic Escape keydown does not make a
- * native `<dialog>` fire `cancel` — it does nothing at all. A test
- * asserting "Escape did not close the non-dismissable dialog"
- * against a synthetic keypress therefore passes for the wrong
- * reason, forever, which is worse than not testing it.
- *
- * So the close request is dispatched where the browser would raise
- * it. That splits the contract honestly: the keystroke → `cancel`
- * half is the platform's and is not ours to test, and everything
- * downstream of `cancel` — `preventDefault`, `hide()`, the effect,
- * `close()`, focus restore — is ours and is asserted here.
- */
-const requestClose = (dialog: HTMLElement) => {
-  dialog.dispatchEvent(
-    new Event("cancel", { cancelable: true }),
-  )
-}
+const { Alert, Default, Interactive } =
+  composeStories(stories)
 
-test("the dialog is reachable from a scoped query", async () => {
-  const { canvas, canvasElement } =
+test("the base modal portals to the body, named by its aria-label", async () => {
+  const { body, canvas, canvasElement } =
     await mountStory(Default)
 
   await userEvent.click(
     expectAgentDrivable(canvas, {
-      name: "Show the read error",
+      name: "Open the base modal",
       role: "button",
     }),
   )
 
-  // Scoped to `canvas`, and that is the point of not portalling:
-  // the dialog paints in the top layer while staying inside the
-  // story root, so an agent's scoped query still reaches it.
-  const dialog = expectAgentDrivable(canvas, {
+  const modal = expectAgentDrivable(body, {
     name: "Read error on title 4",
     role: "dialog",
   })
 
-  await expect(dialog).toHaveAttribute("open")
+  // Portalled out of the canvas — the whole point over the top layer.
+  await expect(canvasElement).not.toContainElement(modal)
 
-  // The addon's own axe pass fired before any of this was clicked,
-  // so the *open* dialog audits itself.
-  await expectNoAxeViolations(canvasElement)
+  await expectNoAxeViolations(modal)
 })
 
-test("size is a real width, not a class that happens to be there", async () => {
-  const { canvas } = await mountStory(AllVariants)
+test("an alertdialog role is carried through", async () => {
+  const { body, canvas } = await mountStory(Alert)
 
   await userEvent.click(
     expectAgentDrivable(canvas, {
-      name: "Open lg",
+      name: "Open an alertdialog",
       role: "button",
     }),
   )
 
-  const dialog = expectAgentDrivable(canvas, {
-    name: "Read error — lg",
-    role: "dialog",
+  // The one configuration the base surfaces that `Dialog` does not.
+  expectAgentDrivable(body, {
+    name: "Confirm erase",
+    role: "alertdialog",
   })
-
-  await expect(
-    dialog.getBoundingClientRect().width,
-  ).toBeGreaterThan(400)
 })
 
-test("a non-dismissable dialog cancels the close rather than ignoring it", async () => {
-  const { canvas } = await mountStory(AllStates)
-
-  await userEvent.click(
-    expectAgentDrivable(canvas, {
-      name: "Not dismissable",
-      role: "button",
-    }),
-  )
+test("Escape and an outside press both close through onClose", async () => {
+  const { body, canvas } = await mountStory(Default)
 
-  const dialog = expectAgentDrivable(canvas, {
-    name: "This erases eight completed titles",
-    role: "dialog",
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Open the base modal",
+    role: "button",
   })
 
-  // There is no Close button, and the close request is *cancelled*
-  // rather than ignored — letting the browser close it would leave
-  // `isVisible` true and the element shut, which is the desync the
-  // component exists to prevent.
-  await expect(
-    canvas.queryByRole("button", { name: "Close" }),
-  ).toBeNull()
-
-  requestClose(dialog)
-
-  // `find*` is async, which is what gives React's update from that
-  // dispatch a chance to flush. If the request *had* got through,
-  // this query would fail rather than the assertion below passing by
-  // being too quick.
-  const keepButton = await canvas.findByRole("button", {
-    name: "Keep the titles",
-  })
+  await userEvent.click(trigger)
 
-  await expect(dialog).toHaveAttribute("open")
+  expectAgentDrivable(body, {
+    name: "Read error on title 4",
+    role: "dialog",
+  })
 
-  // The differential half. Without it, "still open" would also be
-  // satisfied by a dialog nothing can close at all — a green
-  // assertion about a component that does not work.
-  await userEvent.click(keepButton)
+  await userEvent.keyboard("{Escape}")
 
   await waitFor(() => {
-    expect(canvas.queryByRole("dialog")).toBeNull()
+    expect(body.queryByRole("dialog")).toBeNull()
   })
-})
 
-test("a long body scrolls inside the clamp", async () => {
-  const { canvas, canvasElement } =
-    await mountStory(AllStates)
-
-  await userEvent.click(
-    canvas.getByRole("button", { name: "Long body" }),
-  )
+  // Reopened, then dismissed by pressing the page behind it.
+  await userEvent.click(trigger)
 
-  const log = expectAgentDrivable(canvas, {
-    name: "MakeMKV log",
-    role: "dialog",
+  await waitFor(() => {
+    expect(body.getByRole("dialog")).toBeInTheDocument()
   })
 
-  // The body scrolls, the header and footer do not, and the dialog
-  // stops at `85dvh` rather than running off the screen.
-  await expect(
-    log.getBoundingClientRect().height,
-  ).toBeLessThan(globalThis.innerHeight)
+  await userEvent.click(document.body)
 
-  await expect(
-    canvas.getByText(/title 24/),
-  ).toBeInTheDocument()
-
-  // The case that would trip `scrollable-region-focusable` if the
-  // body scrolled with nothing inside it to focus.
-  await expectNoAxeViolations(canvasElement)
-})
-
-test("the scrim is the token, not Chromium's default backdrop", async () => {
-  const { canvas } = await mountStory(Responsive)
-
-  await userEvent.click(
-    expectAgentDrivable(canvas, {
-      name: "Open full-bleed",
-      role: "button",
-    }),
-  )
-
-  const dialog = expectAgentDrivable(canvas, {
-    name: "MakeMKV log — full",
-    role: "dialog",
+  await waitFor(() => {
+    expect(body.queryByRole("dialog")).toBeNull()
   })
-
-  await expect(
-    dialog.getBoundingClientRect().height,
-  ).toBeGreaterThan(globalThis.innerHeight * 0.95)
-
-  // `::backdrop` inheriting custom properties from its originating
-  // element is the half that could silently not work.
-  //
-  // Compared against the token's *resolved* value rather than
-  // against "not transparent", which M4 learned the hard way:
-  // Chromium's own `::backdrop` is `rgba(0, 0, 0, 0.1)`, so the
-  // loose version of this assertion stayed green against a token
-  // build where `bg-scrim` generated no CSS at all.
-  //
-  // The probe is how the two become comparable — the same `var()`
-  // put through `background-color` comes back in the identical
-  // serialisation the backdrop uses.
-  const probe = document.createElement("div")
-
-  probe.style.backgroundColor = "var(--color-scrim)"
-
-  document.body.append(probe)
-
-  const expectedScrim =
-    globalThis.getComputedStyle(probe).backgroundColor
-
-  probe.remove()
-
-  await expect(expectedScrim).not.toBe("rgba(0, 0, 0, 0)")
-
-  await expect(
-    globalThis.getComputedStyle(dialog, "::backdrop")
-      .backgroundColor,
-  ).toBe(expectedScrim)
 })
 
-/**
- * `showModal()` supplies the focus trap and the focus restore; what
- * this asserts is that the state layer never disagrees with the
- * element — Escape routes through `onCancel` → `hide()` → the
- * effect → `close()`, rather than the browser closing the dialog
- * behind the app's back.
- */
 test("focus is trapped inside, and restored to the trigger on close", async () => {
-  const { canvas } = await mountStory(Interactive)
+  const { body, canvas } = await mountStory(Interactive)
 
   const trigger = expectAgentDrivable(canvas, {
     name: "Stop the rip",
@@ -225,24 +94,22 @@ test("focus is trapped inside, and restored to the trigger on close", async () =
 
   await userEvent.click(trigger)
 
-  const dialog = expectAgentDrivable(canvas, {
+  const modal = expectAgentDrivable(body, {
     name: "Stop the rip?",
     role: "dialog",
   })
 
-  // The trap, from the platform: focus is inside the dialog, and the
-  // trigger behind it is `inert` and unreachable.
-  await expect(dialog).toContainElement(
-    document.activeElement as HTMLElement,
-  )
+  await waitFor(() => {
+    expect(modal.contains(document.activeElement)).toBe(
+      true,
+    )
+  })
 
-  requestClose(dialog)
+  await userEvent.keyboard("{Escape}")
 
   await waitFor(() => {
-    expect(canvas.queryByRole("dialog")).toBeNull()
+    expect(body.queryByRole("dialog")).toBeNull()
   })
 
-  // Focus restored to what opened it — also the platform's, and the
-  // thing hand-rolled modals in the fleet lose.
   await expect(document.activeElement).toBe(trigger)
 })