feat: SW-1825 stepper component#106
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
vmujakovic-ts
changed the title
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
vmujakovic-ts
force-pushed
the
SW-1825-process-flow-component
branch
from
099d681 to
2488d4e
Compare
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
owilliams-tetrascience
requested changes
May 27, 2026
owilliams-tetrascience
left a comment
owilliams-tetrascience
left a comment
Collaborator
There was a problem hiding this comment.
Looks good! 🚀 I only had one small comment but overall great work
| } | ||
|
|
||
| const meta: Meta<typeof ProcessFlow> = { | ||
| title: "Patterns/ProcessFlow", |
Collaborator
There was a problem hiding this comment.
Can you update this to "Design patterns". This was a recent change from UX
| ); | ||
| }); | ||
|
|
||
| it("does not call onStepSelect for disabled steps", () => { |
Collaborator
There was a problem hiding this comment.
I thinking generally most of these test should be covered in the storybook e2e tests? are any of these redundant?
Contributor
Author
There was a problem hiding this comment.
Yes they are, but one of the actions in this repo was complaining and fialing.
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new composed ProcessFlow component (stepper/workflow visualizer) to the UI kit, including responsive styling, Storybook coverage, unit tests, and public exports/docs so consuming apps can render parent-owned workflow progress (pending/active/completed/error/disabled).
Changes:
- Introduces
src/components/composed/ProcessFlow/*(component, utilities/types, Storybook stories, and tests). - Adds ProcessFlow-specific responsive CSS (container queries + CSS variables) to
src/index.tailwind.css. - Exposes ProcessFlow from the package entrypoint and documents it in
README.md(and adds it toDESIGN.mdinventory).
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/index.ts | Exports the new ProcessFlow composed component from the library entrypoint. |
| src/index.tailwind.css | Adds ProcessFlow container-query-driven CSS variables and responsive behavior. |
| src/components/composed/ProcessFlow/ProcessFlow.utils.ts | Defines ProcessFlow types/statuses and utility functions for layout/paths/accessibility labels. |
| src/components/composed/ProcessFlow/ProcessFlow.tsx | Implements the ProcessFlow component (linear + branching layouts), styling hooks, and selection callback API. |
| src/components/composed/ProcessFlow/ProcessFlow.test.ts | Unit tests for the utility helpers (status derivation, positioning, connections, SVG paths). |
| src/components/composed/ProcessFlow/ProcessFlow.component.test.tsx | Component-level rendering/interaction tests in jsdom. |
| src/components/composed/ProcessFlow/ProcessFlow.stories.tsx | Storybook stories + play tests demonstrating multiple layouts/sizes/states. |
| src/components/composed/ProcessFlow/index.ts | Barrel export for the composed ProcessFlow module. |
| README.md | Adds ProcessFlow documentation and improves some formatting/quoting consistency. |
| DESIGN.md | Adds ProcessFlow to the component inventory and re-formats the table. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+121
to
+129
| export function getStepAccessibleLabel(step: ProcessFlowStep, status: ProcessFlowStepStatus, stepNumber: number) { | ||
| if (step.ariaLabel) { | ||
| return step.ariaLabel; | ||
| } | ||
|
|
||
| const label = typeof step.label === "string" ? step.label : `Step ${stepNumber}`; | ||
|
|
||
| return `${label}, ${STATUS_LABELS[status]}`; | ||
| } |
Comment on lines
+40
to
+46
| export interface ProcessFlowStepSelectDetails { | ||
| /** Zero-based index of the selected step in the steps prop. */ | ||
| stepIndex: number; | ||
| /** Current visual status of the selected step. */ | ||
| status: ProcessFlowStepStatus; | ||
| nativeEvent: MouseEvent<HTMLButtonElement>; | ||
| } |
Comment on lines
+379
to
+385
| onClick={(nativeEvent) => | ||
| onStepSelect(step, { | ||
| nativeEvent, | ||
| status, | ||
| stepIndex, | ||
| }) | ||
| } |
Comment on lines
+609
to
+613
| const positionedSteps = steps.map((step, index) => positionStep(step, index, orientation)); | ||
| const rowCount = Math.max(...positionedSteps.map((step) => step.row + 1), 1); | ||
| const columnCount = Math.max(...positionedSteps.map((step) => step.column + 1), 1); | ||
| const resolvedConnections = resolveConnections(positionedSteps, connections); | ||
| const descriptionVisibility = getDescriptionVisibility(showDescriptions); |
Comment on lines
+358
to
+364
| export const UploadWorkflow: Story = { | ||
| args: { | ||
| steps: uploadSteps, | ||
| selectedStepId: "validate-inputs", | ||
| onStepSelect: fn(), | ||
| }, | ||
| render: (args) => <EditableUploadWorkflow {...args} />, |
Comment on lines
+10
to
+27
| // Suppress "not configured to support act(...)" warnings in jsdom | ||
| (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true; | ||
|
|
||
| let container: HTMLDivElement; | ||
| let root: ReturnType<typeof createRoot>; | ||
|
|
||
| beforeEach(() => { | ||
| container = document.createElement("div"); | ||
| document.body.appendChild(container); | ||
| root = createRoot(container); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| act(() => { | ||
| root.unmount(); | ||
| }); | ||
| container.remove(); | ||
| }); |
| disabled: "Disabled", | ||
| }; | ||
|
|
||
| export function getDescriptionVisibility(showDescriptions?: boolean): ProcessFlowDescriptionVisibility { |
Collaborator
There was a problem hiding this comment.
q(non-blocking): is there an intended use for 'auto' in ProcessFlowDescriptionVisibility here?
54321jenn-ts
approved these changes
Jun 3, 2026
54321jenn-ts
left a comment
54321jenn-ts
left a comment
Contributor
There was a problem hiding this comment.
LGTM.
Same comments as before, can you update your left nav in story book to "Process Flow" with a space? Also, it'd be nice to use the toolkit button group in the docs. Neither are blockers. Nice work!
blee-tetrascience
approved these changes
Jun 3, 2026
Collaborator
There was a problem hiding this comment.
Approving with the assumption you will add the empty snippet to your stories:
parameters: {
zephyr: { testCaseId: "" },
},
and then attach the zephyr_sync github label which will generate and sync the test case IDs for your components here into zephyr so we can track successful test executions
vmujakovic-ts
temporarily deployed
to
artifactory-prod
GitHub Actions
Inactive
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||
owilliams-tetrascience
approved these changes
Jun 3, 2026
Collaborator
|
🎉 This PR is included in version 0.6.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Type of Change
Checklist
yarn lintpassesyarn buildpassesyarn test:allpassesTesting
Verification
Screenshots