feat(step-sequence): align with Fusion DS#8070
Draft
nuria1110 wants to merge 1 commit into
Draft
Conversation
14 tasks
There was a problem hiding this comment.
Warning
- Copilot's review of this pull request may be incomplete because some of the changed files are excluded by your Copilot content exclusion settings. See Excluding content from Copilot for details.
Pull request overview
Aligns the StepSequence / StepSequenceItem components to Fusion DS by updating styling to use Fusion tokens and expanding the component API to support size and richer step content.
Changes:
- Updated StepSequence/Item styling to new Fusion token-based visuals (orientation + sizing).
- Added
sizeprop toStepSequenceanddescriptionprop toStepSequenceItem; deprecatedhideIndicator. - Updated Storybook docs/stories and streamlined Playwright + unit tests around the new behavior.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/step-sequence/step-sequence.style.ts | Updates StepSequence layout styling and keeps styled-system spacing support. |
| src/components/step-sequence/step-sequence.component.tsx | Adds size prop + context value; attempts to filter styled-system spacing props. |
| src/components/step-sequence/internal/step-sequence.context.ts | Extends context to include size with default "medium". |
| src/components/step-sequence/step-sequence-item/step-sequence-item.style.ts | Major restyle for indicators/lines/titles/descriptions with size maps and Fusion tokens. |
| src/components/step-sequence/step-sequence-item/step-sequence-item.component.tsx | Renders new indicator/line/title/description layout; deprecates hideIndicator. |
| src/components/icon/icon.style.ts | Adds .step-indicator override so icons inherit sizing/color in the new indicator. |
| src/components/step-sequence/step-sequence.stories.tsx | Reworks stories to focus on orientation/size/description examples and sets subcomponents. |
| src/components/step-sequence/step-sequence.mdx | Updates docs content to match new API and examples. |
| src/components/step-sequence/step-sequence-test.stories.tsx | Refactors Chromatic snapshots to cover new variants (size/orientation/description). |
| src/components/step-sequence/step-sequence.pw.tsx | Simplifies Playwright coverage, focusing on a11y for key variants. |
| src/components/step-sequence/components.test-pw.tsx | Renames/adjusts helper components used by Playwright tests. |
| src/components/step-sequence/step-sequence-item/step-sequence-item.test.tsx | Updates tests for new icon type + description; removes hideIndicator test. |
| src/components/step-sequence/step-sequence-item/step-sequence-item.stories.tsx | Removes the dev-only props-table story for StepSequenceItem. |
| skills/carbon-react/components/step-sequence.md | Documentation update (content excluded from review). |
| skills/carbon-react/components/step-sequence-item.md | Documentation update (content excluded from review). |
Files excluded by content exclusion policy (2)
- skills/carbon-react/components/step-sequence-item.md
- skills/carbon-react/components/step-sequence.md
Comment on lines
24
to
29
| <StyledStepSequence | ||
| orientation={orientation} | ||
| p={0} | ||
| $orientation={orientation} | ||
| {...props} | ||
| {...filterOutStyledSystemSpacingProps(props)} | ||
| {...tagComponent("step-sequence", props)} | ||
| > |
Comment on lines
18
to
+25
| export interface StepSequenceItemProps extends TagProps { | ||
| /** Aria label */ | ||
| /** Aria label for the step item. */ | ||
| ariaLabel?: string; | ||
| /** Hidden label to be displayed if item is complete */ | ||
| /** Hidden accessible label to be rendered if item is complete. */ | ||
| hiddenCompleteLabel?: string; | ||
| /** Hidden label to be displayed if item is current */ | ||
| /** Hidden accessible label to be rendered if item is current. */ | ||
| hiddenCurrentLabel?: string; | ||
| /** Value to be displayed before text for incomplete steps */ | ||
| /** Indicator for the step. */ |
Contributor
Author
There was a problem hiding this comment.
Deprecated ariaLabel and advised to use native aria-label instead.
Comment on lines
40
to
43
| export const StepSequenceItem = ({ | ||
| hideIndicator = false, | ||
| hideIndicator, | ||
| indicator, | ||
| status = "incomplete", |
Comment on lines
70
to
+74
| aria-label={ariaLabel} | ||
| ref={ref} | ||
| {...rest} | ||
| {...tagComponent("step-sequence-item", rest)} | ||
| className="step-sequence-item" |
Contributor
Author
There was a problem hiding this comment.
Consumers are advised to not target Carbon internals, including classNames.
nuria1110
force-pushed
the
step-sequence-audit
branch
from
da0ac7d to
7c97267
Compare
Aligns StepSequence component to Fusion DS. Updates styles and applies fusion-tokens. Deprecates `hideIndicator` prop in StepSequenceItem.
nuria1110
force-pushed
the
step-sequence-audit
branch
from
7c97267 to
c9348d6
Compare
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.
Proposed behaviour
Aligns StepSequence component to Fusion DS
hideIndicatorprop in StepSequenceItem.sizeprop to StepSequence with "small" and "medium" options.descriptionprop to StepSequenceItem.Current behaviour
StepSequenceis not aligned to Fusion DS.Checklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions