New variant - Progress steps

[nuria-isart]

Applying the current progress steps we realise that the default one did not fit us. So, we propose a new one.

We don't know if we have to replace the old one with this one or create a new variant to the exisitng component.

Design

Component: https://sui-components.vercel.app/workbench/molecule/progressSteps/demo

The compressed one we will used it for mobile devices.

[turolopezsanabria]

• Mobile 1st
• The container is part of the container as well
• Should it be an atom? (for reusability) IT REQUIRES A NEW COMPONENT CREATION
• what if the title / copy is larger?
• the content in steps 2 3 4 could depend on previous selections: is it a good practice to pass all the content from start? (introduced for SEO purposes)

[turolopezsanabria]

Notes from Tuesday 220125 Sync

• We will review the component on Thursday 27 at 14, and close the definition of the component
• We won't start the coding part until all specs are attached to this discussion
• Specs will use the Specs template in Figma
• Same as all components and iterations, it needs 2 approves from people not working on the same team, 1 approve from DesignOps and approve from the designers who requested this iteration.
• If the decision is to create a new atom “stepper”, the molecule “progress step” should use this atom
• It means the new atom should include the current designs as well

[turolopezsanabria]

Notes from Tuesday 220127 Sync

Current problems this version aims to solve:

• The steps are too high
• The compressed version is too mobilish, with one label only at the same time

Questions still open

• Should there be a "max-steps".If not, how does it behave if there are 14 steps?
• Are all steps clickable at all times?
• Are steps always fullWidth, fixedWidth, or adaptive to the label?
• What happens if the text is too long to fit in one line?
• What's the min-width of a step?
• If the steps are clickable: How do the states look like?
  • Is hover the same for selected and default?
  • Is disabled possible?
  • Is disabled step different from blocked step?
• The steps done and inProgress look too similar
• Is the prototype animation finished? > The animation could "grow" on top of the gray line
• Is there an option with icons?
• Accept any node as Label
• This example from Ant helps to understand where the user is
• We should be able to "atomise" the elements in isolation. Just the bar and its animation for instance to be able to use it elsewhere jobs will need something similar soon (for privacy, figma can't be attached in this discussion)