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
2025-06-12 14:14:21 +02:00
parent a189f15313
commit cf01faf276
31 changed files with 755 additions and 291 deletions
@@ -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>
+  );
+};