Improve the design of workflow nodes #9810

Devessier · 2025-01-23T10:47:11Z

Go over every node in the workflows and fix the styles to conform to Figma
Create stories for every node type

Devessier · 2025-01-23T10:48:25Z

...wenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx

+const NODE_HANDLE_WIDTH_PX = 4;
+const NODE_HANDLE_HEIGHT_PX = NODE_HANDLE_WIDTH_PX;
+export const NODE_ICON_WIDTH = Number(
+  THEME_COMMON.spacing(6).replace('px', ''),
+);
+export const NODE_ICON_LEFT_MARGIN = Number(
+  THEME_COMMON.spacing(2).replace('px', ''),
+);
+export const NODE_BORDER_WIDTH = 1;


I don't really know where to put these constants.

why not in a separated file in workflow-diagram/constants/

greptile-apps

PR Summary

This PR enhances workflow node design with improved styling consistency and component organization.

Standardized icon sizes across nodes using theme.icon.size.md instead of hardcoded values in /packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx
Added constants for node dimensions and spacing (NODE_HANDLE_WIDTH_PX, NODE_ICON_WIDTH) for better maintainability
Improved visual hierarchy with refined font sizes (9px for node type, 13px for label) and box shadow styling
Created new WorkflowDiagramStepNodeEditableContent component for better separation of concerns with delete functionality
Added comprehensive Storybook stories showcasing different workflow node states and configurations

