From f45277a2ebc3ebaeb477dbe522f71ab910c51b06 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Wed, 5 Feb 2025 16:53:45 -0300 Subject: [PATCH] chore: add Tooltip component (#16444) Based on https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=489-4332&m=dev Screenshot 2025-02-05 at 10 45 27 --- site/package.json | 1 + site/pnpm-lock.yaml | 36 +++++++++++++++++++ .../components/Tooltip/Tooltip.stories.tsx | 32 +++++++++++++++++ site/src/components/Tooltip/Tooltip.tsx | 34 ++++++++++++++++++ 4 files changed, 103 insertions(+) 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 a43eebb083..892e1d50a0 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", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index 4fdb128bd4..62ae51082e 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 0000000000..68561b6a18 --- /dev/null +++ b/site/src/components/Tooltip/Tooltip.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Button } from "components/Button/Button"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "./Tooltip"; + +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 0000000000..52f31299f1 --- /dev/null +++ b/site/src/components/Tooltip/Tooltip.tsx @@ -0,0 +1,34 @@ +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 { 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) => ( + + + +));