From 889002aee83773f741a9f7a863749731276a7b78 Mon Sep 17 00:00:00 2001 From: handreyrc Date: Wed, 29 Apr 2026 17:21:47 -0400 Subject: [PATCH] Structure tailwind CSS Signed-off-by: handreyrc --- .../src/react-flow/diagram/Diagram.css | 106 +++++++++++++++++- .../src/react-flow/nodes/Nodes.tsx | 4 +- .../src/styles.css | 15 ++- .../DiagramEditorDragNDrop.story.test.tsx | 1 - 4 files changed, 115 insertions(+), 11 deletions(-) diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css index 4c3f9a9..92dd1de 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css @@ -14,12 +14,106 @@ * limitations under the License. */ -.diagram-background { - --xy-background-pattern-color: #ccc; - background-color: #e5e4e2; +@reference "../../styles.css"; + +/* react flow overrides */ +@layer react-flow-overrides { + .dec-root .diagram-background { + --xy-background-pattern-color: #ccc; + background-color: #e5e4e2; + } + + .dec-root.dark .diagram-background{ + --xy-background-pattern-color: inherit; + background-color: inherit; + } + + /* react flow pointer behavior */ + .dec-root .react-flow__pane { + cursor: default !important; + } + + /* node hovering */ + .dec-root .react-flow__node { + cursor: pointer !important; + } + + /* node dragging */ + .dec-root .react-flow__node.dragging { + cursor: grabbing !important; + } + + /* dragging the pane (panning) */ + .dec-root .react-flow__pane.dragging { + cursor: grab !important; + } + + .dec-root .react-flow__pane.selection { + cursor: grab !important; + } + + /* space is held and pan is active */ + .dec-root .react-flow__pane:active { + cursor: grabbing !important; + } } -.dark .diagram-background{ - --xy-background-pattern-color: inherit; - background-color: inherit; +/* custom nodes */ +@layer custom-nodes { + .dec-root .node-label-container { + @apply + dec:whitespace-pre + dec:p-0.75 + dec:text-black + dec:text-sm; + } + + .dec-root.dark .node-label-container { + @apply + dec:text-white; + } + + .dec-root .custom-node-container { + @apply + dec:rounded-[5px] + dec:bg-white + dec:border dec:border-black + dec:transition-[border,box-shadow] + dec:h-full + dec:w-full; + } + + .dec-root.dark .custom-node-container { + @apply + dec:bg-[rgb(85,83,83)] + dec:border-[#e5e4e2]; + } + + .dec-root .custom-node-container:hover { + @apply + dec:hover:border dec:hover:border-black + dec:hover:shadow-[0_0_10px_rgba(0,65,208,0.3)] + dec:hover:h-full + dec:hover:w-full; + } + + .dec-root.dark .custom-node-container:hover { + @apply + dec:hover:border-[#5dafd5] + dec:hover:shadow-[0_0_10px_rgba(255,255,255,0.3)]; + } + + .dec-root .custom-node-container.selected { + @apply + dec:bg-[#aebbd5] + dec:border dec:border-black + dec:shadow-[0_0_10px_rgba(1,79,248,0.3)]; + } + + .dec-root.dark .custom-node-container.selected { + @apply + dec:bg-[#727676] + dec:border-[#4324dc] + dec:shadow-[0_0_10px_rgba(255,255,255,0.3)]; + } } \ No newline at end of file diff --git a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx index 587f582..17f1820 100644 --- a/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx +++ b/packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx @@ -50,11 +50,11 @@ interface PlaceholderProps { function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) { return (
-
+
{`${type}\n${data.label}`}
diff --git a/packages/serverless-workflow-diagram-editor/src/styles.css b/packages/serverless-workflow-diagram-editor/src/styles.css index 0f4fb10..91e5180 100644 --- a/packages/serverless-workflow-diagram-editor/src/styles.css +++ b/packages/serverless-workflow-diagram-editor/src/styles.css @@ -14,6 +14,12 @@ * limitations under the License. */ +/* layer order (Priority: lowest -> highest) */ +@layer + base, + react-flow-overrides, + custom-nodes; + @import "tailwindcss" prefix(dec); @custom-variant dark (&:where(.dec-root.dark, .dec-root.dark *)); @@ -31,6 +37,11 @@ Tailwind utilities are prefixed with `dec:` (Diagram Editor Component) to reduce the risk of conflicts with host application styles. */ -.dec-root { - height: 100%; + +/* global reset styles and element defaults */ +@layer base { + .dec-root { + @apply + dec:h-full; + } } \ No newline at end of file diff --git a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx index f431563..ea1f08d 100644 --- a/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx +++ b/packages/serverless-workflow-diagram-editor/tests/diagram-editor/DiagramEditorDragNDrop.story.test.tsx @@ -53,7 +53,6 @@ describe("Story - DiagramEditorDragNDrop component", () => { render(); - const wfFileDND = screen.getByTestId("story-workflow-file-dnd"); const wfFileUploadInput = screen.getByTestId("story-workflow-file-upload"); const reactFlowContainer = screen.queryByTestId("diagram-container");