Stepper vertical

[pihcardozo]

Olá. Precisamos do componente Stepper na vertical, isso é possível? Atualmente ele se apresenta na horizontal, mas para a tela de status que estamos trabalhando, ele na vertical será mais eficiente.

Segue exemplo de como ficaria aplicado na página:

Veja esta referência: https://ant.design/components/steps

[aweell]

Olá @pihcardozo!

Muchas gracias por tu contribución ❤️

Hemos estado revisando a fondo una solución para esta necesidad y creemos que una variante vertical del stepper actual puede que no sea la mejor solución.

La propuesta actual para adaptar el stepper a mobile

El stepper actual tiene un problema de escalabilidad en dispositivos móviles cuando el flujo de pasos tiene cierta complejidad o es excesivamente largo.

Consideramos que la siguiente solución escala mucho mejor para cualquier tipo de casuística y es la que recomendamos usar para flujos donde se divide la información en diferentes pasos.

Ejemplo →

Casos de uso similares

Se han identificado otros casos en los que se utiliza esta solución:

Creemos que el denominador común tanto en la solución que presentas como en las imágenes de la parte superior es que se trata de una serie de eventos que se colocan a lo largo de una línea temporal y que presentan al usuario información acerca de un proceso.

Nuevo componente timeline / eventHistory

Lo más adecuado en este caso sería entonces crear un nuevo componente que cubra esta necesidad y que aporte elementos adecuados a este tipo de procesos, dejando el stepper para otro tipo de casos de uso.

[pihcardozo]

Perfeito, @aweell!

Obrigado pelo retorno. Só mais uma dúvida. No exemplo enviado tem um pontilhado abaixo do ícone, este pontilhado faz parte de algum componente ou foi adicionado atomicamente?

[aweell]

Es atómico si

[pihcardozo]

Olá, Alex!

Entendo, mas a equipe que está trabalhando com estes layouts, gostaria de seguir com a proposta inicial, que seria uma construção atômica, pois atende melhor as necessidades levantada pela squad.

Visto que o exemplo enviado há composição atômica, não poderíamos seguir conforme o plano proposto pela squad local?

[aweell]

Buenas @pihcardozo,

Tratándose de momento como una construcción atómica puede construirse como el producto lo requiera.

[aweell]

@BiancaMach Enlazo aquí #1840 y respondo en línea con el approach que valoramos cuando lo planteo @pihcardozo.

No consideramos que este elemento sea directamente una variante vertical del stepper, sino que hay matices que nos empujan a pensar que es otra cosa (ese componente timeline/eventHistory)

Por destacar algunas diferencias que hemos identificado entre los dos:

• Interaction vs information display: El stepper responde a casos de uso donde el usuario interactúa con un flujo que se ha dividido en pasos, incluso, una evolución posible, si es que el flujo no es estrictamente lineal, que los propios steps sean interactivos, de manera que el usuario pueda navegar a través de ellos, en vez de usar unos botones de previous/next. El "timeline" en cambio da información sobre el progreso de un flujo en el cual el usuario no necesariamente tiene que interactuar con el mismo, sino que son una serie de steps que se van produciendo y se actualizan sin necesidad de interacción.
• Purpose: Como comentaba antes, vemos el stepper un componente idoneo para casos como formularios multi-step, procesos de checkout o flujos de onboarding por el contrario, el "timeline" parece mas adecuado para indicar milestones, historicos de eventos o trackear el progreso.
• States: El stepper a priori no necesita mostrar ningún tipo de estado en sus steps, cuando uno de los pasos anteriores no se ha completado puede por ejemplo bloquearse el avance del usuario. El timeline que muestras por ejemplo si requiere de estados, hay dos ejemplos en el Figma que compartes que muestra un estado de "warning" donde se ha retrasado un pedido y otro de "error" donde se ha cancelado el pedido.

Creemos que un componente como el timeline tiene sentido dentro de Mistica, planteándolo como algo diferente al stepper vertical (que podría ser algo como: https://design.elisa.fi/9b207b2c3/p/025813-stepper) pero consideramos importante hacer esta distinción entre los dos componentes.

Si este approach os encaja creamos una issue para abordar este componente y como en otros casos, creemos ticket en JIRA también y prioricemos cuándo debe trabajarse en esta tarea.

[BiancaMach]

@aweell Suas considerações fazem todo sentido. O componente e a necessidade dele é para que seja uma timeline de fato. Alterei a POC com uma construção mais estruturada, considerando também o Desktop. Alterei o ticket já aberto no Jira, aqui está o link: https://jira.tid.es/browse/OBVIVO-2748. Você pode criar a issue para esse componente aqui no Git?

[aweell]

Perfecto @BiancaMach! creamos issue para trabajar este nuevo componente. Prioricemos este ticket si es necesario para Q4.

Muchas gracias por tu estudio, es muy valioso para abordar el componente, si aparece alguna necesidad más, si es posible, incluirla en el documento de POC sería estupendo, así lo podemos tener en cuenta.

[BiancaMach]

olá @yceballost @aweell Surgiu a necessidade de propor algumas mudanças na POC do componente de Timeline para se adequar às necessidades do time de design. Vi no card do Jira (https://jira.tid.es/browse/OBVIVO-2748) que estão na definição do desenho, então peço que considerem as alterações que fizemos. Não mudamos muito, apenas adicionamos alguns detalhes e variações. Deixamos nesse mesmo arquivo do Figma:
https://www.figma.com/design/XwL4DYDJYLokQxHuhI4DyB/POC---Timeline?node-id=331-5823&t=8F1iJCb0SzFUDk09-1.

[yceballost]

Gracias @BiancaMach por escribir! :) La semana pasada estuvimos pensando un planteamiento y esta semana lo hemos paralizado por una cosa ajena a la tarea, os parece si la semana que viene tenemos una reu (quizás no hace falta esperar al jueves) para que os enseñemos el planteamiento a ver si os encaja? Allí mismo podemos ver esta necesidad que comentas y el cómo podría incluirse.

Si te parece bien convoco una reunión a principios de semana, solo dime por Teams a quién quieres que incluya en esa reunión :)