Progress indicator: Usage tab

[sstrubberg]

Ref issue: #3362
Ref boxnote: Usage tab pdf

Summary note

Usage template: Update this Usage tab by following the Usage template. There are a lot of valid sections missing throughout the page.

Description: Possibly revise the leading description of the Progress indicator Usage tab page to make it more clear.

Best practices section:

• When mentioning logical progression, elaborate on the progression that should be used whether it's the vertical or horizontal variant.
• Think about adding an in-context image to show the hover of a step label being interactive, which indicates you can move to previous/future steps.
• Determine if we should recommend numbering the labels of each step depending on the use case to make it more clear where you are in the step flow.

Update checklist

Overview

• Description: Possibly revise the leading description to make it more clear
• When to use
• When not to use (optional)
• Variant table

Formatting

• Anatomy
• Sizing (optional) Only one size
• Alignment (optional) - show the Vertical direction here
• Placement

Content

• Main elements
• Overflow content
• Further guidance

Behaviors

Probably move the current "Best practices" section here

• When mentioning logical progression, elaborate on the progression that should be used whether it's the vertical or horizontal variant.
• Think about adding an in-context image to show the hover of a step label being interactive, which indicates you can move to previous/future steps.
• Possibly recommend numbering the labels of each step depending on the use case to make it more clear where you are in the step flow.
• States
• Interactions
• Validation
• Responsive behavior
• Default selection
• Clickable areas
• Loading

Modifiers

• Shows different ways of styling the component.

Related

• Provide link(s) to related components/patterns

References

• Provide research

Feedback

• Feedback