From a2feb8847cbf0742c00ec14f45c9de5c93506d7a Mon Sep 17 00:00:00 2001
From: Phoebe Lartisant <phoebelartisant@proton.me>
Date: Mon, 22 Apr 2024 16:24:45 +0200
Subject: [PATCH 1/2] Add Icon Button Hover

---
 src/components/Button/Button.stories.tsx |  4 +++
 src/components/Button/Button.tsx         | 33 ++++++++++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index c527e40a..f780d409 100644
--- 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
index b708cf9d..d871e70c 100644
--- 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?: string;
 }
 
 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>
   );

From 37c599c9bc9fb6552a27b614dbb550f7ac0bd89f Mon Sep 17 00:00:00 2001
From: Phoebe Lartisant <phoebelartisant@proton.me>
Date: Tue, 23 Apr 2024 09:51:30 +0200
Subject: [PATCH 2/2] review changes

---
 src/components/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index d871e70c..f27bec6c 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -13,7 +13,7 @@ export interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
   pressed?: boolean;
   variant?: 'secondary' | 'primary' | 'danger' | 'toggle' | 'icon' | undefined;
   customClass?: string;
-  hoverText?: string;
+  hoverText?: ReactNode;
 }
 
 export function ButtonToggle(props: ButtonProps) {