From fc59e89ec46947756ffea8d27b9338753268656c Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 5 Feb 2025 13:44:30 +0000 Subject: [PATCH 1/3] chore: add Tooltip component --- site/package.json | 7 +++- site/pnpm-lock.yaml | 36 +++++++++++++++++++ .../components/Tooltip/Tooltip.stories.tsx | 32 +++++++++++++++++ site/src/components/Tooltip/Tooltip.tsx | 34 ++++++++++++++++++ 4 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 site/src/components/Tooltip/Tooltip.stories.tsx create mode 100644 site/src/components/Tooltip/Tooltip.tsx diff --git a/site/package.json b/site/package.json index a43eebb0833f6..845cf38544064 100644 --- a/site/package.json +++ b/site/package.json @@ -60,6 +60,7 @@ "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.1", + "@radix-ui/react-tooltip": "1.1.7", "@radix-ui/react-visually-hidden": "1.1.0", "@tanstack/react-query-devtools": "4.35.3", "@xterm/addon-canvas": "0.7.0", @@ -188,7 +189,11 @@ "vite-plugin-checker": "0.8.0", "vite-plugin-turbosnap": "1.0.3" }, - "browserslist": ["chrome 110", "firefox 111", "safari 16.0"], + "browserslist": [ + "chrome 110", + "firefox 111", + "safari 16.0" + ], "resolutions": { "optionator": "0.9.3", "semver": "7.6.2" diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index 4fdb128bd4d89..62ae51082e96a 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -90,6 +90,9 @@ importers: '@radix-ui/react-switch': specifier: 1.1.1 version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-tooltip': + specifier: 1.1.7 + version: 1.1.7(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-visually-hidden': specifier: 1.1.0 version: 1.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -1917,6 +1920,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-tooltip@1.1.7': + resolution: {integrity: sha512-ss0s80BC0+g0+Zc53MvilcnTYSOi4mSuFWBPYPuTOFGjx+pUU+ZrmamMNwS56t8MTFlniA5ocjd4jYm/CdhbOg==, tarball: https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.7.tgz} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-use-callback-ref@1.1.0': resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==, tarball: https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz} peerDependencies: @@ -7975,6 +7991,26 @@ snapshots: '@types/react': 18.3.12 '@types/react-dom': 18.3.1 + '@radix-ui/react-tooltip@1.1.7(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/primitive': 1.1.1 + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.1.4(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-id': 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-popper': 1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-portal': 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': 1.1.1(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.12)(react@18.3.1) + '@radix-ui/react-visually-hidden': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.12 + '@types/react-dom': 18.3.1 + '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.3.12)(react@18.3.1)': dependencies: react: 18.3.1 diff --git a/site/src/components/Tooltip/Tooltip.stories.tsx b/site/src/components/Tooltip/Tooltip.stories.tsx new file mode 100644 index 0000000000000..8812d63d4fbc8 --- /dev/null +++ b/site/src/components/Tooltip/Tooltip.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "./Tooltip"; +import { Button } from "components/Button/Button"; + +const meta: Meta = { + title: "components/Tooltip", + component: TooltipProvider, + args: { + children: ( + <> + + + + + + Add to library + + + + ), + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/site/src/components/Tooltip/Tooltip.tsx b/site/src/components/Tooltip/Tooltip.tsx new file mode 100644 index 0000000000000..3b8c8c1aee4b3 --- /dev/null +++ b/site/src/components/Tooltip/Tooltip.tsx @@ -0,0 +1,34 @@ +/** + * Copied from shadc/ui on 02/05/2025 + * @see {@link https://ui.shadcn.com/docs/components/tooltip} + */ +import * as React from "react"; +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; +import { cn } from "utils/cn"; + +export const TooltipProvider = TooltipPrimitive.Provider; + +export const Tooltip = TooltipPrimitive.Root; + +export const TooltipTrigger = TooltipPrimitive.Trigger; + +export const TooltipContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + + + +)); From 77de8f5f04fdf2ded989e632d93d4c7a39db194d Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 5 Feb 2025 13:49:36 +0000 Subject: [PATCH 2/3] Run fmt --- site/package.json | 6 +----- site/src/components/Tooltip/Tooltip.stories.tsx | 2 +- site/src/components/Tooltip/Tooltip.tsx | 2 +- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/site/package.json b/site/package.json index 845cf38544064..892e1d50a005f 100644 --- a/site/package.json +++ b/site/package.json @@ -189,11 +189,7 @@ "vite-plugin-checker": "0.8.0", "vite-plugin-turbosnap": "1.0.3" }, - "browserslist": [ - "chrome 110", - "firefox 111", - "safari 16.0" - ], + "browserslist": ["chrome 110", "firefox 111", "safari 16.0"], "resolutions": { "optionator": "0.9.3", "semver": "7.6.2" diff --git a/site/src/components/Tooltip/Tooltip.stories.tsx b/site/src/components/Tooltip/Tooltip.stories.tsx index 8812d63d4fbc8..68561b6a189e3 100644 --- a/site/src/components/Tooltip/Tooltip.stories.tsx +++ b/site/src/components/Tooltip/Tooltip.stories.tsx @@ -1,11 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react"; +import { Button } from "components/Button/Button"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./Tooltip"; -import { Button } from "components/Button/Button"; const meta: Meta = { title: "components/Tooltip", diff --git a/site/src/components/Tooltip/Tooltip.tsx b/site/src/components/Tooltip/Tooltip.tsx index 3b8c8c1aee4b3..93c91559283bd 100644 --- a/site/src/components/Tooltip/Tooltip.tsx +++ b/site/src/components/Tooltip/Tooltip.tsx @@ -1,9 +1,9 @@ +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; /** * Copied from shadc/ui on 02/05/2025 * @see {@link https://ui.shadcn.com/docs/components/tooltip} */ import * as React from "react"; -import * as TooltipPrimitive from "@radix-ui/react-tooltip"; import { cn } from "utils/cn"; export const TooltipProvider = TooltipPrimitive.Provider; From 924623d475c5f4139d78015d246ae9787f149c26 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Wed, 5 Feb 2025 18:57:23 +0000 Subject: [PATCH 3/3] Update bg color --- site/src/components/Tooltip/Tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/Tooltip/Tooltip.tsx b/site/src/components/Tooltip/Tooltip.tsx index 93c91559283bd..52f31299f1721 100644 --- a/site/src/components/Tooltip/Tooltip.tsx +++ b/site/src/components/Tooltip/Tooltip.tsx @@ -21,7 +21,7 @@ export const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 overflow-hidden rounded-md bg-primary px-3 py-2 text-xs font-medium text-content-secondary", + "z-50 overflow-hidden rounded-md bg-surface-primary px-3 py-2 text-xs font-medium text-content-secondary", "border border-solid border-border 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",