From f36fa9aa147f216537ad3a51bec2913b0988a957 Mon Sep 17 00:00:00 2001
From: "Cao Z.H" <150761799+CzhCN0@users.noreply.github.com>
Date: Thu, 4 Jan 2024 06:15:38 +0800
Subject: [PATCH] feat: improve menuitem btn design (#3152)

feat: add LightIconButtonGroup

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../components/LightIconButtonGroup.tsx       | 41 +++++++++++++++++++
 .../menu-item/components/MenuItem.tsx         |  4 +-
 .../components/MenuItemDraggable.tsx          |  4 +-
 .../components/StyledMenuItemBase.tsx         |  5 +++
 4 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx

diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx
new file mode 100644
index 0000000000..79539483cf
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx
@@ -0,0 +1,41 @@
+import { MouseEvent } from 'react';
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+
+import { LightIconButton, LightIconButtonProps } from './LightIconButton';
+
+const StyledLightIconButtonGroupContainer = styled.div`
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+`;
+
+export type LightIconButtonGroupProps = Pick<
+  LightIconButtonProps,
+  'className' | 'size'
+> & {
+  iconButtons: {
+    Icon: IconComponent;
+    onClick?: (event: MouseEvent<any>) => void;
+  }[];
+};
+
+export const LightIconButtonGroup = ({
+  iconButtons,
+  size,
+  className,
+}: LightIconButtonGroupProps) => (
+  <StyledLightIconButtonGroupContainer className={className}>
+    {iconButtons.map(({ Icon, onClick }, index) => {
+      return (
+        <LightIconButton
+          key={`light-icon-button-${index}`}
+          Icon={Icon}
+          onClick={onClick}
+          size={size}
+        />
+      );
+    })}
+  </StyledLightIconButtonGroupContainer>
+);
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
index 1ac5197a0e..77e479df4d 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
@@ -1,7 +1,7 @@
 import { MouseEvent } from 'react';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { FloatingIconButtonGroup } from '@/ui/input/button/components/FloatingIconButtonGroup';
+import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
@@ -59,7 +59,7 @@ export const MenuItem = ({
       </StyledMenuItemLeftContent>
       <div className="hoverable-buttons">
         {showIconButtons && (
-          <FloatingIconButtonGroup iconButtons={iconButtons} size="small" />
+          <LightIconButtonGroup iconButtons={iconButtons} size="small" />
         )}
       </div>
     </StyledHoverableMenuItemBase>
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
index 6182771f89..185a58cb09 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
@@ -1,5 +1,5 @@
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-import { FloatingIconButtonGroup } from '@/ui/input/button/components/FloatingIconButtonGroup';
+import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
@@ -42,7 +42,7 @@ export const MenuItemDraggable = ({
         showGrip={!isDragDisabled}
       />
       {showIconButtons && (
-        <FloatingIconButtonGroup
+        <LightIconButtonGroup
           className="hoverable-buttons"
           iconButtons={iconButtons}
         />
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
index 1ee4624834..2291eec5f1 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
@@ -91,6 +91,10 @@ export const StyledMenuItemLeftContent = styled.div`
   gap: ${({ theme }) => theme.spacing(2)};
   min-width: 0;
   width: 100%;
+
+  & > svg {
+    flex-shrink: 0;
+  }
 `;
 
 export const StyledMenuItemRightContent = styled.div`
@@ -114,6 +118,7 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
     & .hoverable-buttons {
       opacity: 1;
       pointer-events: auto;
+      position: static;
     }
   }
 `;