YunxiaoXu/ea-chatbot-lg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): add cursor-pointer to sidebar components

Browse Source
This commit is contained in:
Yunxiao Xu
2026-02-23 05:16:39 -08:00
parent 1394c0496a
commit 99ded43483
2 changed files with 57 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/components/ui/sidebar.test.tsx Normal file
View File

@@ -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(
<SidebarProvider>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>Menu Button</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarProvider>
)
const button = screen.getByRole("button", { name: /menu button/i })
expect(button).toHaveClass("cursor-pointer")
})
it("SidebarMenuAction should have cursor-pointer", () => {
render(
<SidebarProvider>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton>Button</SidebarMenuButton>
<SidebarMenuAction>Action</SidebarMenuAction>
</SidebarMenuItem>
</SidebarMenu>
</SidebarProvider>
)
const action = screen.getByRole("button", { name: /action/i })
expect(action).toHaveClass("cursor-pointer")
})
it("SidebarGroupAction should have cursor-pointer", () => {
render(
<SidebarProvider>
<SidebarGroup>
<SidebarGroupAction>Group Action</SidebarGroupAction>
</SidebarGroup>
</SidebarProvider>
)
const action = screen.getByRole("button", { name: /group action/i })
expect(action).toHaveClass("cursor-pointer")
})
})

6
frontend/src/components/ui/sidebar.tsx
View File

@@ -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",