mirror of
https://github.com/block/buzz.git
synced 2026-11-03 16:01:35 +00:00
fix(projects): restore overview drawer controls
Use the stateful drawer affordance in both wide and narrow Projects layouts so context controls match the rest of the project surfaces. Signed-off-by: Thomas Petersen <thomasp@squareup.com> Co-authored-by: Thomas Petersen <thomasp@squareup.com>
This commit is contained in:
@@ -1,7 +1,8 @@
|
||||
import { Info, MessageCircle } from "lucide-react";
|
||||
import { MessageCircle } from "lucide-react";
|
||||
|
||||
import { cn } from "@/shared/lib/cn";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { DrawerPanelIcon } from "@/shared/ui/DrawerPanelIcon";
|
||||
|
||||
export function ProjectsOverviewChromeActions({
|
||||
chatOpen,
|
||||
@@ -49,12 +50,10 @@ export function ProjectsOverviewChromeActions({
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Info
|
||||
className={cn(
|
||||
"h-4 w-4 transition-opacity duration-200 ease-linear",
|
||||
contextOpen ? "opacity-100" : "opacity-60",
|
||||
)}
|
||||
data-testid="projects-overview-context-icon"
|
||||
<DrawerPanelIcon
|
||||
className="-scale-x-100"
|
||||
side={contextOpen ? "left" : "right"}
|
||||
testId="projects-overview-context-icon"
|
||||
/>
|
||||
</Button>
|
||||
</>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Info } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/shared/lib/cn";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { DrawerPanelIcon } from "@/shared/ui/DrawerPanelIcon";
|
||||
import { Sheet, SheetContent, SheetTitle } from "@/shared/ui/sheet";
|
||||
|
||||
export const ProjectsOverviewNarrowContextToggle = React.forwardRef<
|
||||
@@ -21,12 +20,10 @@ export const ProjectsOverviewNarrowContextToggle = React.forwardRef<
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
<Info
|
||||
className={cn(
|
||||
"h-4 w-4 transition-opacity duration-200 ease-linear",
|
||||
open ? "opacity-100" : "opacity-60",
|
||||
)}
|
||||
data-testid="projects-overview-context-icon"
|
||||
<DrawerPanelIcon
|
||||
className="-scale-x-100"
|
||||
side={open ? "left" : "right"}
|
||||
testId="projects-overview-context-icon"
|
||||
/>
|
||||
</Button>
|
||||
));
|
||||
|
||||
@@ -2103,7 +2103,7 @@ test("project overview chrome toggles a detached resizable agent chat", async ({
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("project overview info control animates the context rail", async ({
|
||||
test("project overview drawer control animates the context rail", async ({
|
||||
page,
|
||||
}) => {
|
||||
await enableProjectsFeature(page);
|
||||
@@ -2114,6 +2114,10 @@ test("project overview info control animates the context rail", async ({
|
||||
const toggle = page.getByTestId("projects-overview-context-toggle");
|
||||
const rail = page.getByTestId("projects-overview-context-rail");
|
||||
const railPanel = page.getByTestId("projects-overview-context-rail-panel");
|
||||
const drawerIndicator = page
|
||||
.getByTestId("projects-overview-context-icon")
|
||||
.locator("rect")
|
||||
.nth(1);
|
||||
const contentSurface = page.locator("[data-buzz-content-surface]");
|
||||
await expect(page.getByTestId("projects-overview-layout")).toHaveAttribute(
|
||||
"data-project-context-detached",
|
||||
@@ -2133,6 +2137,7 @@ test("project overview info control animates the context rail", async ({
|
||||
await expect(
|
||||
page.getByTestId("projects-overview-context-icon"),
|
||||
).toBeVisible();
|
||||
await expect(drawerIndicator).toHaveAttribute("width", "5px");
|
||||
await expect(rail).toHaveCSS("width", "288px");
|
||||
await expect(page.getByTestId("projects-overview-layout")).toHaveCSS(
|
||||
"padding-right",
|
||||
@@ -2146,6 +2151,7 @@ test("project overview info control animates the context rail", async ({
|
||||
await toggle.click();
|
||||
await expect(rail).toHaveCSS("width", "0px");
|
||||
await expect(toggle).toHaveAttribute("aria-pressed", "false");
|
||||
await expect(drawerIndicator).toHaveAttribute("width", "2px");
|
||||
await expect(railPanel).toHaveCSS("transform", "none");
|
||||
expect(await surfaceStyle()).toEqual(expandedSurfaceStyle);
|
||||
await toggle.click();
|
||||
|
||||
Reference in New Issue
Block a user