From 1394c0496a28044bdd765778f4883acdac9819f7 Mon Sep 17 00:00:00 2001 From: Yunxiao Xu Date: Mon, 23 Feb 2026 05:03:05 -0800 Subject: [PATCH] fix(ui): add cursor-pointer to base button variants --- frontend/src/components/ui/button-variants.ts | 2 +- frontend/src/components/ui/button.test.tsx | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/ui/button.test.tsx diff --git a/frontend/src/components/ui/button-variants.ts b/frontend/src/components/ui/button-variants.ts index 765bdfe..4464702 100644 --- a/frontend/src/components/ui/button-variants.ts +++ b/frontend/src/components/ui/button-variants.ts @@ -1,7 +1,7 @@ import { cva } from "class-variance-authority" export const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { diff --git a/frontend/src/components/ui/button.test.tsx b/frontend/src/components/ui/button.test.tsx new file mode 100644 index 0000000..b390aea --- /dev/null +++ b/frontend/src/components/ui/button.test.tsx @@ -0,0 +1,21 @@ +import { render, screen } from "@testing-library/react" +import { describe, expect, it } from "vitest" +import { Button } from "./button" + +describe("Button component", () => { + it("renders with a pointer cursor", () => { + render() + const button = screen.getByRole("button", { name: /click me/i }) + expect(button).toHaveClass("cursor-pointer") + }) + + it("renders different variants with a pointer cursor", () => { + const { rerender } = render() + let button = screen.getByRole("button", { name: /outline/i }) + expect(button).toHaveClass("cursor-pointer") + + rerender() + button = screen.getByRole("button", { name: /destructive/i }) + expect(button).toHaveClass("cursor-pointer") + }) +})