Guia de Uso - Severidade Badge

Status: Implementado (Design System 1.0 - 02/02/2026) - Componente para exibir niveis de severidade com peso visual progressivo.

Indice

1. Introducao
2. Estrutura HTML
3. Niveis Visuais
4. Uso com FormatterRegistry
5. Opcoes de Configuracao
6. Dark Mode
7. Exemplos

---

Introducao

O componente Severidade Badge exibe valores numericos de severidade (0-10) com feedback visual progressivo:

• Font-weight crescente: De 400 (fino) ate 900 (muito bold)
• Transform scaleX: De 1.0 ate 1.4 (numero fica mais "gordinho")
• Cor de fundo: Verde (baixa) → Amarelo (media) → Vermelho (alta)
• Cor do texto: Herda do contexto (compativel com tabelas light/dark)

Quando Usar

Use severidade badge quando:

• Mostrar niveis de risco ou prioridade (0-10)
• Indicar severidade de alertas ou incidentes
• Exibir scores ou pontuacoes em escala fixa
• Destacar valores criticos visualmente

Evite usar quando:

• O valor nao representa uma escala de severidade
• Precisa de mais de 10 niveis
• O contexto nao justifica destaque visual

---

Estrutura HTML

Estrutura Basica

<span class="severidade-badge severidade-badge--level-5" data-severidade="5" title="Severidade: 5 de 10">
    <span class="severidade-badge__value">5</span>
</span>

Classes

Classe	Descricao
.severidade-badge	Container principal
.severidade-badge--level-{0-10}	Nivel visual (0 a 10)
.severidade-badge__value	Texto do numero

---

Niveis Visuais

Cada nivel tem configuracao visual distinta:

Nivel	Font-weight	ScaleX	Cor de Fundo
0	400	1.00	Verde muito claro
1	450	1.04	Verde claro
2	500	1.08	Verde
3	550	1.12	Verde-amarelo
4	600	1.16	Amarelo-verde
5	650	1.20	Amarelo
6	700	1.24	Amarelo-laranja
7	750	1.28	Laranja
8	800	1.32	Laranja-vermelho
9	850	1.36	Vermelho claro
10	900	1.40	Vermelho

---

Uso com FormatterRegistry

O componente pode ser usado declarativamente em listagens via FormatterRegistry.

Registro

O formatter ja esta registrado com os aliases:

• severidade
• severity

Uso em modelarListagem()

public function modelarListagem(): array
{
    return [
        'id' => ['label' => 'ID'],
        'nome' => ['label' => 'Nome'],
        'nu_severidade' => ['label' => 'Severidade', 'format' => 'severidade'],
        'position' => ['id', 'nome', 'nu_severidade']
    ];
}

HTML Gerado

Para um valor 5, o FormatterRegistry gera:

<span class="severidade-badge severidade-badge--level-5" data-severidade="5" title="Severidade: 5 de 10">
    <span class="severidade-badge__value">5</span>
</span>

---

Opcoes de Configuracao

Limites Customizados

Por padrao, a escala e de 0 a 10. Para usar limites diferentes:

// Escala de 1 a 5
'campo' => ['label' => 'Nivel', 'format' => 'severidade:1:5']

// Escala de 0 a 100 (sera normalizado para 0-10 visualmente)
'campo' => ['label' => 'Score', 'format' => 'severidade:0:100']

Formato

severidade[:min[:max]]

Parametro	Padrao	Descricao
min	0	Valor minimo da escala
max	10	Valor maximo da escala

---

Dark Mode

O componente suporta dark mode automaticamente:

• Cor do texto: Herda do contexto (usa color: inherit)
• Cor de fundo: Aumenta opacidade no dark mode para melhor contraste

Variaveis CSS Usadas

/* Cor do texto herdada do sistema */
color: var(--color-text-primary, inherit);

Nao e necessario configurar nada - o componente se adapta automaticamente ao tema.

---

Exemplos

Exemplo 1: Listagem de Riscos

// Model/TipoRisco/Listing.php
public function modelarListagem(): array
{
    return [
        'id_tipo_risco' => ['label' => 'Codigo'],
        'no_tipo_risco' => ['label' => 'Nome'],
        'nu_severidade' => ['label' => 'Severidade', 'format' => 'severidade'],
        'bo_ativo' => ['label' => 'Situacao', 'format' => 'status'],
        'position' => ['id', 'no_tipo_risco', 'nu_severidade', 'bo_ativo']
    ];
}

Exemplo 2: Escala de Prioridade (1-5)

// Model/Tarefa/Listing.php
public function modelarListagem(): array
{
    return [
        'titulo' => ['label' => 'Titulo'],
        'prioridade' => ['label' => 'Prioridade', 'format' => 'severidade:1:5'],
        'position' => ['titulo', 'prioridade']
    ];
}

Exemplo 3: HTML Manual

<!-- Severidade 1 (baixa) -->
<span class="severidade-badge severidade-badge--level-1">
    <span class="severidade-badge__value">1</span>
</span>

<!-- Severidade 5 (media) -->
<span class="severidade-badge severidade-badge--level-5">
    <span class="severidade-badge__value">5</span>
</span>

<!-- Severidade 10 (critica) -->
<span class="severidade-badge severidade-badge--level-10">
    <span class="severidade-badge__value">10</span>
</span>

---

Boas Praticas

1. Use para escalas fixas: O componente e otimizado para escalas de 0-10
2. Contexto importa: Use onde a severidade tem significado real
3. Combine com outras informacoes: Severidade sozinha pode nao ser suficiente
4. Considere acessibilidade: O title ajuda usuarios de leitores de tela

---

Arquivos Relacionados

• CSS: /public/css/design-system/components/severidade.css
• FormatterRegistry: /vendor/Agrodefesa/library/View/Componentes/Table/FormatterRegistry.php

---

Versao: 1.0.0 Data: 02/02/2026 Autor: Design System SIDASP