Merge pull request #74 from LerianStudio/feature/tooltip

♻️ Updated Tooltip design
LerianStudio · Dec 6, 2024 · 0e81ba5 · 0e81ba5
2 parents 6a6681e + 8a115b2
commit 0e81ba5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/src/app/(auth-routes)/signin/page.tsx b/src/app/(auth-routes)/signin/page.tsx
@@ -137,17 +137,13 @@ const SignInPage = () => {
                             })}
                           </span>
                         </TooltipTrigger>
-                        <TooltipContent
-                          className="border-none bg-shadcn-600"
-                          arrowPadding={0}
-                        >
-                          <p className="text-shadcn-400">
+                        <TooltipContent>
+                          <p>
                             {intl.formatMessage({
                               id: 'tooltip.passwordInfo',
                               defaultMessage: 'Contact the system administrator'
                             })}
                           </p>
-                          <Arrow height={8} width={15} />
                         </TooltipContent>
                       </Tooltip>
                     </TooltipProvider>

diff --git a/src/components/ui/tooltip/index.tsx b/src/components/ui/tooltip/index.tsx
@@ -14,16 +14,19 @@ const TooltipTrigger = TooltipPrimitive.Trigger
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, children, ...props }, ref) => (
   <TooltipPrimitive.Content
     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',
+      'z-50 rounded-md bg-shadcn-600 px-3 py-1.5 text-sm text-shadcn-400 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
     )}
     {...props}
-  />
+  >
+    {children}
+    <TooltipPrimitive.TooltipArrow />
+  </TooltipPrimitive.Content>
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 

diff --git a/src/components/ui/tooltip/tooltip.stories.tsx b/src/components/ui/tooltip/tooltip.stories.tsx
@@ -16,11 +16,11 @@ export const Primary: StoryObj<TooltipProps> = {
     <TooltipProvider>
       <Tooltip {...args}>
         <TooltipTrigger asChild>
-          <Button variant="outline">Hover</Button>
+          <Button className="mt-6" variant="outline">
+            Hover
+          </Button>
         </TooltipTrigger>
-        <TooltipContent>
-          <p>Add to library</p>
-        </TooltipContent>
+        <TooltipContent>Add to library</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   )
@@ -34,7 +34,9 @@ export const WithoutDelay: StoryObj<TooltipProps> = {
     <TooltipProvider>
       <Tooltip {...args}>
         <TooltipTrigger asChild>
-          <Button variant="outline">Hover</Button>
+          <Button className="mt-6" variant="outline">
+            Hover
+          </Button>
         </TooltipTrigger>
         <TooltipContent>
           <p>Add to library</p>
@@ -46,7 +48,7 @@ export const WithoutDelay: StoryObj<TooltipProps> = {
 
 export const WithSides: StoryObj<TooltipProps> = {
   render: (args) => (
-    <div className="flex flex-row gap-12">
+    <div className="m-6 flex flex-row gap-12">
       <TooltipProvider>
         <Tooltip {...args}>
           <TooltipTrigger asChild>