patternfly-design
patternfly-design copied to clipboard
ProgressStepper design proposal: "minor' waypoints
I like the ProgressStepper proposal. I would like to suggest that you consider a requirement for “minor” waypoints. See the attached screenshot (from Roon). Note how it has little dots, versus the big and iconified circles. The little dots signify waypoints that are relevant, but perhaps of lesser interest.

And here is a version of it hacked into our code, using the patternfly prototype DOM and stylesheets from your component browser.

Side opinion: personally, I prefer the spacing and generally thinner border approach in the Roon app?
fwiw, with a few small tweaks

@starit we will add this to our feature roadmap. We are currently scheduling into Q1 2022.
Here is a design I put together @starpit @mcarrano. I wanted to ask a few questions about the use case for this feature. The screenshot shows some potential use cases but wanted your product details as well.
- The first example is subtasks in the main step. Like parts of a form. If the user is meant to interact with these minor waypoints (clickable) I think a wizard or progressive form would serve that purpose and these are waypoints available.
- The second use case could be an installation process where we offer a more detailed view of what is involved in the install process.
- Finally, the third use case highlights that there are optional steps such as Advanced settings. In that case I thought it might be good to also add a status colour to show that the waypoint was completed.
Any thoughts or specific examples you have would be helpful.

@starpit any feedback on the above?