UX design pattern: Horizontal step wizard

[ccbarragan]

UX design pattern guidance around vertical vs. horizontal step wizards for Release Planner + associated apps. Part of https://github.com/Azure/azure-sdk-tools/issues/6596

Previous guidance: Horizontal tab list, Step wizard

Success criteria

• Design pattern is scalable and can be applied across other apps to create a coherent experience for service partners.
• Design pattern is pressure-tested for accessibility, color, and usability.
• Design pattern reuses common Fluent components.

Tasks

• [x] Create lo-fi designs for review
• [ ] Add to templated pattern guidance
• [ ] Hand-off for implementation

[ccbarragan]

Lo-fi concepts: https://www.figma.com/file/JzbPB3xPwrjdxJ5SiG7hYD/Design-sync%3A-SDK-readiness?type=whiteboard&node-id=303%3A13901&t=iz2ZGiDEft8DIXgE-1

[ccbarragan]

Fluent 2 doesn't have a designated step wizard component. Instead, developers modify the Tablist component.

Other examples of step wizards:

• Azure: https://eng.ms/docs/products/azure-portal-framework-ibizafx/designguide/templates/design-patterns-step-wizard
• Coherence: https://coherence-portal.azurewebsites.net/Controls/Wizard#Examples&Product%20sample