Skip to content

feat(flow): add vertical orientation support#181

Closed
mattrothenberg wants to merge 3 commits intomainfrom
feat/flow-vertical-orientation
Closed

feat(flow): add vertical orientation support#181
mattrothenberg wants to merge 3 commits intomainfrom
feat/flow-vertical-orientation

Conversation

@mattrothenberg
Copy link
Copy Markdown
Collaborator

@mattrothenberg mattrothenberg commented Mar 5, 2026

Summary

Adds vertical orientation support to the Flow component, enabling top-to-bottom flow diagrams.

  • New orientation prop accepts "horizontal" (default) or "vertical"
  • Vertical orientation flows nodes from top to bottom
  • Parallel branches display horizontally in vertical mode
  • Nodes are centered horizontally by default in vertical orientation
Screenshot 2026-03-05 at 9 05 45 AM

Changes

  • packages/kumo/src/components/flow/diagram.tsx: Add orientation-aware connector calculations and layout classes
  • packages/kumo/src/components/flow/flow.test.tsx: Add tests for vertical orientation
  • packages/kumo-docs-astro/src/components/demos/FlowDemo.tsx: Add FlowVerticalDemo and FlowVerticalParallelDemo
  • packages/kumo-docs-astro/src/pages/components/flow.astro: Add vertical orientation examples and update props table

Usage

// Basic vertical flow
<Flow orientation="vertical">
  <Flow.Node>Step 1</Flow.Node>
  <Flow.Node>Step 2</Flow.Node>
  <Flow.Node>Step 3</Flow.Node>
</Flow>

// Vertical flow with parallel branches
<Flow orientation="vertical">
  <Flow.Node>Start</Flow.Node>
  <Flow.Parallel>
    <Flow.Node>Branch A</Flow.Node>
    <Flow.Node>Branch B</Flow.Node>
  </Flow.Parallel>
  <Flow.Node>End</Flow.Node>
</Flow>

Screenshots

The vertical orientation displays nodes flowing top-to-bottom with connectors and parallel branches rendered horizontally.

- Add orientation prop to Flow component (horizontal | vertical)
- Fix connector calculations for vertical flow (top-to-bottom)
- Center nodes horizontally in vertical orientation by default
- Update align prop JSDoc to document cross-axis behavior
- Add FlowVerticalDemo and FlowVerticalParallelDemo examples
- Add vertical orientation section to docs page
- Add orientation prop to Flow component docs table
- Add tests for vertical orientation
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Mar 5, 2026

npm i https://pkg.pr.new/@cloudflare/kumo@181

commit: f4341c5

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 5, 2026

Docs Preview

View docs preview

Commit: f4341c5

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.

1 participant