_{9 file(s) reviewed, 6 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-01-23T10:48:01Z

...nty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx

+  transform: translateX(-50%);
  position: relative;
+  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;


style: Using both transform: translateX(-50%) and explicit left positioning could lead to unexpected positioning behavior. Consider using one or the other.

greptile-apps · 2025-01-23T10:48:11Z

...wenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx

+const StyledTargetHandle = styled(StyledSourceHandle)`
+  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
  visibility: hidden;


style: StyledTargetHandle duplicates the left position from StyledSourceHandle unnecessarily since it inherits from it

greptile-apps · 2025-01-23T10:48:47Z

.../src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditableContent.tsx

+          <FloatingIconButton
+            size="medium"
+            Icon={IconTrash}
+            onClick={onDelete}
+          />


style: Missing aria-label for accessibility on delete button

greptile-apps · 2025-01-23T10:48:47Z

.../src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditableContent.tsx

+          <FloatingIconButton
+            size="medium"
+            Icon={IconTrash}
+            onClick={onDelete}


style: Consider adding stopPropagation() to prevent node selection from being triggered when deleting

greptile-apps · 2025-01-23T10:49:02Z

...les/workflow/workflow-diagram/components/__stories__/WorkflowDiagramEmptyTrigger.stories.tsx

+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { ReactFlowProvider } from '@xyflow/react';


logic: missing import for @xyflow/react/dist/style.css which is required for ReactFlow to render correctly

greptile-apps · 2025-01-23T10:49:03Z

...les/workflow/workflow-diagram/components/__stories__/WorkflowDiagramEmptyTrigger.stories.tsx

+    ComponentDecorator,
+    (Story) => (
+      <ReactFlowProvider>
+        <Story />
+      </ReactFlowProvider>
+    ),


style: duplicate ReactFlowProvider decorator from Default story could be extracted to meta.decorators to avoid repetition

Devessier · 2025-01-23T11:04:42Z

...wenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx

@@ -21,7 +31,7 @@ const StyledStepNodeType = styled.div`
    ${({ theme }) => theme.border.radius.sm} 0 0;

  color: ${({ theme }) => theme.font.color.light};
-  font-size: ${({ theme }) => theme.font.size.md};
+  font-size: 9px;


Thomas wants these pixel-perfect values. We can replace these hard-coded values with tokens from the design system later.

Devessier · 2025-01-23T11:05:15Z

...wenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx

@@ -61,7 +70,7 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
 const StyledStepNodeLabel = styled.div<{ variant?: Variant }>`
  align-items: center;
  display: flex;
-  font-size: ${({ theme }) => theme.font.size.lg};
+  font-size: 13px;


Idem about pixel-perfect values.

thomtrp · 2025-01-23T12:32:20Z

...wenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx

+const NODE_HANDLE_WIDTH_PX = 4;
+const NODE_HANDLE_HEIGHT_PX = NODE_HANDLE_WIDTH_PX;
+export const NODE_ICON_WIDTH = Number(
+  THEME_COMMON.spacing(6).replace('px', ''),
+);
+export const NODE_ICON_LEFT_MARGIN = Number(
+  THEME_COMMON.spacing(2).replace('px', ''),
+);
+export const NODE_BORDER_WIDTH = 1;


why not in a separated file in workflow-diagram/constants/

…mponent

…m components

github-actions · 2025-01-23T15:13:31Z

	Fails
🚫	`node` failed.

Log

�[31mError: �[39m SyntaxError: Unexpected token C in JSON at position 0
    at JSON.parse (<anonymous>)
�[90m    at parseJSONFromBytes (node:internal/deps/undici/undici:5584:19)�[39m
�[90m    at successSteps (node:internal/deps/undici/undici:5555:27)�[39m
�[90m    at fullyReadBody (node:internal/deps/undici/undici:1665:9)�[39m
�[90m    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)�[39m
�[90m    at async specConsumeBody (node:internal/deps/undici/undici:5564:7)�[39m
danger-results://tmp/danger-results-0ac83204.json

Generated by 🚫 dangerJS against 002d540

- Go over every node in the workflows and fix the styles to conform to Figma - Create stories for every node type

Devessier commented Jan 23, 2025

View reviewed changes

greptile-apps bot reviewed Jan 23, 2025

View reviewed changes

Devessier commented Jan 23, 2025

View reviewed changes

Devessier added run-e2e -PR: awaiting review labels Jan 23, 2025

thomtrp approved these changes Jan 23, 2025

View reviewed changes

Devessier added 4 commits January 23, 2025 15:29

feat: improve design

d3d67b2

refactor: extract constants into separate files

797a143

fix: remove unnecessary padding from WorkflowDiagramCreateStepNode co…

e94b10d

…mponent

test: add story for WorkflowDiagramCreateStepNode component

8dcb36e

Devessier force-pushed the workflow-nodes-design-fix branch from 0b3b2ef to 8dcb36e Compare January 23, 2025 14:30

Devessier added -PR: awaiting author and removed -PR: awaiting review labels Jan 23, 2025

Devessier added 2 commits January 23, 2025 15:51

test: import reactflow styles

5177860

test: add relative positioning to story decorators for WorkflowDiagra…

002d540

…m components

Devessier enabled auto-merge (squash) January 23, 2025 15:09

Devessier merged commit bbb0c9a into main Jan 23, 2025
47 checks passed

Devessier deleted the workflow-nodes-design-fix branch January 23, 2025 15:12

DeepaPrasanna pushed a commit to DeepaPrasanna/twenty that referenced this pull request Jan 27, 2025

Improve the design of workflow nodes (twentyhq#9810)

3135018

- Go over every node in the workflows and fix the styles to conform to Figma - Create stories for every node type

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve the design of workflow nodes #9810

Improve the design of workflow nodes #9810

Devessier commented Jan 23, 2025 •

edited

Loading

Devessier Jan 23, 2025

thomtrp Jan 23, 2025

greptile-apps bot left a comment

greptile-apps bot Jan 23, 2025

greptile-apps bot Jan 23, 2025

greptile-apps bot Jan 23, 2025

greptile-apps bot Jan 23, 2025

greptile-apps bot Jan 23, 2025

greptile-apps bot Jan 23, 2025

Devessier Jan 23, 2025

Devessier Jan 23, 2025

thomtrp Jan 23, 2025

github-actions bot commented Jan 23, 2025

Improve the design of workflow nodes #9810

Improve the design of workflow nodes #9810

Conversation

Devessier commented Jan 23, 2025 • edited Loading

Devessier Jan 23, 2025

Choose a reason for hiding this comment

thomtrp Jan 23, 2025

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Jan 23, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 23, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 23, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 23, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 23, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 23, 2025

Choose a reason for hiding this comment

Devessier Jan 23, 2025

Choose a reason for hiding this comment

Devessier Jan 23, 2025

Choose a reason for hiding this comment

thomtrp Jan 23, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 23, 2025

Log

Devessier commented Jan 23, 2025 •

edited

Loading