Stepper Specification
- Overview
- User Stories
- Functionality
- Test Scenarios
- Accessibility
- Assumptions and Limitations
- References
Team Name
Developer Name
Stefan Ivanov
- Peer Developer Name | Date:
- Simeon Simeonov | Date:
- Product Owner Name | Date:
- Platform Architect Name | Date:
| Version | Users | Date | Notes |
|---|---|---|---|
| 1 | Names of Developers and Designers | Date |
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.
Must-have before we can consider the feature a sprint candidate
- The stepper should inform the user about the history of actions.
- The stepper should inform the user about the current progress.
- The stepper should inform the user about which and how many steps remain.
- The stepper should show the direction of movement.
- The stepper should support an arbitrary number of steps, usually, 3-5 are optimal.
- The stepper should support numbering as a way to show the order of steps.
- The stepper should support icons and visuals to better describe each individual step.
- The stepper should support a horizontal layout for desktop and vertical for mobile.
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.
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
| 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. | 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 | top |
| linear | Whether the validity of previous steps should be checked or not. | boolean |
false |
|
| animationSettings | Specifies the duration of the progress indicator animation. | AnimationSettings |
null |
| Name | Description | Return type | Parameters |
|---|---|---|---|
| navigateTo | Activates the step given as parameter. | void |
step: IgxStepComponent |
| Name | Description | Cancelable | Parameters |
|---|---|---|---|
| activeStepChanging | Emitted when the active step is about to change. | yes | { step: IgxStepComponent, owner: IgxStepperComponent, cancel: boolean } |
| activeStepChanged | Emitted when the active step is changed. | no | { step: IgxStepComponent, owner: IgxStepperComponent} |
| Name | Description | Type |
|---|---|---|
| valid | Gets whether the step is valid. | boolean |
| index | Gets the step index inside of the stepper. | number |
| 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 |
| Name | Description | Return type | Parameters |
|---|---|---|---|
| Name | Description | Cancelable | Parameters |
|---|---|---|---|
Automation
- Scenario 1:
- scenario 2:
ARIA Support
RTL Support
| Assumptions | Limitation Notes |
|---|---|
Specify all referenced external sources