Stepper component #2465

benlister-okta · 2025-01-17T01:04:16Z

DES-6996

Summary

Adds Stepper component

Supports vertical and horizontal layouts
Variants: numeric (1) and non-numeric •
Supports optionally clickable steps (both all clickable or only completed steps clickable)
Has both a label and customizable description field
Has optional pagination-like navigation controls (next/previous as well as "dot" navigation, like on a carousel)
This component is based off MUI Stepper

Component checklist

Code structure

Organize code using a modular component architecture.
Use semantic HTML for clear and meaningful structure.
Break down complex components into smaller, reusable parts.

Accessibility implementation

Apply ARIA attributes to indicate roles and relationships.
Test focus management and ensure interactive elements are keyboard accessible.
Provide visual alternatives for auditory elements.

Internationalization (i18n) implementation

Separate any text content from the component's code for translation.

Documentation

Include code snippets, demos, and examples for various use cases.
Provide guidance on customization and handling special cases.

Finalize code

Interaction designers, UI eng and visual designers need to review that the Storybook code matches the intended Figma design
Interaction designers need to confirm Storybook code matches Supernova
Interaction and visual designers merge Figma and code at the same time

QA

Include necessary unit tests to continuously verify component functionality
Screen reader test error/success states or message
Test edge cases and error scenarios to validate robustness

bryancunningham-okta · 2025-01-27T17:33:52Z

packages/odyssey-react-mui/src/labs/Stepper/StepIcon.tsx

