Stepper Specification

Stepper Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. Test Scenarios
5. Accessibility
6. Assumptions and Limitations
7. References

Owned by

Team Name

Developer Name

Stefan Ivanov

Requires approval from

• Peer Developer Name | Date:
• Simeon Simeonov | Date:

Signed off by

• Product Owner Name | Date:
• Platform Architect Name | Date:

Revision History

Version	Users	Date	Notes
1	Names of Developers and Designers	Date

1. Overview

Objectives

The stepper conveys the progression of a sequence of individual steps indicating how much of a workflow has been completed and how much is left. It usually shows as a vertical or horizontal line with connected, numbered elements indicating the individual steps.

Acceptance criteria

Must-have before we can consider the feature a sprint candidate

1. The stepper should inform the user about the history of actions.
2. The stepper should inform the user about the current progress.
3. The stepper should inform the user about which and how many steps remain.
4. The stepper should show the direction of movement.
5. The stepper should support an arbitrary number of steps, usually, 3-5 are optimal.
6. The stepper should support numbering as a way to show the order of steps.
7. The stepper should support icons and visuals to better describe each individual step.
8. The stepper should support a horizontal layout for desktop and vertical for mobile.

2. User Stories

Elaborate more on the multi-facetted use cases

Developer stories:

• Story 1: As a developer, I want to be able to choose the stepper layout, so that I can show a horizontal one on desktop and a vertical one on smartphone screens.
• Story 2: As a developer, I want to be able to choose whether steps are mandatory or optional, so that I can have proper validation at the end of the flow.
• Story 3: As a developer, I want to be able to define arbitrary layout as the content for a step, so that I can create progressive forms and onboarding flows without being constrained.
• Story 4: As a developer, I want to be able to define the position of the label for step, so that I can place it before, after, above or below the visual indication.
• Story 5: As a developer, I want to be able to customize the visual step element, so that I can add a graphic element in it.
• Story 6: As a developer, I want to be able to define whether a line should be drawn to connect the steps, so that I can support the user to understand the sequence of steps.
• Story 7: As a developer, I want to be able to define the stepper as strictly linear (gated mode vs. ungated mode where you navigate steps freely), so that I don't let users to move to the next step unless everything up to it has been completed.
• Story 8: As a developer, I want to disable the navigation of the stepper, so that it only serves as a visual cue but cannot be clicked to navigate between steps.

End-user stories:

• Story 1: As an end-user, I want to have a clear visual indication of what I should expect from each step, so that I know which ones are relevant/important to me.
• Story 2: As an end-user, I want to have a clear visual indication for the step I am currently at, so that I know approximately how much is left.
• Story 3: As an end-user, I want to have a clear visual indication for completed and uncompleted steps, so that I can finish what is left.
• Story 4: As an end-user, I want to have a clear visual indication for optional steps, so that I can skip them if they are not relevant.
• Story 5: As an end-user, I want to navigate between the steps with the keyboard one at a time, so that I can fill a progressive form more quickly.
• Story 6: As an end-user, I want to observe the progress of a multistep process, so that I can e.g. track the delivery of an order.

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End-User Experience Nesting steppers into each other is frustrating and destroys the UX.

References for well-designed and functional steppers:

3.2. Developer Experience

• The developer should be able to add multiple steps.
• The developer should be able to re-template the indicator of the steps.
• The developer should be able to re-template the label of the steps.

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. Keyboard Navigation

Keys	Description
Arrow Up	Focuses the previous step in a vertical stepper.
Arrow Down	Focuses the next step in a vertical stepper.
Arrow Left	Focuses the previous step in a horizontal stepper.
Arrow Right	Focuses the next step in a horizontal stepper.
Home	Focuses the first step of the stepper.
End	Focuses the last step of the stepper.
Enter / Space	Activates the currently focused step.
Tab	Moves the focus to the next tabbable element.
Shift + Tab	Moves the focus to the previous tabbable element.

3.5. API

IgxStepperComponent

Options

Name	Description	Type	Default value	Valid values
id	The id of the stepper. Bound to attr.id	string	'stepper-${iter}'
steps	Gets/sets the collection of steps that will be rendered in the stepper.	QueryList<IgxStepComponent>
orientation	Gets/sets the orientation of the stepper.	IgxStepperOrientation	horizontal	horizontal | vertical
stepType	Gets/sets the type of the steps in the stepper.	IgxStepType	indicator	indicator | label | full
labelPosition	Gets/sets the position of the labels in the stepper.	IgxStepperLabelPosition	bottom	bottom | top | end | start
linear	Whether the validity of previous steps should be checked and only in case, it's valid to be able to move forward or not.	boolean	false
animationSettings	Specifies the duration of the progress indicator animation.	AnimationSettings	null
invalidIcon	Gets/sets the icon name that will be rendered inside the step if it is invalid after moving to the next step.	string
validIcon	Gets/sets the icon name that will be rendered inside the step if it is valid after moving to the next step.	string
indicatorTemplate	Get/Set a reference to a custom template that should be used for rendering the indicator of the steps.	TemplateRef<any>
labelTemplate	Get/Set a reference to a custom template that should be used for rendering the label of the steps.	TemplateRef<any>

Methods

Name	Description	Return type	Parameters
navigateTo	Activates the step given as a parameter.	void	step: IgxStepComponent
reset	Resets the stepper to its initial state.	void

Events

Name	Description	Cancelable	Parameters
activeStepChanging	Emitted when the active step is about to change.	yes	{ oldIndex: number, newIndex: number, owner: IgxStepperComponent, cancel: boolean }
activeStepChanged	Emitted when the active step is changed.	no	{ index: number, owner: IgxStepperComponent}

IgxStepComponent

Accessors

Name	Description	Type
valid	Gets whether the step is valid.	boolean
index	Gets the step index inside of the stepper.	number

Options

Name	Description	Type	Default value	Valid values
active	Gets/sets whether the step is activated.	boolean	false
skip	Gets/sets whether the step should be skipped.	boolean	false
optional	Gets/sets whether the step is optional.	boolean	false
interactable	Gets/sets whether the step is interactable.	boolean	true
state	Gets/sets the step state.	IgxStepState	unvisited	completed | current | unvisited
label	Gets/sets the text of the step label.	string
icon	Gets/sets the icon name of the step. If provided, the icon will be rendered inside the step indicator, instead of the default content	string

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters
activated	Emitted when the step's active property changes	no	boolean

4. Test Scenarios

Automation

• Scenario 1:
• scenario 2:

5. Accessibility

ARIA Support

RTL Support

6. Assumptions and Limitations

Assumptions	Limitation Notes

7. References

Specify all referenced external sources