Stepper

Owned by Ange Romanska (Deactivated), created
Last updated: Jun 04, 2021 by Adam Butterworth (Deactivated)
3 min read

DESIGN COMPLETE IMPLEMENTATION IN PROGRESS

The three statuses above and their possible values:

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

DRAFT

DESIGN PENDING

IMPLEMENTATION PENDING

READY FOR REVIEW

DESIGN PLANNED

IMPLEMENTATION PLANNED

APPROVED TO ADD

DESIGN IN PROGRESS

IMPLEMENTATION IN PROGRESS

DEFERRED

DESIGN COMPLETE

IMPLEMENTATION COMPLETE

NEEDS CHANGES

 

 

For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal.

Steppers display progress through a sequence of separate steps towards a particular goal for more complex tasks. This provides a more manageable experience by allowing the user to focus on smaller pieces of the task at hand.

Contributors

@Ange Romanska (Deactivated) @Gabriel Weinberg @Marco Morales (Deactivated) @Jon F

Slack channel

Paragon Jira ticket

https://openedx.atlassian.net/browse/PAR-367

Other Jira tickets

https://openedx.atlassian.net/jira/software/projects/UXTL/boards/637?selectedIssue=UXTL-79

Design resources


Technical docs

1 Design | 2 Use cases | 3 Usage | 4 Best Practices | 5 Related Components | 6 Specification | 6.1 Behaviors | 6.2 Accessibility | 7 Notes

Design

 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=10737%3A3

 

Use cases

 

Discussion forum selection and configuration

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=4550%3A44819

 

Content library configuration

https://www.figma.com/file/qVBB0zuI9tcolyB9ylIrOF/Content-Library-Editing-Low-Fi?node-id=10%3A5530

Miro flow design in progress

 

Usage

 

This stepper can be used not only for initial setup, but also for future configuration changes over time by linking to the relevant step.

 

Steps

  • On page load, all steps will display a number and short label to help the user understand the sequence of actions towards setup or creation.

  • Steppers should follow a linear progression, requiring the user to navigate between all steps in chronological order for initial setup

  • Incomplete and active steps will always display a number. Completed steps will display a checkmark icon. Steps missing required input from the user will display the step error state.

 

Navigation

  • The "Next" button, positioned on the right side of the footer, is used to progress to the next step in the process. This button should be active and available at all times. On the final workflow step, this button can display a contextual label related to the action (ex: 'FINISH', or 'APPLY').

  • When the user has moved past the first step, display a Secondary outline button with a 'Back' label all the way to the left in the footer to allow them to move backwards in a linear progression.

  • The user can navigate back a single step, or multiple, but can only move forward with the 'Next' button in the footer. (The numbered steps and check marks are not interactive)

  • The user may move back a step if they have not completed the active step without validation being required for the current step. Any actions that have been taken on the current step should be retained (data should not be cleared unless the user is warned.

Note: Future use cases may require a third action button, positioned directly before the “Next” button, on the right. Examples include saving a draft or launching a preview within the flow.

 

Errors and warnings

  • Display the step error state and do not allow the user to move ahead on any step missing required input from the user. The error state should display a contextual label related to the active step.

  • Request confirmation from users who choose to exit and discontinue before completing all steps in the workflow. The user should understand that all edits and changes will be lost if they do so.

  • Display a browser confirmation dialog when closing the tab or navigating with the browser back button before completing all steps in the workflow. The user should understand that all edits and changes will be lost if they proceed.

 

Best Practices

Do

  • Use sentence case for step labels

  • Include descriptive text at the top of the page below the stepper, to provide welcoming context to the user. This text should not be simply a repetition of the step label, but be more helpful in orienting the user.

Don't

  • Don’t use more than 5 steps in any single workflow

  • Don’t use lengthy step labels. They should be short and descriptive.

  • Don’t use inline actions within the step content to jump between steps

  • Don’t use optional steps in a stepper workflow. If a feature or setting is optional, it should be incorporated into one of the other steps.

  • Don’t save any data associated with an incomplete workflow. The user must start again from the beginning.

Related Components

 

Specification

What does an engineer need to know in order to build this component?

 

Redlined Design Spec

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=10737%3A85

Behaviors

Accessibility

Incorporate a meaningful label into the ‘Next’ button or make this information available to screen readers.

Notes

Notes from collaborator conversations or meetings regarding this component.

XX.XX.20XX