Design System
Fundamentos visuais, componentes e padrões de interface usados em todas as telas do HaisFaturamento. Use esta referência antes de criar qualquer tela nova.
Padrões
Navegação e sobreposições
Tabs, combobox, multiseleção, accordion, modal, menu de ações e tooltip.
Abas do produto
Exemplo real da página da operadora em Contratos. Usa as classes appTabs*: colunas de largura igual, ícone acima do rótulo no mobile.
- Quando usar
- • Visões irmãs do mesmo registro; nunca para navegar entre páginas
- Comportamento
- • Uma aba ativa por vez, destacada com fundo e sombra
- • Rótulos completos, sem truncar em telas largas
- Acessibilidade
- • Setas do teclado alternam entre abas (Radix)
- • Ícone decorativo; o rótulo nomeia a aba
AppModal e ConfirmDialog
AppModal para formulários (Cadastrar contrato, Nova versão TUSS); ConfirmDialog para ações destrutivas.
- Quando usar
- • AppModal para criar ou editar sem sair da listagem
- • ConfirmDialog antes de excluir ou descartar alterações
- Comportamento
- • Cabeçalho, corpo rolável e rodapé fixo
- • Ação primária desabilitada enquanto envia, evitando envio duplicado
- • Resultado confirmado por toast ao fechar
- Acessibilidade
- • Foco preso no modal e devolvido ao gatilho ao fechar
- • Esc fecha; título e descrição associados ao diálogo
Tabs
Divide um mesmo contexto em visões irmãs (Arquivos, Regras identificadas). Nunca use para navegar entre páginas.
Busca e seleção avançada
Combobox para listas longas com busca; MultiSelect quando o padrão é 'todos' selecionados.
Busca pelo nome da operadora
Escolha única
RadioGroup quando as opções mudam o fluxo (tipo de documento); Select/Combobox quando são apenas dados.
Seções colapsáveis
Accordion para formulários longos: mantenha aberta apenas a etapa em foco.
Sobreposições
Dialog com layout fixo (header/body/footer), menu de ações secundárias e tooltip curto.