refactor(webui): unify shared shape system

2026-08-14 19:55:25 +09:00
parent 7c04af86f9
commit 60993597de
56 changed files with 305 additions and 219 deletions
@@ -0,0 +1,83 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+describe("UI shape system", () => {
+  it("gives standard controls one shared radius", () => {
+    render(
+      <>
+        <Button>Continue</Button>
+        <Input aria-label="Name" />
+        <Textarea aria-label="Description" />
+      </>,
+    );
+
+    expect(screen.getByRole("button", { name: "Continue" })).toHaveClass("rounded-control");
+    expect(screen.getByRole("textbox", { name: "Name" })).toHaveClass("rounded-control");
+    expect(screen.getByRole("textbox", { name: "Description" })).toHaveClass(
+      "rounded-control",
+    );
+  });
+
+  it("gives dialogs and alert dialogs one shared modal radius", () => {
+    const dialog = render(
+      <Dialog open>
+        <DialogContent showCloseButton={false}>
+          <DialogTitle>Edit name</DialogTitle>
+          <DialogDescription>Choose a new name.</DialogDescription>
+        </DialogContent>
+      </Dialog>,
+    );
+    expect(screen.getByRole("dialog", { name: "Edit name" })).toHaveClass("rounded-modal");
+    dialog.unmount();
+
+    render(
+      <AlertDialog open>
+        <AlertDialogContent>
+          <AlertDialogTitle>Delete item?</AlertDialogTitle>
+          <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+    expect(screen.getByRole("alertdialog", { name: "Delete item?" })).toHaveClass(
+      "rounded-modal",
+    );
+  });
+
+  it("keeps floating surfaces and their items on the shared radius scale", () => {
+    render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Rename</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    expect(screen.getByRole("menu")).toHaveClass("rounded-floating");
+    expect(screen.getByRole("menuitem", { name: "Rename" })).toHaveClass(
+      "rounded-control",
+    );
+  });
+});