From 71f4b771df34f5627462347f8ad324a04d861f62 Mon Sep 17 00:00:00 2001 From: Simon Farshid Date: Sun, 4 Aug 2024 10:25:18 -0700 Subject: [PATCH] feat: update Tooltip styles (#640) --- .changeset/thick-hounds-jam.md | 5 ++++ apps/docs/components/ui/tooltip.tsx | 24 +++++++++---------- .../components/ui/tooltip.tsx | 4 ++-- examples/with-react-hook-form/package.json | 2 +- .../components/ui/tooltip.tsx | 2 +- .../src/components/ui/tooltip.tsx | 2 +- .../styles/tailwindcss/base-components.css | 2 +- .../shadcn-registry/components/ui/tooltip.tsx | 2 +- pnpm-lock.yaml | 10 ++++---- 9 files changed, 29 insertions(+), 24 deletions(-) create mode 100644 .changeset/thick-hounds-jam.md diff --git a/.changeset/thick-hounds-jam.md b/.changeset/thick-hounds-jam.md new file mode 100644 index 000000000..324f8eec5 --- /dev/null +++ b/.changeset/thick-hounds-jam.md @@ -0,0 +1,5 @@ +--- +"@assistant-ui/react": patch +--- + +feat: update Tooltip styles diff --git a/apps/docs/components/ui/tooltip.tsx b/apps/docs/components/ui/tooltip.tsx index 9e7482103..1062109d3 100644 --- a/apps/docs/components/ui/tooltip.tsx +++ b/apps/docs/components/ui/tooltip.tsx @@ -1,15 +1,15 @@ -"use client" +"use client"; -import * as React from "react" -import * as TooltipPrimitive from "@radix-ui/react-tooltip" +import * as React from "react"; +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -const TooltipProvider = TooltipPrimitive.Provider +const TooltipProvider = TooltipPrimitive.Provider; -const Tooltip = TooltipPrimitive.Root +const Tooltip = TooltipPrimitive.Root; -const TooltipTrigger = TooltipPrimitive.Trigger +const TooltipTrigger = TooltipPrimitive.Trigger; const TooltipContent = React.forwardRef< React.ElementRef, @@ -19,12 +19,12 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-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", - className + "bg-popover text-popover-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 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md", + className, )} {...props} /> -)) -TooltipContent.displayName = TooltipPrimitive.Content.displayName +)); +TooltipContent.displayName = TooltipPrimitive.Content.displayName; -export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; diff --git a/examples/with-inline-suggestions/components/ui/tooltip.tsx b/examples/with-inline-suggestions/components/ui/tooltip.tsx index a4e545205..1062109d3 100644 --- a/examples/with-inline-suggestions/components/ui/tooltip.tsx +++ b/examples/with-inline-suggestions/components/ui/tooltip.tsx @@ -19,8 +19,8 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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", - className + "bg-popover text-popover-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 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md", + className, )} {...props} /> diff --git a/examples/with-react-hook-form/package.json b/examples/with-react-hook-form/package.json index 5fcbcb9cb..fb12c99df 100644 --- a/examples/with-react-hook-form/package.json +++ b/examples/with-react-hook-form/package.json @@ -22,7 +22,7 @@ "@react-hook/media-query": "^1.1.1", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", - "json-schema-to-zod": "^2.3.1", + "json-schema-to-zod": "^2.4.0", "lucide-react": "^0.424.0", "next": "14.2.5", "react": "^18", diff --git a/examples/with-vercel-ai-rsc/components/ui/tooltip.tsx b/examples/with-vercel-ai-rsc/components/ui/tooltip.tsx index 6725c8b95..b1aa553d8 100644 --- a/examples/with-vercel-ai-rsc/components/ui/tooltip.tsx +++ b/examples/with-vercel-ai-rsc/components/ui/tooltip.tsx @@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "fade-in-0 zoom-in-95 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 animate-in bg-primary text-primary-foreground data-[state=closed]:animate-out z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs", + "bg-popover text-popover-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 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md", className, )} {...props} diff --git a/packages/react-playground/src/components/ui/tooltip.tsx b/packages/react-playground/src/components/ui/tooltip.tsx index 113beb9ec..1be808571 100644 --- a/packages/react-playground/src/components/ui/tooltip.tsx +++ b/packages/react-playground/src/components/ui/tooltip.tsx @@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "bg-aui-popover text-aui-popover-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 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md", + "bg-popover text-popover-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 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md", className, )} {...props} diff --git a/packages/react/src/styles/tailwindcss/base-components.css b/packages/react/src/styles/tailwindcss/base-components.css index 863dfd74b..a954c9787 100644 --- a/packages/react/src/styles/tailwindcss/base-components.css +++ b/packages/react/src/styles/tailwindcss/base-components.css @@ -49,5 +49,5 @@ /* shadcn-ui/tooltip */ .aui-tooltip-content { - @apply fade-in-0 zoom-in-95 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 animate-in bg-aui-primary text-aui-primary-foreground data-[state=closed]:animate-out z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs; + @apply bg-aui-popover text-aui-popover-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 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md; } diff --git a/packages/shadcn-registry/components/ui/tooltip.tsx b/packages/shadcn-registry/components/ui/tooltip.tsx index 6725c8b95..b1aa553d8 100644 --- a/packages/shadcn-registry/components/ui/tooltip.tsx +++ b/packages/shadcn-registry/components/ui/tooltip.tsx @@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "fade-in-0 zoom-in-95 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 animate-in bg-primary text-primary-foreground data-[state=closed]:animate-out z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs", + "bg-popover text-popover-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 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md", className, )} {...props} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 842827387..67dc74ba5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -528,8 +528,8 @@ importers: specifier: ^2.1.1 version: 2.1.1 json-schema-to-zod: - specifier: ^2.3.1 - version: 2.3.1 + specifier: ^2.4.0 + version: 2.4.0 lucide-react: specifier: ^0.424.0 version: 0.424.0(react@18.3.1) @@ -4303,8 +4303,8 @@ packages: json-parse-even-better-errors@2.3.1: resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} - json-schema-to-zod@2.3.1: - resolution: {integrity: sha512-mxj4nDqbh6H0PPslVwG8z0w9uvckSyin/j4BMD818l/3E1Ie4L6x77itCVJ29ejZI67cUgBoZGsUB69WGc6b/g==} + json-schema-to-zod@2.4.0: + resolution: {integrity: sha512-3T+eBPrG43VB5nYrmQFjoh9+EwzgVeNuJmqm6/m/9khqVlahFULUjzQ8Nu4jelgeTEJSm2ALDy5KDDqk1Y7xlg==} hasBin: true json-schema-traverse@0.4.1: @@ -9579,7 +9579,7 @@ snapshots: json-parse-even-better-errors@2.3.1: {} - json-schema-to-zod@2.3.1: {} + json-schema-to-zod@2.4.0: {} json-schema-traverse@0.4.1: {}