Skip to content

Style start/end node components #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kumaradityaraj wants to merge 8 commits into
base: main
Choose a base branch
from
+64 −17
Open

Style start/end node components #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a007350
start end node styling
kumaradityaraj Jun 25, 2026
87b0d33
Copilot and team review
kumaradityaraj Jun 26, 2026
113b377
merging upstream
kumaradityaraj Jun 26, 2026
b372714
updating pmpl from upstream
kumaradityaraj Jun 26, 2026
8a4c8a3
Copilot reviews
kumaradityaraj Jun 26, 2026
34493d4
colour fixing
kumaradityaraj Jun 29, 2026
28d52c7
merging upstream
kumaradityaraj Jun 29, 2026
e4bb37b
fixing colour
kumaradityaraj Jun 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,6 +402,61 @@
}

/* end validation errors */

.dec-start-end-node {

@lornakelly lornakelly Jun 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

You need to scope these styles under dec-root (you have done for dark mode)

position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.dec-start-node,
.dec-end-node {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;

@apply dec:border
dec:border-slate-300

@lornakelly lornakelly Jun 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

its a bit too light on light mode, can you try border colour slate-400

dec:bg-slate-100
dec:text-slate-600;
}

.dec-end-node-inner {
position: absolute;
inset: 6px;
border-radius: 50%;
pointer-events: none;

@apply dec:border
dec:border-slate-300
dec:bg-slate-100;
}

.dec-start-end-node.selected .dec-start-node,
.dec-start-end-node.selected .dec-end-node,
.dec-start-node:hover,
.dec-end-node:hover {
box-shadow: 0 0 0 4px rgba(209, 204, 204, 0.3);
}

.dec-root.dark .dec-start-node,
.dec-root.dark .dec-end-node {
@apply dec:border
dec:border-slate-600
dec:bg-slate-800
dec:text-slate-300;
}

.dec-root.dark .dec-end-node-inner {
@apply dec:border
dec:border-slate-600
dec:bg-slate-800;
}
}

/* custom edges */
Expand Down
26 changes: 9 additions & 17 deletions packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,26 +182,18 @@ function TerminalNodeContent({ id, type }: { id: string; type: TerminalNodeType
);
}

// TODO: These props are just a placeholder
interface PlaceholderProps {
id: string;
data: BaseNodeData;
selected: boolean;
type: string;
}

// TODO: This content is just a placeholder
function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) {
function StartEndNode({ id, data, selected, type }: NodeContentProps) {

@lornakelly lornakelly Jun 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

doesnt look like data prop is used? if not please remove

const isStart = type === GraphNodeType.Start;
return (
<div
className={`custom-node-container ${selected ? "selected" : ""}`}

@lornakelly lornakelly Jun 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

can you also remove the css styles for the placeholder component

className={`dec-start-end-node ${selected ? "selected" : ""}`}
data-testid={`${type}-node-${id}`}
>
<RF.Handle type="target" position={RF.Position.Top} />
<div className="node-label-container" data-testid={`${type}-label-${id}`}>
{`${type}\n${data.label}`}
{!isStart && <RF.Handle type="target" position={RF.Position.Top} />}
<div className={isStart ? "dec-start-node" : "dec-end-node"}>
{!isStart && <div className="dec-end-node-inner" />}
</div>
<RF.Handle type="source" position={RF.Position.Bottom} />
{isStart && <RF.Handle type="source" position={RF.Position.Bottom} />}
Comment thread
kumaradityaraj marked this conversation as resolved.
</div>
Comment thread
kumaradityaraj marked this conversation as resolved.
);
}
Expand All @@ -210,14 +202,14 @@ function PlaceholderContent({ id, data, selected, type }: PlaceholderProps) {
export type StartNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.Start>;
export function StartNode({ id, data, selected, type }: RF.NodeProps<StartNodeType>) {
// TODO: This component is just a placeholder
return <PlaceholderContent id={id} data={data} selected={selected} type={type} />;
return <StartEndNode id={id} data={data} selected={selected} type={type} />;
Comment on lines 204 to +205
}

/* end node */
export type EndNodeType = RF.Node<BaseNodeData, typeof GraphNodeType.End>;
export function EndNode({ id, data, selected, type }: RF.NodeProps<EndNodeType>) {
// TODO: This component is just a placeholder
return <PlaceholderContent id={id} data={data} selected={selected} type={type} />;
return <StartEndNode id={id} data={data} selected={selected} type={type} />;
Comment on lines 211 to +212
}

/* entry node */
Expand Down
Loading