c031b77c83
buttons The calendar shipped its own "quiet control" grammar as a page-local set of class strings: 28px tall, 13px text, muted ink that darkens under a light hover wash, ring-free outline focus, and the accent fill reserved for a pressed or current state. The same look was hand-rolled elsewhere with drifting values (/65 ink, /50 washes, ring focus) as className overrides on the kit's Button, against the kit policy. The grammar now lives in the kit as `variant="quiet"`, with the accent fill keyed off `aria-pressed`, `aria-current` and `data-popup-open`, so a control that is on, current, or holding a popup open fills itself. A `size="icon-compact"` names the 28px square the sidebar already used for its compose control; `sm` already had the height for labelled chips. Kit buttons had no focus treatment of their own, so sites that needed one bolted `focus-visible:ring-*` overrides onto the Button. The base now carries a 2px inset outline from a new `ui/focus.ts` constant that raw controls (calendar grid cells, the reaction chip) import too, and the calendar's controls.ts goes away. With both in place the hand-rolled sites collapse onto the variant: the calendar's header, month picker and day panel; the statistics month navigator; the sidebar's section actions and compose and mobile menu controls; the memo card's trailing actions and its action menu, which no longer takes a className; the share-image dialog's footer; the memo outline; and the inactive underline tab. The month title fills while its picker is open and the outline's current heading fills like every other current thing. Tests follow the classes they assert.
91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
import { render, screen } from "@testing-library/react";
|
|
import { HashIcon } from "lucide-react";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import SidebarRow, {
|
|
SIDEBAR_ROW_BOX_CLASSES,
|
|
SIDEBAR_ROW_COUNT_RAIL_CLASSES,
|
|
SIDEBAR_ROW_SLOT_BUTTON_CLASSES,
|
|
SIDEBAR_ROW_SLOT_CLASSES,
|
|
} from "@/components/AppSidebar/SidebarRow";
|
|
import SidebarSection, { SIDEBAR_SECTION_CONTENT_CLASSES } from "@/components/AppSidebar/SidebarSection";
|
|
import TagTree from "@/components/TagTree";
|
|
|
|
vi.mock("@/utils/i18n", () => ({ useTranslate: () => (key: string) => key }));
|
|
|
|
/**
|
|
* Tag rows drifted off the rail's row grammar once already (they were 26px/12px against
|
|
* everything else's 30px/13px). These lock the shared box: the sizes must come from
|
|
* `SIDEBAR_ROW_BOX_CLASSES`, not from values copied into each list.
|
|
*/
|
|
const boxClasses = SIDEBAR_ROW_BOX_CLASSES.split(" ");
|
|
|
|
describe("sidebar row grammar", () => {
|
|
it("gives every content section the same title and row rhythm", () => {
|
|
render(
|
|
<SidebarSection label="Statistics">
|
|
<SidebarRow label="August 2026" />
|
|
</SidebarSection>,
|
|
);
|
|
|
|
expect(screen.getByRole("heading", { name: "Statistics", level: 2 })).toHaveClass("text-2xs", "font-normal");
|
|
expect(screen.getByRole("button", { name: "August 2026" }).parentElement).toHaveClass(...SIDEBAR_SECTION_CONTENT_CLASSES.split(" "));
|
|
});
|
|
|
|
it("gives a nav row the shared row box", () => {
|
|
render(<SidebarRow icon={HashIcon} label="Tasks" count={3} />);
|
|
|
|
const row = screen.getByRole("button", { name: "Tasks3" });
|
|
expect(row).toHaveClass(...boxClasses);
|
|
expect(row).toHaveClass("h-7", "w-full", "gap-1", "rounded-md", "px-2");
|
|
expect(row).not.toHaveClass("-mx-1");
|
|
// Icon in the shared slot and count in the shared rail, so every list — nav rows,
|
|
// views, tags in both modes — keeps its icons and digits on the same vertical lines.
|
|
expect(row.firstElementChild).toHaveClass(...SIDEBAR_ROW_SLOT_CLASSES.split(" "));
|
|
expect(row.firstElementChild).toHaveClass("size-5");
|
|
expect(row.firstElementChild?.firstElementChild).toHaveClass("size-4");
|
|
expect(screen.getByText("3")).toHaveClass(...SIDEBAR_ROW_COUNT_RAIL_CLASSES.split(" "));
|
|
});
|
|
|
|
it("keeps compact controls at a 24px hit target without layout margins", () => {
|
|
expect(SIDEBAR_ROW_SLOT_BUTTON_CLASSES).toContain("after:-inset-0.5");
|
|
expect(SIDEBAR_ROW_SLOT_BUTTON_CLASSES).toContain("after:content-['']");
|
|
expect(SIDEBAR_ROW_SLOT_BUTTON_CLASSES).not.toContain("-mx-1");
|
|
});
|
|
|
|
it("gives tag tree rows the same box as a nav row", () => {
|
|
render(
|
|
<TagTree
|
|
tagAmounts={[
|
|
["a", 2],
|
|
["a/b", 1],
|
|
]}
|
|
scope="home"
|
|
onTagClick={vi.fn()}
|
|
/>,
|
|
);
|
|
|
|
for (const item of screen.getAllByRole("treeitem")) {
|
|
expect(item).toHaveClass(...boxClasses);
|
|
}
|
|
expect(document.querySelector(".lucide-chevron-right")).toHaveClass("me-auto");
|
|
});
|
|
|
|
it("indents nested tags by the same step the memo outline uses", () => {
|
|
render(
|
|
<TagTree
|
|
tagAmounts={[
|
|
["a", 2],
|
|
["a/b", 1],
|
|
]}
|
|
// The active tag keeps the nested row expanded into view.
|
|
activeTag="a/b"
|
|
scope="home"
|
|
onTagClick={vi.fn()}
|
|
/>,
|
|
);
|
|
|
|
const [root, child] = screen.getAllByRole("treeitem");
|
|
expect(root).toHaveStyle({ paddingInlineStart: "8px" });
|
|
expect(child).toHaveStyle({ paddingInlineStart: "20px" });
|
|
});
|
|
});
|