-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve the design of workflow nodes (#9810)
- Go over every node in the workflows and fix the styles to conform to Figma - Create stories for every node type
- Loading branch information
Showing
15 changed files
with
329 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 8 additions & 4 deletions
12
...-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
...c/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditableContent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { WorkflowDiagramStepNodeBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase'; | ||
| import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram'; | ||
| import { FloatingIconButton, IconTrash } from 'twenty-ui'; | ||
|
|
||
| export const WorkflowDiagramStepNodeEditableContent = ({ | ||
| data, | ||
| selected, | ||
| onDelete, | ||
| }: { | ||
| data: WorkflowDiagramStepNodeData; | ||
| selected: boolean; | ||
| onDelete: () => void; | ||
| }) => { | ||
| return ( | ||
| <WorkflowDiagramStepNodeBase | ||
| data={data} | ||
| RightFloatingElement={ | ||
| selected ? ( | ||
| <FloatingIconButton | ||
| size="medium" | ||
| Icon={IconTrash} | ||
| onClick={onDelete} | ||
| /> | ||
| ) : undefined | ||
| } | ||
| /> | ||
| ); | ||
| }; |
42 changes: 42 additions & 0 deletions
42
...orkflow/workflow-diagram/components/__stories__/WorkflowDiagramCreateStepNode.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
|
|
||
| import { ReactFlowProvider } from '@xyflow/react'; | ||
| import '@xyflow/react/dist/style.css'; | ||
| import { ComponentDecorator } from 'twenty-ui'; | ||
| import { WorkflowDiagramCreateStepNode } from '../WorkflowDiagramCreateStepNode'; | ||
|
|
||
| const meta: Meta<typeof WorkflowDiagramCreateStepNode> = { | ||
| title: 'Modules/Workflow/WorkflowDiagramCreateStepNode', | ||
| component: WorkflowDiagramCreateStepNode, | ||
| decorators: [ | ||
| ComponentDecorator, | ||
| (Story) => ( | ||
| <ReactFlowProvider> | ||
| <Story /> | ||
| </ReactFlowProvider> | ||
| ), | ||
| ], | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof WorkflowDiagramCreateStepNode>; | ||
|
|
||
| export const Default: Story = { | ||
| decorators: [ | ||
| (Story) => ( | ||
| <div style={{ position: 'relative' }}> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ], | ||
| }; | ||
|
|
||
| export const Selected: Story = { | ||
| decorators: [ | ||
| (Story) => ( | ||
| <div className="selectable selected" style={{ position: 'relative' }}> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ], | ||
| }; |
43 changes: 43 additions & 0 deletions
43
.../workflow/workflow-diagram/components/__stories__/WorkflowDiagramEmptyTrigger.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
| import { ComponentDecorator } from 'twenty-ui'; | ||
|
|
||
| import { ReactFlowProvider } from '@xyflow/react'; | ||
| import '@xyflow/react/dist/style.css'; | ||
| import { WorkflowDiagramEmptyTrigger } from '../WorkflowDiagramEmptyTrigger'; | ||
|
|
||
| const meta: Meta<typeof WorkflowDiagramEmptyTrigger> = { | ||
| title: 'Modules/Workflow/WorkflowDiagramEmptyTrigger', | ||
| component: WorkflowDiagramEmptyTrigger, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof WorkflowDiagramEmptyTrigger>; | ||
|
|
||
| export const Default: Story = { | ||
| decorators: [ | ||
| (Story) => ( | ||
| <ReactFlowProvider> | ||
| <div style={{ position: 'relative' }}> | ||
| <Story /> | ||
| </div> | ||
| </ReactFlowProvider> | ||
| ), | ||
| ComponentDecorator, | ||
| ], | ||
| }; | ||
|
|
||
| export const Selected: Story = { | ||
| decorators: [ | ||
| (Story) => ( | ||
| <div className="selectable selected" style={{ position: 'relative' }}> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| (Story) => ( | ||
| <ReactFlowProvider> | ||
| <Story /> | ||
| </ReactFlowProvider> | ||
| ), | ||
| ComponentDecorator, | ||
| ], | ||
| }; |
Oops, something went wrong.