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.
37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import { create } from "@bufbuild/protobuf";
|
|
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import ReactionSelector from "@/components/MemoReactionListView/ReactionSelector";
|
|
import { MemoSchema } from "@/types/proto/api/v1/memo_service_pb";
|
|
|
|
vi.mock("@/components/MemoReactionListView/hooks", () => ({
|
|
useReactionActions: () => ({
|
|
hasReacted: () => false,
|
|
handleReactionClick: vi.fn(),
|
|
}),
|
|
}));
|
|
|
|
vi.mock("@/contexts/InstanceContext", () => ({
|
|
useInstance: () => ({ memoRelatedSetting: { reactions: ["👍"] } }),
|
|
}));
|
|
|
|
vi.mock("@/utils/i18n", () => ({
|
|
useTranslate: () => (key: string) => key,
|
|
}));
|
|
|
|
describe("ReactionSelector", () => {
|
|
it("uses a named native trigger with a visible focus state", async () => {
|
|
const memo = create(MemoSchema, { name: "memos/1", reactions: [] });
|
|
render(<ReactionSelector memo={memo} />);
|
|
|
|
const trigger = screen.getByRole("button", { name: "setting.memo.add-reaction" });
|
|
expect(trigger).toHaveClass("size-7", "rounded-full", "focus-visible:outline-2");
|
|
expect(trigger.className).not.toMatch(/ring-/);
|
|
expect(trigger).toHaveAttribute("aria-expanded", "false");
|
|
|
|
fireEvent.click(trigger);
|
|
|
|
await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "true"));
|
|
expect(screen.getByRole("button", { name: "👍" })).toBeInTheDocument();
|
|
});
|
|
});
|