History

refactor(web): remove unused sidebar menu action (#10044)

Julius Marminge committed 2 months ago

Commit 5a4287c1 parent 5e828bf2 files · +1 −46Browse files

Unified · Split

2 files
  1. apps/web/src/components/ui/sidebar.test.tsx +0 −12
  2. apps/web/src/components/ui/sidebar.tsx +1 −34
apps/web/src/components/ui/sidebar.test.tsx+0−12
@@ -2,7 +2,6 @@ import { renderToStaticMarkup } from "react-dom/server"; · 1 unmodified line
22 import { describe, expect, it } from "vite-plus/test";
33
44 import {
5− SidebarMenuAction,
65 SidebarMenuButton,
76 SidebarMenuSubButton,
87 SidebarProvider,
@@ -89,17 +88,6 @@ describe("sidebar interactive cursors", () => { · 80 unmodified lines
8988 expect(html).not.toContain("cursor-pointer");
9089 });
9190
92− it("uses a pointer cursor for menu actions", () => {
93− const html = renderToStaticMarkup(
94− <SidebarMenuAction aria-label="Create thread">
95− <span>+</span>
96− </SidebarMenuAction>,
97− );
98−
99− expect(html).toContain('data-slot="sidebar-menu-action"');
100− expect(html).toContain("cursor-pointer");
101− });
102−
10391 it("uses a pointer cursor for submenu buttons", () => {
10492 const html = renderToStaticMarkup(
10593 <SidebarMenuSubButton render={<button type="button" />}>Show more</SidebarMenuSubButton>,
apps/web/src/components/ui/sidebar.tsx+1−34
@@ -800,7 +800,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) { · 799 unmodified lines
800800 }
801801
802802 const sidebarMenuButtonVariants = cva(
803− "peer/menu-button flex w-full cursor-pointer items-center gap-[var(--sidebar-control-gap)] overflow-hidden text-left outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-row-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-row-hover data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-[var(--sidebar-content-inset)]! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--sidebar-icon-color)] hover:[&>svg]:text-sidebar-foreground active:[&>svg]:text-sidebar-foreground data-[active=true]:[&>svg]:text-sidebar-foreground",
803+ "peer/menu-button flex w-full cursor-pointer items-center gap-[var(--sidebar-control-gap)] overflow-hidden text-left outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-row-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-row-hover data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-[var(--sidebar-content-inset)]! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--sidebar-icon-color)] hover:[&>svg]:text-sidebar-foreground active:[&>svg]:text-sidebar-foreground data-[active=true]:[&>svg]:text-sidebar-foreground",
804804 {
805805 defaultVariants: {
806806 size: "default",
@@ -875,38 +875,6 @@ function SidebarMenuButton({ · 68 unmodified lines
875875 );
876876 }
877877
878−function SidebarMenuAction({
879− className,
880− showOnHover = false,
881− render,
882− ...props
883−}: useRender.ComponentProps<"button"> & {
884− showOnHover?: boolean;
885−}) {
886− const defaultProps = {
887− className: cn(
888− "absolute top-1.5 right-1 flex aspect-square w-5 cursor-pointer items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-ring transition-transform hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0",
889− // Increases the hit area of the button on mobile.
890− "after:-inset-2 after:absolute md:after:hidden",
891− "peer-data-[size=sm]/menu-button:top-1",
892− "peer-data-[size=default]/menu-button:top-1.5",
893− "peer-data-[size=lg]/menu-button:top-2.5",
894− "group-data-[collapsible=icon]:hidden",
895− showOnHover &&
896− "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-foreground md:opacity-0",
897− className,
898− ),
899− "data-sidebar": "menu-action",
900− "data-slot": "sidebar-menu-action",
901− };
902−
903− return useRender({
904− defaultTagName: "button",
905− props: mergeProps<"button">(defaultProps, props),
906− render,
907− });
908−}
909−
910878 function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
911879 return (
912880 <div
@@ -1029,7 +997,6 @@ export { · 116 unmodified lines
1029997 SidebarInput,
1030998 SidebarInset,
1031999 SidebarMenu,
1032− SidebarMenuAction,
10331000 SidebarMenuBadge,
10341001 SidebarMenuButton,
10351002 SidebarMenuItem,