965 flow control arrow menu 1/3 add insert step button (#12519)

Add insert step button to workflow edges



https://github.com/user-attachments/assets/7144f722-f1c7-450f-a8eb-c902071986a1



Also fixes `iconButtonGroup` UI component

## Before


https://github.com/user-attachments/assets/7b5f0245-d0e8-48af-9aa5-a29388a1caea


## After



https://github.com/user-attachments/assets/1820874f-aa99-41ae-8254-c76c275ee3ae

packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx

@@ -2,17 +2,10 @@ import styled from '@emotion/styled';
 import { IconComponent } from '@ui/display';
 import { MouseEvent } from 'react';
 
-import { IconButton, IconButtonPosition, IconButtonProps } from './IconButton';
+import { InsideButton } from '@ui/input/button/components/InsideButton';
 
-const StyledIconButtonGroupContainer = styled.div`
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  display: flex;
-`;
-
-export type IconButtonGroupProps = Pick<
-  IconButtonProps,
-  'accent' | 'size' | 'variant'
-> & {
+export type IconButtonGroupProps = {
+  disabled?: boolean;
   iconButtons: {
     Icon: IconComponent;
     onClick?: (event: MouseEvent<any>) => void;
@@ -20,31 +13,36 @@ export type IconButtonGroupProps = Pick<
   className?: string;
 };
 
+const StyledIconButtonGroupContainer = styled.div<
+  Pick<IconButtonGroupProps, 'disabled'>
+>`
+  display: inline-flex;
+  align-items: flex-start;
+  background-color: ${({ disabled, theme }) =>
+    disabled ? 'inherit' : theme.background.transparent.lighter};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  gap: 2px;
+  padding: 2px;
+  backdrop-filter: blur(20px);
+
+  &:hover {
+    box-shadow: ${({ theme }) => theme.boxShadow.light};
+  }
+`;
+
 export const IconButtonGroup = ({
-  accent,
   iconButtons,
-  size,
-  variant,
+  disabled,
   className,
 }: IconButtonGroupProps) => (
-  <StyledIconButtonGroupContainer className={className}>
+  <StyledIconButtonGroupContainer className={className} disabled={disabled}>
     {iconButtons.map(({ Icon, onClick }, index) => {
-      const position: IconButtonPosition =
-        index === 0
-          ? 'left'
-          : index === iconButtons.length - 1
-            ? 'right'
-            : 'middle';
-
       return (
-        <IconButton
+        <InsideButton
           key={index}
-          accent={accent}
           Icon={Icon}
           onClick={onClick}
-          position={position}
-          size={size}
-          variant={variant}
+          disabled={disabled}
         />
       );
     })}

packages/twenty-ui/src/input/button/components/InsideButton.tsx

@@ -0,0 +1,47 @@
+import { IconComponent } from '@ui/display';
+import styled from '@emotion/styled';
+import React from 'react';
+import { useTheme } from '@emotion/react';
+
+export type InsideButtonProps = {
+  className?: string;
+  Icon?: IconComponent;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+};
+
+const StyledButton = styled.button`
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  color: ${({ theme }) => theme.font.color.tertiary};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  flex-direction: row;
+  height: 20px;
+  justify-content: center;
+  padding: 0;
+  white-space: nowrap;
+  min-width: 20px;
+  transition: background-color 0.1s ease;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.background.transparent.light};
+  }
+`;
+
+export const InsideButton = ({
+  className,
+  Icon,
+  onClick,
+  disabled = false,
+}: InsideButtonProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledButton className={className} onClick={onClick} disabled={disabled}>
+      {Icon && <Icon size={theme.icon.size.sm} />}
+    </StyledButton>
+  );
+};

packages/twenty-ui/src/input/button/components/__stories__/IconButtonGroup.stories.tsx

@@ -5,11 +5,7 @@ import {
   CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
-import {
-  IconButtonAccent,
-  IconButtonSize,
-  IconButtonVariant,
-} from '../IconButton';
+
 import { IconButtonGroup } from '../IconButtonGroup';
 
 const meta: Meta<typeof IconButtonGroup> = {
@@ -32,40 +28,22 @@ type Story = StoryObj<typeof IconButtonGroup>;
 
 export const Default: Story = {
   args: {
-    size: 'small',
-    variant: 'primary',
-    accent: 'danger',
+    disabled: false,
   },
   decorators: [ComponentDecorator],
 };
 
 export const Catalog: CatalogStory<Story, typeof IconButtonGroup> = {
   argTypes: {
-    size: { control: false },
-    variant: { control: false },
-    accent: { control: false },
+    disabled: { control: false },
   },
   parameters: {
     catalog: {
       dimensions: [
         {
-          name: 'sizes',
-          values: ['small', 'medium'] satisfies IconButtonSize[],
-          props: (size: IconButtonSize) => ({ size }),
-        },
-        {
-          name: 'accents',
-          values: ['default', 'blue', 'danger'] satisfies IconButtonAccent[],
-          props: (accent: IconButtonAccent) => ({ accent }),
-        },
-        {
-          name: 'variants',
-          values: [
-            'primary',
-            'secondary',
-            'tertiary',
-          ] satisfies IconButtonVariant[],
-          props: (variant: IconButtonVariant) => ({ variant }),
+          name: 'disabled',
+          values: [true, false],
+          props: (disabled: boolean) => ({ disabled }),
         },
       ],
     },

packages/twenty-ui/src/input/index.ts

@@ -49,6 +49,8 @@ export type {
 export { IconButton } from './button/components/IconButton';
 export type { IconButtonGroupProps } from './button/components/IconButtonGroup';
 export { IconButtonGroup } from './button/components/IconButtonGroup';
+export type { InsideButtonProps } from './button/components/InsideButton';
+export { InsideButton } from './button/components/InsideButton';
 export type {
   LightButtonAccent,
   LightButtonProps,