Uploader / AnexoUpload
- Angular:
mds-anexo-upload - CSS/HTML (mds-styles): AnexoUpload
- Figma: ✅ — abrir Design System 2.0 ↗ (busque pelo frame “Modal Upload” dentro do arquivo)
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O AnexoUpload permite que o usuário envie um ou mais arquivos para o sistema. Ele oferece suporte para a funcionalidade de arrastar e soltar (drag & drop) e seleção manual, informando previamente as restrições de formato e tamanho para garantir a integridade dos dados.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Área de Drop: Deve ser visualmente distinta (borda tracejada) para indicar que é uma zona interativa. Use a instrução: Arraste os arquivos aqui.
- Ação Manual (Botão): O botão deve ser claro e direto. Use Caixa de Título.
- Exemplo: Selecione os Arquivos.
- Informação de Suporte: Use textos curtos em Caixa de Sentença para conectar as ações.
- Exemplo: ou se preferir.
- Formatos Suportados: Exiba claramente as extensões permitidas no rodapé do componente para evitar frustração do usuário ao tentar subir arquivos inválidos.
- Múltiplos Arquivos: Se o componente permitir mais de um arquivo, a interface deve sinalizar que a seleção múltipla está ativa.
Sugestão de Padronização de Nome
Seção intitulada “Sugestão de Padronização de Nome”O nome ideal para o Design System é: File Uploader .
- Por que?
- Figma: “Uploader” é um termo padrão da indústria para essa área de drag & drop.
- Angular/React: Resolve a diferença entre
AnexoUploadeUploader. - Contexto: O termo “Anexo” descreve o status do arquivo após o envio (ele vira um
AnexoItem), enquanto “Uploader” descreve o componente que realiza a ação. - - Sugestão de alteração de
AnexoItem→FileItempara ter a relação com oFileUploader