[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
dust-tt · Nov 6, 2024 · 59c5e23 · 59c5e23
1 parent 75f4160
commit 59c5e23
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 24 deletions.
diff --git 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,44 +161,52 @@ 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}
         rel={rel}
         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
@@ -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>
+);