Stepper/Wizard Component Timeline

[tonysip]

I'm working on a project where a step-by-step wizard will be useful. I found this figma brainstorm doc and the vertical full page version is exactly what I was looking for. I'm wondering if we have a timeline of when this might be available as a paste component for our engineers to leverage? Thank you!

[andioneto]

Hi @tonysip! As of January we were actively collaborating with some of our Twilio product partners on this as a contribution to the design system. I will check in with the team and get an updated status as well as ETA for you.

[andioneto]

Hi again @tonysip 👋

Given the current HAP we are not working on new features for now. We encourage you to:

• check in with us again next quarter
• if you need it sooner, feel free to join #tmp-pattern-wizard on Slack, where our contributors have a ton of context around the effort.

[dreamealist]

Hi team, I brought this to DS office hour previously, and my team just finished the UX design of a conversations API wizard that uses Stepper component, and the dev team is building it. I would like to follow up on any future discussion about Stepper component and contribute to Paste. I will follow up on #tmp-pattern-wizard slack channel.
Here is a prototype link

[gloriliale]

Hi @dreamealist! Just wanted to share the office hours recording with you in case you'd like to revisit any of our conversations. Here's the video, and the password is posted in the #help-design-system channel. Thanks again for coming to office hours!

[serifluous]

Hey @dreamealist I wanted to follow-up to let you know we're planning engineering work to do an API exploration for the Stepper, likely as we finish out 1 Twilio component updates toward the end of Q1.

We'll then build off the previous committee feedback and the work you and other designers have already done on the component to release it. Feel free to keep discussing Stepper in the Figma file like you already are, and please continue encouraging other people to submit a dependency request for Stepper if you see the need keep coming up—thanks!

[dreamealist]

That's awesome to hear @serifluous ! Although our Conversations eng team is starting to implement the old Paste version of it based on my design, aiming to finish it in 1-2 weeks, it's good news for us that Paste will release the official component by Q1. I will let the team know! Thanks for communicating this timely.

[dreamealist]

Here is the latest stepper component iteration that already has variants enabled: (Collaborated with @kelseycavitt and Liberty) https://www.figma.com/file/K1ftrUI2O7VYKZcKH2Ghdl/Stepper-component-brainstorming?node-id=1573%3A336115&t=Q7TOjSVgNBI6jmzq-1

For the Conversations team's Q1 feature development, we're using this one moving forward.

In this version, there are three states: 1) incomplete, 2) active, 3) complete
we used the circle visual for both the "active" state and "incomplete" state and a circle check mark for the "complete" state
we used the navy color to indicate when it's active or complete.
To highlight the "active" state, we used bold text.

This circle element doesn't exist in the current Paste design system, so we will need to add this component to the design system library when implementing the stepper. Thanks team! Let me know if you have any additional questions.

[kelseycavitt]

thanks @dreamealist ! So, I chatted with Sarah, there's actually no need to get the open circle icon added into Paste just now, as the design of the Stepper component may change once we begin working on it. Your developers can just create a circle on their own, as this is a component built for your own team at this time. Additionally, your developers can create a circle and just use a checkmark within the circle itself to build that "completed" state. Let me know if that makes sense!