Add Icon Button Hover (#411)

* Add Icon Button Hover * review changes
massalabs · Apr 23, 2024 · 64efae9 · 64efae9
1 parent 2a3fd13
commit 64efae9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -150,6 +150,10 @@ export const _Icon = {
       <Button variant="icon" model="border">
         <FiDisc color={colorWarning} />
       </Button>
+      &nbsp;
+      <Button hoverText="this is a hovered icon" variant="icon" model="border">
+        <FiDisc color={colorWarning} />
+      </Button>
       <br />
       <br />
       <Button variant="icon" model="border" disabled>

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import React from 'react';
+import React, { useState } from 'react';
 
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 import { IconContext } from 'react-icons/lib';
@@ -13,6 +13,7 @@ export interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
   pressed?: boolean;
   variant?: 'secondary' | 'primary' | 'danger' | 'toggle' | 'icon' | undefined;
   customClass?: string;
+  hoverText?: ReactNode;
 }
 
 export function ButtonToggle(props: ButtonProps) {
@@ -35,7 +36,17 @@ export function ButtonToggle(props: ButtonProps) {
 }
 
 export function ButtonIcon(props: ButtonProps) {
-  const { children, model = 'single', customClass = '', ...rest } = props;
+  const {
+    children,
+    model = 'single',
+    customClass = '',
+    hoverText,
+    ...rest
+  } = props;
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const showHoverText = hoverText && isHovered;
 
   const models: Models = {
     border:
@@ -53,8 +64,26 @@ export function ButtonIcon(props: ButtonProps) {
       data-testid="button"
       type="button"
       className={`default-button default-icon ${models[model]} ${customClass}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       {...rest}
     >
+      <div className="relative w-full flex justify-center items-center">
+        {showHoverText && (
+          <div
+            className="absolute text-primary top-[-44px] w-fit z-10 bg-neutral 
+          mas-caption rounded-md whitespace-nowrap"
+          >
+            <p className="w-fit py-1 px-2">{hoverText}</p>
+            <div className="absolute flex flex-col w-full items-center justify-center">
+              <div
+                className="w-0 h-0 border-4 border-solid border-neutral 
+              border-l-transparent border-r-transparent border-b-transparent"
+              ></div>
+            </div>
+          </div>
+        )}
+      </div>
       <div className="w-fit m-auto flex gap-2 items-baseline">{children}</div>
     </button>
   );