Multi-step nav

[jrubenoff]

We have a few different components for multi-step navigation. Screendoor's wizard checklist lets you navigate to any step:

I dislike this component because it takes up a lot of horizontal space. Also, the "checked" status is meaningless. Just because you visited a page, filled something out on that page, or even filled out everything doesn't mean you're done with it.

(For example, you could have a rough draft of a Screendoor project description, and the checklist would still mark it as "done".)

Screendoor's bottom status bar lets you navigate to the previous / next page:

The tabs currently in the style guide are great if you don't have to go through each step in order:

And for some flows, like when sending a message or importing responses in Screendoor, we have no components.

We probably need to come up with a few different patterns. I was thinking about switching to respondent view-style pagination for the wizard. Something like:

But this wouldn't work for a linear flow like importing responses, where it doesn't make sense to jump around between steps.

[ajb]

(I think your first screenshot is not the right one.)

Also, the "checked" status is meaningless. Just because you visited a page, filled something out on that page, or even filled out everything doesn't mean you're done with it.

I agree. A contract designer added it in ~2 years ago, and it's never made any sense to me.

I was thinking about switching to respondent view-style pagination for the wizard.

I'm not so sure this is a good idea. By hiding the nav items under a dropdown, we're expecting the user to know what those items are. (As well as increasing the number of clicks required to navigate to one of those items.)

Imagine a user who's not very familiar with Screendoor knows that they need to add a new form field to their project. I think having all of the wizard steps visible makes this a lot easier than if they're hidden in a dropdown.

Anyway, I'm definitely in favor of adding a new component; in fact, this is what I had in mind when I opened https://github.com/dobtco/dvl-core/issues/55. I'll go ahead and close it now since I never really added a good enough description.

[jrubenoff]

Fixed the screenshot above. And yeah, not pushing for a specific solution, just jotting my thoughts down for reference.

In response to your concerns (again, not pushing for this, just writing down my thoughts), the dropdown makes the most sense if people are progressing through the wizard in a linear fashion, which they'll probably do the first time around, at least.

[jrubenoff]

Closing in favor of #242