Phases
Navegador das fases de um documento de processo — RFQ/RFP/RFI e suas rodadas, lotes de um leilão.
Organism do EletroDS (Design Labs / Snow Flakes) — ainda em laboratório, não no catálogo estável. Confira o comportamento antes de usar no ME.
O Phases é o rail que estrutura um documento de processo (Cotação/RFQ, Leilão): lista as fases do processo — o arquivo inicial e suas rodadas, RFP, RFI — e deixa o usuário navegar entre elas sem sair do documento. É próprio das telas full-page de processo, à esquerda do conteúdo; não aparece em documentos simples (Pedido, Requisição…).
Anatomia
| Parte | O que é |
|---|---|
| Cabeçalho | Título ("Phases") + ação Criar novo (adiciona uma fase). |
| Nó pai | Tile de ícone + nome da fase + badge "N rodadas/passos" + subtítulo (ex.: "Arquivo inicial"). O nó selecionado fica em destaque (tile sólido + texto primary). |
| Filhos | As rodadas/etapas da fase, ligadas ao pai por um conector em árvore (espinha vertical + ramo em L). Cada filho tem tile claro + nome + subtítulo. |
Quando usar
| Quero… | Use |
|---|---|
| Navegar entre as fases de uma Cotação (rodadas, RFP, RFI) | Phases no documento de processo |
| Navegar entre lotes/rodadas de um Leilão | Phases |
| Trocar de seção dentro do mesmo documento (Itens, Histórico) | Tabs — não o Phases |
| Documento simples sem fases (Pedido, Requisição) | Sem rail — a tela é full-page direta |
Estados
| Estado | Comportamento |
|---|---|
| Fase selecionada | Tile sólido primary + texto primary + fundo de realce; o conteúdo à direita reflete a fase. |
| Fase não selecionada | Tile claro (primary/10), texto neutro. |
| Fase concluída | Ícone de check no tile + tom de concluído — sinal redundante à cor. |
| Fase em andamento (atual) | Indicador de fase ativa do processo (não confundir com "selecionada", que é só a navegação). |
| Fase futura / pendente | Tom esmaecido; ainda não iniciada. |
| Com rodadas | Expande os filhos sob o conector em árvore. |
Onde se aplica
No código
Organism do EletroDS em Design Labs (Snow Flakes) — ainda sem entrada estável no catálogo. Confira o comportamento em eletro.design antes de usar; a API ainda pode mudar.
Acessibilidade
- O rail é um landmark de navegação (lista/árvore); a fase atual é marcada com
aria-current="step". - Os estados (concluída / atual / futura) têm sinal redundante à cor (ícone/texto +
aria-*), nunca só o tom. - Teclado: navegar as fases e rodadas por setas;
Enterseleciona; foco visível em cada nó. - O conector em árvore é decorativo (
aria-hidden) — a relação pai/filho é exposta pela semântica da lista.