+        ? odysseyDesignTokens.HueBlue600
+        : odysseyDesignTokens.HueNeutral600
+  }`,
+  background: completed


Nit: Can we be more explicit and use backgroundColor here.

Also, if possible, can we do a more conditional approach to applying these? Rather than a nested ternary. This is less of a 'nit' as I think we'd like to generally move this direction with these types of styles

...(completed && (... ...(active && (...

bryancunningham-okta · 2025-01-27T17:37:57Z

packages/odyssey-react-mui/src/labs/Stepper/StepIcon.tsx

+    : active
+      ? odysseyDesignTokens.HueBlue600
+      : "transparent",
+  transition: `all ${odysseyDesignTokens.TransitionDurationMain}`,


I'd recommend against using 'all' here and be more explicit about what exactly is transitioning. There are performance concerns with all and, you get the added bonus of being able to tell at a glance what is being transitioned

bryancunningham-okta · 2025-01-27T17:38:21Z

packages/odyssey-react-mui/src/labs/Stepper/StepIcon.tsx

+  transition: `all ${odysseyDesignTokens.TransitionDurationMain}`,
+
+  ".MuiStep-root:hover &":
+    !active && !completed && nonLinear


Same comment about the conditional pattern, rather than a ternary here

bryancunningham-okta · 2025-01-27T17:39:35Z

packages/odyssey-react-mui/src/labs/Stepper/StepIcon.tsx

+    completed || active
+      ? odysseyDesignTokens.HueNeutralWhite
+      : odysseyDesignTokens.HueNeutral700,
+  border: `1px solid ${


nit: Can we break this into 2 declarations.

border: '1px solid',

And then conditionally add the borderColor

bryancunningham-okta · 2025-01-27T17:40:36Z

packages/odyssey-react-mui/src/labs/Stepper/StepIcon.tsx

+      ? { border: `1px solid ${odysseyDesignTokens.HueNeutral900}` }
+      : undefined,
+
+  "& svg": {


Are we targeting the child svg here? If so, we can lose the &.

bryancunningham-okta · 2025-01-27T17:40:51Z

packages/odyssey-react-mui/src/labs/Stepper/StepIcon.tsx

+
+  "& svg": {
+    width:
+      variant === "numeric"


Same comment about the conditional pattern

bryancunningham-okta · 2025-01-27T17:40:55Z

packages/odyssey-react-mui/src/labs/Stepper/StepIcon.tsx

+        ? odysseyDesignTokens.Spacing4
+        : odysseyDesignTokens.Spacing3,
+    height:
+      variant === "numeric"


Same comment about the conditional pattern

bryancunningham-okta · 2025-01-27T17:43:58Z

packages/odyssey-react-mui/src/labs/Stepper/Stepper.types.ts

+  /**
+   * Aria label for the stepper container, Falls back to "Progress steps"
+   */
+  ariaLabel?: string;


Can we define this as ariaLabel?: HtmlProps["ariaLabel"];. You can add additional comments by doing this:

/** * * Aria label for the stepper container, Falls back to "Progress steps" */

Notice the extra * above

bryancunningham-okta · 2025-01-27T17:45:17Z

packages/odyssey-react-mui/src/labs/Stepper/Stepper.types.ts

+  /**
+   * Callback fired when back button is clicked
+   */
+  onBack: () => void;


What do we send to the consumer onBack or onNext? Do they need a name or number of the step they are coming from? I would assume they would but, not sure

The callbacks aren't currently sending any context, which definitely seems limiting. I'm going to update to add current and target step indexes.

bryancunningham-okta · 2025-01-27T17:46:55Z

packages/odyssey-react-mui/src/labs/Stepper/StepperNavigation.tsx

+  display: "grid",
+  gridTemplateColumns: "1fr auto 1fr",
+  alignItems: "center",
+  marginTop: odysseyDesignTokens.Spacing3,


Suggested change

marginTop: odysseyDesignTokens.Spacing3,

marginBlockStart: odysseyDesignTokens.Spacing3,

bryancunningham-okta · 2025-01-27T17:50:34Z

packages/odyssey-react-mui/src/labs/Stepper/StepperNavigation.tsx

+    status === "current" ? odysseyDesignTokens.HueNeutral500 : "transparent",
+  margin: "0 2px",
+  cursor: isClickable ? "pointer" : "default",
+  "&:hover": isClickable


I'd move all these isClickable styles into it's own block like

...(isClickable && ({ ...all your clickable styles

bryancunningham-okta · 2025-01-27T17:51:50Z

packages/odyssey-react-mui/src/labs/Stepper/StepperNavigation.tsx

+  border: "1px solid",
+  borderRadius: "50%",
+  borderColor:
+    status === "current"


Same as below. Can move these into their own blocks like

...(status === 'current') && ({...

bryancunningham-okta · 2025-01-27T17:56:56Z

packages/odyssey-react-mui/src/labs/Stepper/Stepper.utils.ts

+  (excludedProps: string[]) => (prop: string) =>
+    !excludedProps.includes(prop);
+
+export const shouldForwardStepProps = createShouldForwardProp([


I'm all for abstraction but, I think we could get away with just using the base createShouldForwardProp inline when creating styled components. Although, I'm unsure about the name in that case. Maybe like... filterExcludedProps?

yeah that makes sense to me, it could be more explicit that way

benlister-okta marked this pull request as ready for review January 17, 2025 23:30

benlister-okta requested a review from a team as a code owner January 17, 2025 23:30

bryancunningham-okta reviewed Jan 27, 2025

View reviewed changes

benlister-okta added 15 commits January 27, 2025 14:10

feat: add Stepper

dd36e3c

fix: style updates

466cca8

fix: style updates

0afac73

fix: remove 5 max limit

0a011b9

fix: correct cursor behavior

1c2d225

fix: add description in stories

531181e

fix: style updates

f74386f

fix: style updates

69af7d6

fix: style updates

0c49867

fix: style updates

9510d85

fix: style fixes

fd2ba04

fix: remove inline style

fc40883

fix: update tokens

41f6eb6

fix: style updates, add tests

7390e17

fix: updates for translations and buttons

a24198a

benlister-okta added 23 commits January 27, 2025 14:13

fix: update prop order

2c097d2

fix: style updates

d2f1a73

fix: simplify hover styles

5c84fc8

fix: make steps tabable when interactive

5b2d712

fix: simplify hover

f437407

fix: optimizations

646b610

fix: simplifying and removing redundancies

a06c0e1

fix: focus styles

0ffcdd8

fix: break component into subcomponents

f5e6538

fix: update tests

f4e25ff

fix: update story to use vite properly

f89bca1

fix: update tests, a11y, translations

17ba881

fix: cleanup

87130cd

fix: simplify

a693982

fix: simplify

3e813a9

fix: refactor

1dabcfb

fix: clean up

0ff8df3

fix: docs update

703d3bb

fix: update interactions tests to be less specific

6b40042

fix: clean up

34192e0

fix: update colors and positioning to match Figma

1a18226

fix: style updates to align with figma

16e29c2

fix: feedback optimizations, rebase updates

04df1a9

benlister-okta force-pushed the bl_stepper branch from c147916 to 04df1a9 Compare January 28, 2025 23:44

benlister-okta added 6 commits January 28, 2025 17:06

fix: add completed step marking logic

8bdb955

fix: remove dot navigation, update stories

f24e786

fix: update tests

edabed3

fix: story updates, active style tweaks

2246e26

fix: tweaks

d57f4b0

fix: align colors

717bc6e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stepper component #2465

Stepper component #2465

benlister-okta commented Jan 17, 2025 •

edited

Loading

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

benlister-okta Jan 28, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

bryancunningham-okta Jan 27, 2025

benlister-okta Jan 28, 2025

	marginTop: odysseyDesignTokens.Spacing3,
	marginBlockStart: odysseyDesignTokens.Spacing3,

Stepper component #2465

Are you sure you want to change the base?

Stepper component #2465

Conversation

benlister-okta commented Jan 17, 2025 • edited Loading

Summary

Component checklist

Code structure

Accessibility implementation

Internationalization (i18n) implementation

Documentation

Finalize code

QA

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benlister-okta commented Jan 17, 2025 •

edited

Loading