Skip to content

Commit 1cad157

Browse files
nandanmennandanmen
authored
fix(flow): make nested lists work inside parallel nodes (#153)
1 parent 15b2fc7 commit 1cad157

File tree

8 files changed

+287
-78
lines changed

8 files changed

+287
-78
lines changed

‎.changeset/curvy-beds-reply.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cloudflare/kumo": minor
3+
---
4+
5+
feat(flow): make nested lists work inside parallel nodes

‎packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,9 @@ export function FlowCustomContentDemo() {
4646
export function FlowComplexDemo() {
4747
return (
4848
<Flow>
49-
<Flow.Node>Trigger</Flow.Node>
5049
<Flow.Parallel>
51-
<Flow.Node>Validate Input</Flow.Node>
52-
<Flow.Node>Check Cache</Flow.Node>
50+
<Flow.Node>HTTP Trigger</Flow.Node>
51+
<Flow.Node>Cron Trigger</Flow.Node>
5352
</Flow.Parallel>
5453
<Flow.Node>Process Request</Flow.Node>
5554
<Flow.Parallel>
@@ -161,3 +160,26 @@ export function FlowParallelAlignEndDemo() {
161160
</Flow>
162161
);
163162
}
163+
164+
/** Flow diagram with parallel branches containing nested node sequences */
165+
export function FlowParallelNestedListDemo() {
166+
return (
167+
<Flow>
168+
<Flow.Parallel>
169+
<Flow.List>
170+
<Flow.Node>Client Users</Flow.Node>
171+
<Flow.Node>Engineering Team Access</Flow.Node>
172+
</Flow.List>
173+
<Flow.List>
174+
<Flow.Parallel>
175+
<Flow.Node>All Authenticated Users</Flow.Node>
176+
<Flow.Node>Client Users</Flow.Node>
177+
<Flow.Node>Site Users</Flow.Node>
178+
</Flow.Parallel>
179+
<Flow.Node>Contractor Access</Flow.Node>
180+
</Flow.List>
181+
</Flow.Parallel>
182+
<Flow.Node>Destinations</Flow.Node>
183+
</Flow>
184+
);
185+
}

‎packages/kumo-docs-astro/src/pages/components/flow.astro‎

Lines changed: 130 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
FlowPanningDemo,
1515
FlowDisabledDemo,
1616
FlowParallelAlignEndDemo,
17+
FlowParallelNestedListDemo,
1718
} from "../../components/demos/FlowDemo";
1819
---
1920

@@ -43,10 +44,7 @@ import {
4344
<ComponentSection>
4445
<Heading level={2}>Installation</Heading>
4546
<Heading level={3} class="mb-2 text-lg">Barrel</Heading>
46-
<CodeBlock
47-
code={`import { Flow } from "@cloudflare/kumo";`}
48-
lang="tsx"
49-
/>
47+
<CodeBlock code={`import { Flow } from "@cloudflare/kumo";`} lang="tsx" />
5048
<Heading level={3} class="mb-2 mt-4 text-lg">Granular</Heading>
5149
<CodeBlock
5250
code={`import { Flow } from "@cloudflare/kumo/components/flow";`}
@@ -61,12 +59,13 @@ import {
6159
The Flow components work together to create directed flow diagrams. Use{
6260
" "
6361
}
64-
<code class="rounded bg-kumo-control px-1 py-0.5">Flow</code> as the
65-
container,{" "}
62+
<code class="rounded bg-kumo-control px-1 py-0.5">Flow</code> as the container,{
63+
" "
64+
}
6665
<code class="rounded bg-kumo-control px-1 py-0.5">Flow.Node</code> for individual
6766
steps, and{" "}
68-
<code class="rounded bg-kumo-control px-1 py-0.5">Flow.Parallel</code> to
69-
create branching paths.
67+
<code class="rounded bg-kumo-control px-1 py-0.5">Flow.Parallel</code> to create
68+
branching paths.
7069
</p>
7170
<CodeBlock
7271
code={`import { Flow } from "@cloudflare/kumo";
@@ -131,8 +130,8 @@ export default function Example() {
131130
<Heading level={3}>Custom Node Styling</Heading>
132131
<p class="mb-4">
133132
Use the{" "}
134-
<code class="rounded bg-kumo-control px-1 py-0.5">render</code> prop
135-
to completely customize node appearance. The render prop accepts a React element
133+
<code class="rounded bg-kumo-control px-1 py-0.5">render</code> prop to
134+
completely customize node appearance. The render prop accepts a React element
136135
that will be used instead of the default styled node.
137136
</p>
138137
<ComponentExample
@@ -155,8 +154,8 @@ export default function Example() {
155154
<Heading level={3}>Centered Alignment</Heading>
156155
<p class="mb-4">
157156
Use the{" "}
158-
<code class="rounded bg-kumo-control px-1 py-0.5">align</code> prop
159-
to vertically center nodes. This is useful when nodes have different heights.
157+
<code class="rounded bg-kumo-control px-1 py-0.5">align</code> prop to
158+
vertically center nodes. This is useful when nodes have different heights.
160159
</p>
161160
<ComponentExample
162161
code={`<Flow align="center">
@@ -204,10 +203,9 @@ export default function Example() {
204203
<Heading level={3}>Custom Anchor Points</Heading>
205204
<p class="mb-4">
206205
By default, connectors attach to the center of each node. Use{" "}
207-
<code class="rounded bg-kumo-control px-1 py-0.5"
208-
>Flow.Anchor</code
209-
> with its <code class="rounded bg-kumo-control px-1 py-0.5">render</code
210-
> prop to specify custom attachment points. The <code
206+
<code class="rounded bg-kumo-control px-1 py-0.5">Flow.Anchor</code> with
207+
its <code class="rounded bg-kumo-control px-1 py-0.5">render</code> prop
208+
to specify custom attachment points. The <code
211209
class="rounded bg-kumo-control px-1 py-0.5">type</code
212210
> prop controls whether the anchor serves as a <code
213211
class="rounded bg-kumo-control px-1 py-0.5">"start"</code
@@ -254,9 +252,9 @@ export default function Example() {
254252
<div>
255253
<Heading level={3}>Panning Large Diagrams</Heading>
256254
<p class="mb-4">
257-
When a diagram exceeds its container, Flow automatically
258-
enables panning. Drag to pan the viewport, or use the scroll wheel.
259-
Scrollbars appear on hover to indicate available scroll area.
255+
When a diagram exceeds its container, Flow automatically enables
256+
panning. Drag to pan the viewport, or use the scroll wheel. Scrollbars
257+
appear on hover to indicate available scroll area.
260258
</p>
261259
<ComponentExample
262260
code={`<Flow>
@@ -281,8 +279,8 @@ export default function Example() {
281279
<p class="mb-4">
282280
Use the{" "}
283281
<code class="rounded bg-kumo-control px-1 py-0.5">disabled</code> prop
284-
on a node to visually indicate it's inactive. Connectors linking to
285-
disabled nodes are rendered with reduced opacity.
282+
on a node to visually indicate it's inactive. Connectors linking to disabled
283+
nodes are rendered with reduced opacity.
286284
</p>
287285
<ComponentExample
288286
code={`<Flow>
@@ -302,13 +300,16 @@ export default function Example() {
302300
<Heading level={3}>Parallel Node Alignment</Heading>
303301
<p class="mb-4">
304302
Use the{" "}
305-
<code class="rounded bg-kumo-control px-1 py-0.5">align</code> prop on{" "}
306-
<code class="rounded bg-kumo-control px-1 py-0.5">Flow.Parallel</code>{" "}
303+
<code class="rounded bg-kumo-control px-1 py-0.5">align</code> prop on{
304+
" "
305+
}
306+
<code class="rounded bg-kumo-control px-1 py-0.5">Flow.Parallel</code
307+
>{" "}
307308
to control how nodes with different widths are aligned. Use{" "}
308309
<code class="rounded bg-kumo-control px-1 py-0.5">"start"</code>{" "}
309310
(default) to align left, or{" "}
310-
<code class="rounded bg-kumo-control px-1 py-0.5">"end"</code> to
311-
align right.
311+
<code class="rounded bg-kumo-control px-1 py-0.5">"end"</code> to align
312+
right.
312313
</p>
313314
<ComponentExample
314315
code={`<Flow>
@@ -327,6 +328,49 @@ export default function Example() {
327328
</div>
328329
</ComponentSection>
329330

331+
<!-- Other Examples -->
332+
<ComponentSection>
333+
<Heading level={2} class="mb-6">Other Examples</Heading>
334+
335+
<div class="space-y-12">
336+
<div>
337+
<Heading level={3}>Nested Node Lists in Parallel</Heading>
338+
<p class="mb-4">
339+
Use{" "}
340+
<code class="rounded bg-kumo-control px-1 py-0.5">Flow.List</code>{
341+
" "
342+
}
343+
inside{" "}
344+
<code class="rounded bg-kumo-control px-1 py-0.5">Flow.Parallel</code
345+
>{" "}
346+
to create parallel branches where each branch contains a sequence of connected
347+
nodes.
348+
</p>
349+
<ComponentExample
350+
code={`<Flow>
351+
<Flow.Parallel>
352+
<Flow.List>
353+
<Flow.Node>Client Users</Flow.Node>
354+
<Flow.Node>Engineering Team Access</Flow.Node>
355+
</Flow.List>
356+
<Flow.List>
357+
<Flow.Parallel>
358+
<Flow.Node>All Authenticated Users</Flow.Node>
359+
<Flow.Node>Client Users</Flow.Node>
360+
<Flow.Node>Site Users</Flow.Node>
361+
</Flow.Parallel>
362+
<Flow.Node>Contractor Access</Flow.Node>
363+
</Flow.List>
364+
</Flow.Parallel>
365+
<Flow.Node>Destinations</Flow.Node>
366+
</Flow>`}
367+
>
368+
<FlowParallelNestedListDemo client:visible />
369+
</ComponentExample>
370+
</div>
371+
</div>
372+
</ComponentSection>
373+
330374
<!-- Components -->
331375
<ComponentSection>
332376
<Heading level={2}>Components</Heading>
@@ -352,7 +396,11 @@ export default function Example() {
352396
<td class="px-4 py-3 font-mono">align</td>
353397
<td class="px-4 py-3 font-mono">"start" | "center"</td>
354398
<td class="px-4 py-3"
355-
>Vertical alignment of nodes. <code class="rounded bg-kumo-control px-1 py-0.5">"start"</code> (default) aligns to top, <code class="rounded bg-kumo-control px-1 py-0.5">"center"</code> vertically centers nodes.</td
399+
>Vertical alignment of nodes. <code
400+
class="rounded bg-kumo-control px-1 py-0.5">"start"</code
401+
> (default) aligns to top, <code
402+
class="rounded bg-kumo-control px-1 py-0.5">"center"</code
403+
> vertically centers nodes.</td
356404
>
357405
</tr>
358406
<tr class="border-b border-kumo-line">
@@ -365,8 +413,7 @@ export default function Example() {
365413
<tr class="border-b border-kumo-line">
366414
<td class="px-4 py-3 font-mono">children</td>
367415
<td class="px-4 py-3 font-mono">ReactNode</td>
368-
<td class="px-4 py-3"
369-
>Flow.Node and Flow.Parallel components</td
416+
<td class="px-4 py-3">Flow.Node and Flow.Parallel components</td
370417
>
371418
</tr>
372419
</tbody>
@@ -378,8 +425,9 @@ export default function Example() {
378425
<Heading level={3} class="mb-2 text-lg">Flow.Node</Heading>
379426
<p class="mb-4">
380427
A single node in the flow diagram. Renders as a styled card with
381-
automatic connector points. Use the <code class="rounded bg-kumo-control px-1 py-0.5">render</code> prop
382-
to customize the element.
428+
automatic connector points. Use the <code
429+
class="rounded bg-kumo-control px-1 py-0.5">render</code
430+
> prop to customize the element.
383431
</p>
384432
<div class="overflow-x-auto">
385433
<table class="w-full">
@@ -394,12 +442,17 @@ export default function Example() {
394442
<tr class="border-b border-kumo-line">
395443
<td class="px-4 py-3 font-mono">render</td>
396444
<td class="px-4 py-3 font-mono">ReactElement</td>
397-
<td class="px-4 py-3">Custom element to render instead of the default styled node</td>
445+
<td class="px-4 py-3"
446+
>Custom element to render instead of the default styled node</td
447+
>
398448
</tr>
399449
<tr class="border-b border-kumo-line">
400450
<td class="px-4 py-3 font-mono">disabled</td>
401451
<td class="px-4 py-3 font-mono">boolean</td>
402-
<td class="px-4 py-3">When true, connectors linking to this node are rendered with reduced opacity</td>
452+
<td class="px-4 py-3"
453+
>When true, connectors linking to this node are rendered with
454+
reduced opacity</td
455+
>
403456
</tr>
404457
<tr class="border-b border-kumo-line">
405458
<td class="px-4 py-3 font-mono">children</td>
@@ -414,10 +467,10 @@ export default function Example() {
414467
<div>
415468
<Heading level={3} class="mb-2 text-lg">Flow.Anchor</Heading>
416469
<p class="mb-4">
417-
A component that marks a custom attachment point for connectors
418-
within a Flow.Node. Use this to control exactly where connector lines
419-
attach instead of the default node center by providing a custom element
420-
via the <code class="rounded bg-kumo-control px-1 py-0.5">render</code> prop.
470+
A component that marks a custom attachment point for connectors within
471+
a Flow.Node. Use this to control exactly where connector lines attach
472+
instead of the default node center by providing a custom element via
473+
the <code class="rounded bg-kumo-control px-1 py-0.5">render</code> prop.
421474
</p>
422475
<div class="overflow-x-auto">
423476
<table class="w-full">
@@ -441,7 +494,9 @@ export default function Example() {
441494
<tr class="border-b border-kumo-line">
442495
<td class="px-4 py-3 font-mono">render</td>
443496
<td class="px-4 py-3 font-mono">ReactElement</td>
444-
<td class="px-4 py-3">Custom element to render for the anchor point</td>
497+
<td class="px-4 py-3"
498+
>Custom element to render for the anchor point</td
499+
>
445500
</tr>
446501
<tr class="border-b border-kumo-line">
447502
<td class="px-4 py-3 font-mono">children</td>
@@ -456,8 +511,8 @@ export default function Example() {
456511
<div>
457512
<Heading level={3} class="mb-2 text-lg">Flow.Parallel</Heading>
458513
<p class="mb-4">
459-
A container for parallel branches. Child Flow.Node components are displayed in
460-
parallel with junction connectors.
514+
A container for parallel branches. Child Flow.Node components are
515+
displayed in parallel with junction connectors.
461516
</p>
462517
<div class="overflow-x-auto">
463518
<table class="w-full">
@@ -473,14 +528,48 @@ export default function Example() {
473528
<td class="px-4 py-3 font-mono">align</td>
474529
<td class="px-4 py-3 font-mono">"start" | "end"</td>
475530
<td class="px-4 py-3"
476-
>Controls horizontal alignment of nodes within the parallel group. <code class="rounded bg-kumo-control px-1 py-0.5">"start"</code> (default) aligns left, <code class="rounded bg-kumo-control px-1 py-0.5">"end"</code> aligns right.</td
531+
>Controls horizontal alignment of nodes within the parallel
532+
group. <code class="rounded bg-kumo-control px-1 py-0.5"
533+
>"start"</code
534+
> (default) aligns left, <code
535+
class="rounded bg-kumo-control px-1 py-0.5">"end"</code
536+
> aligns right.</td
537+
>
538+
</tr>
539+
<tr class="border-b border-kumo-line">
540+
<td class="px-4 py-3 font-mono">children</td>
541+
<td class="px-4 py-3 font-mono">ReactNode</td>
542+
<td class="px-4 py-3"
543+
>Flow.Node or Flow.List components to display in parallel</td
477544
>
478545
</tr>
546+
</tbody>
547+
</table>
548+
</div>
549+
</div>
550+
551+
<div>
552+
<Heading level={3} class="mb-2 text-lg">Flow.List</Heading>
553+
<p class="mb-4">
554+
A container for a sequence of Flow.Node components with automatic
555+
connectors between them. Use inside Flow.Parallel to create branches
556+
with multiple sequential steps.
557+
</p>
558+
<div class="overflow-x-auto">
559+
<table class="w-full">
560+
<thead>
561+
<tr class="border-b border-kumo-line">
562+
<th class="px-4 py-3 text-left font-semibold">Prop</th>
563+
<th class="px-4 py-3 text-left font-semibold">Type</th>
564+
<th class="px-4 py-3 text-left font-semibold">Description</th>
565+
</tr>
566+
</thead>
567+
<tbody class="text-kumo-strong">
479568
<tr class="border-b border-kumo-line">
480569
<td class="px-4 py-3 font-mono">children</td>
481570
<td class="px-4 py-3 font-mono">ReactNode</td>
482571
<td class="px-4 py-3"
483-
>Flow.Node components to display in parallel</td
572+
>Flow.Node components to display in sequence</td
484573
>
485574
</tr>
486575
</tbody>

0 commit comments

Comments
 (0)