feat: improve menuitem btn design (#3152)

feat: add LightIconButtonGroup

Co-authored-by: Charles Bochet <charles@twenty.com>

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>
+);

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>

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}
         />

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;
     }
   }
 `;