componentes

steps

Forma de representação de progresso em um fluxo.

índice

demo interativa

Uma versão de interativa do componente desenvolvido.

propriedades*

propertydescriptionrequireddefault valuetype

vertical

falseundefinedboolean

stepList

trueundefinedStepList

currentStep

false0number

compact

falsefalseboolean

isCompleted

falsefalseboolean

*valores gerados automaticamente.

propriedades do stepList

nometipodescriçãodefault
keynumberChave única do step0
stepNamestringNome do stepundefined
etcbooleanRenderiza um ícone de "..." ao invés da keyundefined
etcDonebooleanRenderiza o ícone de "..." pintado com a cor primariaundefined

propriedades para estilização (styled props)

Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:

formatação

Ilustração de uma barra de progresso, marcada por destaques de 1 a 5. O destaque de número 1 esta sobre o ícone de sucesso. No número 2 o passo que esta ativo, que tem número e texto. O número 3 marca o texto dentro do passo ativo. O número 4 é um ícone de reticiencias, marcando o agrupamento dos passos ocultos. Por fim, o destaque número 5 marca a última etapa da barra.
  1. Completed step: representam as etapas já preenchidas.
  2. Active step: representa a etepa em preechimento.
  3. Step title: nome da etapa atual.
  4. Group: grupo de passos escondidos do fluxo.
  5. Next steps: etapas futuras.

uso

Os steps são usados para guiar a pessoa usuária em uma sequência de telas, ajudando a dar uma expectativa do passo atual e próximos passos.

variaçãoutilização
verticalPode ser usado em telas mais complexas ou como acompanhamento de um processo assíncrono.
horizontalMais adequado a fluxos mais introdutórios, como onboarding, ou em mobile.

grupos e alinhamento

  • Vertical: é alinhado ao texto.
  • Horizontal: ocupa todo espaço horizontal disponível.
Ilustração de tela web com barra de progresso horizontal ocupando toda largura da tela.
certoUse steps ocupando todo espaço disponível.
Ilustração de tela web com barra de progresso horizontal ocupando parcialmente a largura da tela.
erradoNão agrupe os steps em um canto da página.

guia de conteúdo

  • O nome dos steps deve ser objetivo e significativo.
  • Dados de acesso.
certoUse nomes com significado.
  • Primeiros passos.
erradoNão use títulos genéricos.

guia de design

esperado

  • Tem símbolo no Figma.
  • Tem todos os estados aplicáveis.
  • Texto possui contraste acessível (WCAG 2.0 - Nível AA).
  • Usa os design tokens.
  • Possui versão mobile.
  • Tem guia de uso.
  • Tem guia de conteúdo.
  • Possui todas as variações necessárias.
  • Possui versão web.
  • Possui versão responsiva.

ideal

  • Atende ao nível AAA de acessibilidade (WCAG 2.1).
  • Tem microinterações no Figma.
  • Possui animações no componente.
  • Tem em todos os frameworks com que trabalhamos.
  • Comporta múltiplos idiomas.

    conteúdo relacionado

    Migração do United para Olist Design System

    Propriedades

    UnitedOlist Design System
    currentStepcurrentStep
    totalSteps❌
    label❌
    onClickNext❌
    onClickPrev❌
    showFirstPrev❌
    variationBtnPrev❌
    btnTextPrev❌
    btnTextNext❌
    variationBtnNext❌
    disableBtnNext❌
    disableBtnPrev❌
    hiddenPogressBar❌
    isBtnNextLoading❌
    isBtnPrevLoading❌
    progressBarHeight❌
    ❌vertical
    ❌stepList
    ❌compact
    ❌isCompleted