add tooltip to button component

thunderstore-io · Oct 16, 2023 · 7dcfdca · 7dcfdca
1 parent 189871a
commit 7dcfdca
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/apps/cyberstorm-storybook/stories/components/Button.stories.tsx b/apps/cyberstorm-storybook/stories/components/Button.stories.tsx
@@ -9,7 +9,9 @@ const meta = {
   component: Button.Root,
 } as Meta<typeof Button.Root>;
 
-const defaultArgs = {};
+const defaultArgs = {
+  tooltipText: "tooltip text",
+};
 
 const Template: StoryFn<typeof Button> = (args) => (
   <div

diff --git a/packages/cyberstorm/src/components/Button/Button.tsx b/packages/cyberstorm/src/components/Button/Button.tsx
@@ -6,6 +6,8 @@ import React, {
   useRef,
 } from "react";
 import styles from "./Button.module.css";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "../Tooltip/Tooltip";
 
 export interface ButtonProps {
   children?: ReactNode | ReactNode[];
@@ -39,6 +41,7 @@ export interface ButtonProps {
   onMouseOut?: MouseEventHandler<HTMLElement>;
   style?: { [key: string]: string };
   type?: "button" | "submit" | "reset";
+  tooltipText?: string;
 }
 
 /**
@@ -56,6 +59,7 @@ const Button = React.forwardRef<
     onClick,
     paddingSize = "medium",
     iconAlignment = "default",
+    tooltipText,
     ...forwardedProps
   } = props;
 
@@ -79,17 +83,21 @@ const Button = React.forwardRef<
     const fRef = forwardedRef as React.ForwardedRef<HTMLButtonElement>;
     const ref = fRef || fallbackRef;
     return (
-      <button
-        {...forwardedProps}
-        ref={ref}
-        type={type}
-        className={`${styles.root} ${getIconAlignment(
-          iconAlignment
-        )} ${getStyle(colorScheme)} ${getPaddingSize(paddingSize)}`}
-        onClick={onClick}
-      >
-        {children}
-      </button>
+      <TooltipProvider>
+        <Tooltip content={tooltipText}>
+          <button
+            {...forwardedProps}
+            ref={ref}
+            type={type}
+            className={`${styles.root} ${getIconAlignment(
+              iconAlignment
+            )} ${getStyle(colorScheme)} ${getPaddingSize(paddingSize)}`}
+            onClick={onClick}
+          >
+            {children}
+          </button>
+        </Tooltip>
+      </TooltipProvider>
     );
   }
 });