Skip to content

feat: Structure tailwind CSS styling for reusability#130

Merged
ricardozanini merged 1 commit intoserverlessworkflow:mainfrom
handreyrc:structure-tailwind-css
Apr 30, 2026
Merged

feat: Structure tailwind CSS styling for reusability#130
ricardozanini merged 1 commit intoserverlessworkflow:mainfrom
handreyrc:structure-tailwind-css

Conversation

@handreyrc
Copy link
Copy Markdown
Contributor

Closes #129

Summary

This PR introduces tailwind layers in order to centralize and facilitate styling reusability.

Changes

  • Fix react flow mouse pointer css settings
  • Structure the tailwind css into layers and reusable classes
  • Update classnames references

Copilot AI review requested due to automatic review settings April 29, 2026 21:35
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR restructures styling for the diagram editor by moving React Flow overrides and node styling into Tailwind-driven CSS layers, aiming to improve reusability and maintainability.

Changes:

  • Adds Tailwind layer-based styling and React Flow cursor overrides in Diagram.css.
  • Updates React Flow node markup to use new reusable CSS class names.
  • Cleans up an unused test variable in the drag-and-drop story test.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File Description
packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx Removes an unused DOM query in a story-based test.
packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx Replaces long inline Tailwind class strings with reusable CSS class names.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css Introduces Tailwind import + layered CSS for React Flow overrides and custom node styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css Outdated
Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css Outdated
Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css Outdated
Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css Outdated
@handreyrc handreyrc force-pushed the structure-tailwind-css branch from b7c5b1d to d081425 Compare April 29, 2026 22:02
@handreyrc handreyrc moved this from Backlog to In review in Editor Project Tracker Apr 29, 2026
@handreyrc handreyrc self-assigned this Apr 29, 2026
@handreyrc handreyrc changed the title feat: Structure tailwind CSS styling for reusabilitty feat: Structure tailwind CSS styling for reusability Apr 29, 2026
Comment thread packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css Outdated
Copilot AI review requested due to automatic review settings April 30, 2026 13:40
@handreyrc handreyrc force-pushed the structure-tailwind-css branch from d081425 to 8364a1b Compare April 30, 2026 13:40
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@handreyrc handreyrc requested a review from lornakelly April 30, 2026 13:50
Copy link
Copy Markdown
Contributor

@lornakelly lornakelly left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Copy Markdown
Member

@fantonangeli fantonangeli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, I left a small comment which I'm unsure

Signed-off-by: handreyrc <handrey.cunha@gmail.com>
@handreyrc handreyrc force-pushed the structure-tailwind-css branch from 8364a1b to 889002a Compare April 30, 2026 19:32
@handreyrc handreyrc requested a review from ricardozanini April 30, 2026 19:39
@handreyrc
Copy link
Copy Markdown
Contributor Author

@ricardozanini ,

If you do not have furher considerations, this PR is good enough to be merged.

Thanks!

@ricardozanini ricardozanini merged commit 2cf3995 into serverlessworkflow:main Apr 30, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Structure tailwind CSS styling for reusability

5 participants