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.
Componentes
Upload de arquivos
Área de arrastar ou selecionar arquivos, com validação de formato e tamanho.
Área de upload
Exemplo real de Cadastrar contrato e Adicionar aditivo. Arraste um arquivo ou clique para selecionar; nada é enviado.
Arraste e solte o arquivo aqui
PDF, DOC ou DOCX • Máx. 10 MB
- Quando usar
- • Envio de documentos em modais de cadastro (Contratos, TUSS, Base de precificação)
- • Texto de apoio sempre no formato "FORMATOS • Máx. TAMANHO"
- Comportamento
- • Vazio: área tracejada com instrução de arrastar ou selecionar
- • Arrastando: borda e fundo em primary
- • Selecionado: nome truncado com tooltip e ações Substituir/Remover
- • Inválido: mensagem de erro abaixo do campo e arquivo não é aceito
- • Envios múltiplos por versão fazem rollback se algum arquivo falhar
- Acessibilidade
- • Input nativo acessível pelo teclado, associado ao rótulo
- • Erro anunciado com role="alert" e aria-invalid
- • Ações de substituir e remover com rótulos descritivos