From 9e1db476f19657caebed2fd7ab293b7eb826896a Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Thu, 14 Sep 2023 18:41:01 -0700
Subject: [PATCH] fix menu-item floating buttons that should only be displayed
 on hover (#1588)

fix menu-item floating buttons that should only be dis
played on hover
---
 .../ui/menu-item/components/MenuItem.tsx      | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/front/src/modules/ui/menu-item/components/MenuItem.tsx b/front/src/modules/ui/menu-item/components/MenuItem.tsx
index 3ec1e9b26..5cf09786c 100644
--- a/front/src/modules/ui/menu-item/components/MenuItem.tsx
+++ b/front/src/modules/ui/menu-item/components/MenuItem.tsx
@@ -1,4 +1,5 @@
-import type { MouseEvent } from 'react';
+import { type MouseEvent } from 'react';
+import styled from '@emotion/styled';
 
 import { FloatingIconButtonGroup } from '@/ui/button/components/FloatingIconButtonGroup';
 import { IconComponent } from '@/ui/icon/types/IconComponent';
@@ -22,6 +23,17 @@ export type MenuItemProps = {
   onClick?: () => void;
 };
 
+const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)`
+  & .hoverable-buttons {
+    display: none;
+  }
+  &:hover {
+    & .hoverable-buttons {
+      display: block;
+    }
+  }
+`;
+
 export function MenuItem({
   LeftIcon,
   accent = 'default',
@@ -34,14 +46,18 @@ export function MenuItem({
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
   return (
-    <StyledMenuItemBase
+    <StyledHoverableMenuItemBase
       data-testid={testId ?? undefined}
       onClick={onClick}
       className={className}
       accent={accent}
     >
       <MenuItemLeftContent LeftIcon={LeftIcon ?? undefined} text={text} />
-      {showIconButtons && <FloatingIconButtonGroup iconButtons={iconButtons} />}
-    </StyledMenuItemBase>
+      <div className="hoverable-buttons">
+        {showIconButtons && (
+          <FloatingIconButtonGroup iconButtons={iconButtons} />
+        )}
+      </div>
+    </StyledHoverableMenuItemBase>
   );
 }