From 99ded4348348c81125f7954ebf30eec351edda55 Mon Sep 17 00:00:00 2001 From: Yunxiao Xu Date: Mon, 23 Feb 2026 05:16:39 -0800 Subject: [PATCH] fix(ui): add cursor-pointer to sidebar components --- frontend/src/components/ui/sidebar.test.tsx | 54 +++++++++++++++++++++ frontend/src/components/ui/sidebar.tsx | 6 +-- 2 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/ui/sidebar.test.tsx diff --git a/frontend/src/components/ui/sidebar.test.tsx b/frontend/src/components/ui/sidebar.test.tsx new file mode 100644 index 0000000..da3ba9d --- /dev/null +++ b/frontend/src/components/ui/sidebar.test.tsx @@ -0,0 +1,54 @@ +import { render, screen } from "@testing-library/react" +import { describe, expect, it } from "vitest" +import { + SidebarProvider, + SidebarMenuButton, + SidebarMenuAction, + SidebarGroupAction, + SidebarMenu, + SidebarMenuItem, + SidebarGroup +} from "./sidebar" + +describe("Sidebar components", () => { + it("SidebarMenuButton should have cursor-pointer", () => { + render( + + + + Menu Button + + + + ) + const button = screen.getByRole("button", { name: /menu button/i }) + expect(button).toHaveClass("cursor-pointer") + }) + + it("SidebarMenuAction should have cursor-pointer", () => { + render( + + + + Button + Action + + + + ) + const action = screen.getByRole("button", { name: /action/i }) + expect(action).toHaveClass("cursor-pointer") + }) + + it("SidebarGroupAction should have cursor-pointer", () => { + render( + + + Group Action + + + ) + const action = screen.getByRole("button", { name: /group action/i }) + expect(action).toHaveClass("cursor-pointer") + }) +}) diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx index 0b0154e..19e5365 100644 --- a/frontend/src/components/ui/sidebar.tsx +++ b/frontend/src/components/ui/sidebar.tsx @@ -405,7 +405,7 @@ function SidebarGroupAction({ data-slot="sidebar-group-action" data-sidebar="group-action" className={cn( - "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", + "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 cursor-pointer", // Increases the hit area of the button on mobile. "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", @@ -477,7 +477,7 @@ function SidebarMenuButton({ data-size={size} data-active={isActive} className={cn( - "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", + "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 cursor-pointer", variant === "default" && "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", variant === "outline" && "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]", size === "default" && "h-8 text-sm", @@ -528,7 +528,7 @@ function SidebarMenuAction({ data-slot="sidebar-menu-action" data-sidebar="menu-action" className={cn( - "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", + "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 cursor-pointer", // Increases the hit area of the button on mobile. "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1",