Modal
- Angular:
mds-float-panel - CSS/HTML (mds-styles): FloatPanel type=modal
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”A Modal é uma janela centralizada que interrompe o fluxo do usuário para exigir uma ação ou fornecer informações detalhadas. Ela bloqueia a interação com a página principal até que seja fechada ou confirmada.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Uso: Visualização de detalhes de carga, alertas críticos, diálogos de confirmação ou mensagens de erro.
- Título: Deve ser curto e direto. Se for uma pergunta, use pontuação final.
- Exemplo: Excluir rota?
- Uso de Reticências (…): Se o botão que abre a modal for, por exemplo, “Configurar…”, a modal deve ter o título “Configurações”.
- Hierarquia: Coloque a informação mais importante no início do texto.
Sugestão padronização
Seção intitulada “Sugestão padronização”Adotar os nomes Modal e Drawer como componentes distintos no Design System, unificando o “FloatPanel” do Angular sob essas duas categorias.
- Drawer (Painel Lateral): Focado em fluxos de trabalho. Ideal para formulários de cadastro ou edição. Por abrir na lateral, ele permite que o usuário ainda veja parte da tabela ou mapa ao fundo, mantendo o contexto.
- Modal (Diálogo Central): Focado em interrupção ou detalhamento. Ideal para confirmações críticas (Excluir), alertas ou visualização de dados que ocupam muito espaço e exigem foco total.