From 59c5e23e4179f96a358d0ca08e059997e33801ac Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Wed, 6 Nov 2024 10:21:45 +0100
Subject: [PATCH] [sparkle] - feature: add tooltips to Button component

 - Extract button rendering into a separate element to support wrapping with tooltip
 - Wrap disabled buttons with tooltip triggers and content using Radix UI
 - Include new story examples to showcase buttons with tooltips in action
---
 sparkle/src/components/Button.tsx      | 57 +++++++++++++++-----------
 sparkle/src/stories/Button.stories.tsx | 16 ++++++++
 2 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/sparkle/src/components/Button.tsx b/sparkle/src/components/Button.tsx
index a4a806ce40d55..5cc456742773c 100644
--- a/sparkle/src/components/Button.tsx
+++ b/sparkle/src/components/Button.tsx
@@ -1,4 +1,5 @@
 import { Slot } from "@radix-ui/react-slot";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
@@ -160,6 +161,26 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
 
     const buttonElement = (
+      <MetaButton
+        ref={ref}
+        size={buttonSize}
+        variant={variant}
+        disabled={isLoading || props.disabled}
+        className={isPulsing ? "s-animate-pulse" : ""}
+        aria-label={ariaLabel || tooltip || label}
+        style={
+          {
+            "--pulse-color": "#93C5FD",
+            "--duration": "1.5s",
+          } as React.CSSProperties
+        }
+        {...props}
+      >
+        {content}
+      </MetaButton>
+    );
+
+    const wrappedButton = href ? (
       <LinkWrapper
         href={href}
         target={target}
@@ -167,37 +188,25 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         replace={replace}
         shallow={shallow}
       >
-        <MetaButton
-          ref={ref}
-          size={buttonSize}
-          variant={variant}
-          disabled={isLoading || props.disabled}
-          className={isPulsing ? "s-animate-pulse" : ""}
-          aria-label={ariaLabel || tooltip || label}
-          style={
-            {
-              "--pulse-color": "#93C5FD",
-              "--duration": "1.5s",
-            } as React.CSSProperties
-          }
-          {...props}
-        >
-          {content}
-        </MetaButton>
+        {buttonElement}
       </LinkWrapper>
+    ) : (
+      buttonElement
     );
 
-    return tooltip ? (
+    if (!tooltip) {
+      return wrappedButton;
+    }
+
+    return (
       <TooltipProvider>
         <TooltipRoot>
-          <TooltipTrigger asChild ref={ref}>
-            {buttonElement}
-          </TooltipTrigger>
-          <TooltipContent>{tooltip}</TooltipContent>
+          <TooltipTrigger asChild>{wrappedButton}</TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent>{tooltip}</TooltipContent>
+          </TooltipPortal>
         </TooltipRoot>
       </TooltipProvider>
-    ) : (
-      buttonElement
     );
   }
 );
diff --git a/sparkle/src/stories/Button.stories.tsx b/sparkle/src/stories/Button.stories.tsx
index ef82d09c20077..5db924855d63a 100644
--- a/sparkle/src/stories/Button.stories.tsx
+++ b/sparkle/src/stories/Button.stories.tsx
@@ -95,3 +95,19 @@ export const DisabledButtonExample = () => (
     <Button icon={RobotIcon} variant="outline" isSelect disabled={true} />
   </div>
 );
+
+export const TooltipButtonExample = () => (
+  <div className="s-flex s-items-center s-gap-4">
+    <Button
+      tooltip="This is a tooltip message"
+      icon={RobotIcon}
+      variant="outline"
+    />
+    <Button
+      tooltip="This shouldn't be visible"
+      icon={RobotIcon}
+      variant="outline"
+      disabled
+    />
+  </div>
+);