LegendItem
- Angular:
mds-legend-item - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O LegendItem é o componente atômico projetado exclusivamente para compor a LegendBar. Ele atua como o par descritivo que traduz elementos visuais (cores, formas ou ícones) em significados textuais, sendo o bloco construtor de toda a barra de legendas do sistema.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- texto de Uso: O LegendItem não deve ser utilizado de forma isolada na interface; ele deve sempre estar contido dentro de uma LegendBar para garantir o alinhamento e o comportamento de exibição (fixo ou minimizado).
- Identidade Visual: O elemento gráfico do item (círculo, ícone ou tag) deve ser uma réplica exata do que o usuário vê nos cards, tabelas ou mapas para evitar confusão.
- Escrita (UX Writing):
- Use Caixa de Sentença.
- Mantenha o texto extremamente curto (preferencialmente até 3 palavras).
- Não utilize ponto final, facilitando a leitura em linha dentro da barra.
**Exemplos de Escrita **
Seção intitulada “**Exemplos de Escrita **”| Elemento Visual no Item | Texto do LegendItem | Significado para o Usuário |
|---|---|---|
● (Verde) |
No prazo | A operação está ocorrendo conforme o planejado. |
● (Laranja) |
Atraso leve | O veículo está até 30 min fora do cronograma. |
! (Ícone) |
Ocorrência aberta | Existe um problema pendente de resolução. |