From 1e298a5e98da8ef9e1d5660e7c478154108edb5e Mon Sep 17 00:00:00 2001 From: Roo Code Date: Wed, 27 Aug 2025 16:27:42 +0000 Subject: [PATCH 1/2] feat: update tooltip component to match native VSCode tooltip shadow styling --- .../components/ui/__tests__/tooltip.spec.tsx | 25 +++++++++++++++++++ webview-ui/src/components/ui/tooltip.tsx | 1 + webview-ui/src/index.css | 6 +++++ 3 files changed, 32 insertions(+) diff --git a/webview-ui/src/components/ui/__tests__/tooltip.spec.tsx b/webview-ui/src/components/ui/__tests__/tooltip.spec.tsx index e1cb6195452f..26f1a53afb98 100644 --- a/webview-ui/src/components/ui/__tests__/tooltip.spec.tsx +++ b/webview-ui/src/components/ui/__tests__/tooltip.spec.tsx @@ -80,6 +80,31 @@ describe("Tooltip", () => { { timeout: 1000 }, ) }) + + it("should apply VSCode native shadow styling", async () => { + const user = userEvent.setup() + + render( + + + Hover me + Tooltip with shadow + + , + ) + + const trigger = screen.getByText("Hover me") + await user.hover(trigger) + + await waitFor( + () => { + const tooltips = screen.getAllByText("Tooltip with shadow") + const visibleTooltip = tooltips.find((el) => el.getAttribute("role") !== "tooltip") + expect(visibleTooltip).toHaveClass("shadow-[0_2px_8px_var(--color-vscode-widget-shadow)]") + }, + { timeout: 1000 }, + ) + }) }) describe("StandardTooltip", () => { diff --git a/webview-ui/src/components/ui/tooltip.tsx b/webview-ui/src/components/ui/tooltip.tsx index 7e0573b29386..61349743946c 100644 --- a/webview-ui/src/components/ui/tooltip.tsx +++ b/webview-ui/src/components/ui/tooltip.tsx @@ -31,6 +31,7 @@ function TooltipContent({ className={cn( "bg-vscode-editorHoverWidget-background outline outline-vscode-editorHoverWidget-border text-vscode-editorHoverWidget-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-sm px-2 py-1 text-xs text-balance", "max-w-[300px] break-words", + "shadow-[0_2px_8px_var(--color-vscode-widget-shadow)]", className, )} {...props}> diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index 7448fc1f0fa8..6115ba879842 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -139,6 +139,12 @@ --color-vscode-editorHoverWidget-foreground: var(--vscode-editorHoverWidget-foreground); --color-vscode-editorHoverWidget-background: var(--vscode-editorHoverWidget-background); --color-vscode-editorHoverWidget-border: var(--vscode-editorHoverWidget-border); + + /** + * VSCode tooltip shadow - matches native VSCode tooltip styling + * Uses a subtle shadow for better visibility and depth + */ + --color-vscode-widget-shadow: var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36)); } @layer base { From d64f82ed2f298fb75de02c1811fac89027bd91da Mon Sep 17 00:00:00 2001 From: cte Date: Wed, 27 Aug 2025 10:26:37 -0700 Subject: [PATCH 2/2] PR feedback --- .../components/ui/__tests__/tooltip.spec.tsx | 25 ------------------- webview-ui/src/index.css | 7 +----- 2 files changed, 1 insertion(+), 31 deletions(-) diff --git a/webview-ui/src/components/ui/__tests__/tooltip.spec.tsx b/webview-ui/src/components/ui/__tests__/tooltip.spec.tsx index 26f1a53afb98..e1cb6195452f 100644 --- a/webview-ui/src/components/ui/__tests__/tooltip.spec.tsx +++ b/webview-ui/src/components/ui/__tests__/tooltip.spec.tsx @@ -80,31 +80,6 @@ describe("Tooltip", () => { { timeout: 1000 }, ) }) - - it("should apply VSCode native shadow styling", async () => { - const user = userEvent.setup() - - render( - - - Hover me - Tooltip with shadow - - , - ) - - const trigger = screen.getByText("Hover me") - await user.hover(trigger) - - await waitFor( - () => { - const tooltips = screen.getAllByText("Tooltip with shadow") - const visibleTooltip = tooltips.find((el) => el.getAttribute("role") !== "tooltip") - expect(visibleTooltip).toHaveClass("shadow-[0_2px_8px_var(--color-vscode-widget-shadow)]") - }, - { timeout: 1000 }, - ) - }) }) describe("StandardTooltip", () => { diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css index 6115ba879842..ba7aeb576eea 100644 --- a/webview-ui/src/index.css +++ b/webview-ui/src/index.css @@ -131,6 +131,7 @@ --color-vscode-inputValidation-infoBorder: var(--vscode-inputValidation-infoBorder); --color-vscode-widget-border: var(--vscode-widget-border); + --color-vscode-widget-shadow: var(--vscode-widget-shadow); --color-vscode-textLink-foreground: var(--vscode-textLink-foreground); @@ -139,12 +140,6 @@ --color-vscode-editorHoverWidget-foreground: var(--vscode-editorHoverWidget-foreground); --color-vscode-editorHoverWidget-background: var(--vscode-editorHoverWidget-background); --color-vscode-editorHoverWidget-border: var(--vscode-editorHoverWidget-border); - - /** - * VSCode tooltip shadow - matches native VSCode tooltip styling - * Uses a subtle shadow for better visibility and depth - */ - --color-vscode-widget-shadow: var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36)); } @layer base {