From 7dcfdcaad615f01bf145ae2ada1f76f8d6790e31 Mon Sep 17 00:00:00 2001
From: Cyanideankst <lauri.soisalo@teklity.com>
Date: Tue, 17 Oct 2023 01:30:32 +0300
Subject: [PATCH] add tooltip to button component

---
 .../stories/components/Button.stories.tsx     |  4 ++-
 .../src/components/Button/Button.tsx          | 30 ++++++++++++-------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/cyberstorm-storybook/stories/components/Button.stories.tsx b/apps/cyberstorm-storybook/stories/components/Button.stories.tsx
index d590de25e..b349488c2 100644
--- 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
index df7e21048..6087cddfc 100644
--- 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>
     );
   }
 });