105 lines
2.8 KiB
Markdown
105 lines
2.8 KiB
Markdown
---
|
|
type: rule
|
|
name: modal-dialog-padrao-betha
|
|
description: Define a estrutura obrigatória de modais e dialogs MUI no padrão Betha — header escuro, body branco, footer cinza — para os frontends React do ecossistema GOV
|
|
scope: global
|
|
trigger: model_decision
|
|
priority: alta
|
|
updatedAt: "2026-09-28"
|
|
---
|
|
|
|
# Regra: Padrão Modal/Dialog MUI — Estrutura Betha
|
|
|
|
Todo modal/dialog nos frontends React do ecossistema GOV deve seguir a estrutura visual Betha: **header escuro + body branco + footer cinza**.
|
|
|
|
## Estrutura Obrigatória
|
|
|
|
```typescript
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
PaperProps={{
|
|
sx: {
|
|
borderRadius: "0.25rem",
|
|
boxShadow: "0 0.5rem 1rem rgba(0,0,0,.15)",
|
|
}
|
|
}}
|
|
>
|
|
{/* HEADER — escuro */}
|
|
<DialogTitle
|
|
sx={{
|
|
backgroundColor: "#343a40",
|
|
color: "#ffffff",
|
|
padding: "0.75rem 1rem",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
Título do Modal
|
|
<IconButton
|
|
onClick={onClose}
|
|
size="small"
|
|
sx={{ position: "absolute", right: 8, top: 8, color: "#ffffff" }}
|
|
>
|
|
<CloseIcon fontSize="small" />
|
|
</IconButton>
|
|
</DialogTitle>
|
|
|
|
{/* BODY — branco */}
|
|
<DialogContent sx={{ backgroundColor: "#ffffff", padding: "1rem" }}>
|
|
{/* conteúdo */}
|
|
</DialogContent>
|
|
|
|
{/* FOOTER — cinza claro */}
|
|
<DialogActions
|
|
sx={{
|
|
backgroundColor: "#f8f9fa",
|
|
borderTop: "1px solid #dee2e6",
|
|
padding: "0.75rem 1rem",
|
|
}}
|
|
>
|
|
<Button variant="outlined" color="secondary" onClick={onClose}>
|
|
Cancelar
|
|
</Button>
|
|
<Button variant="contained" color="primary" onClick={onConfirm}>
|
|
Confirmar
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
```
|
|
|
|
## Tokens dos Estilos
|
|
|
|
| Região | Cor | Hex |
|
|
|--------|-----|-----|
|
|
| DialogTitle bg | Dark | `#343a40` |
|
|
| DialogTitle color | Branco | `#ffffff` |
|
|
| DialogContent bg | Branco | `#ffffff` |
|
|
| DialogActions bg | Light | `#f8f9fa` |
|
|
| DialogActions border | Border | `#dee2e6` |
|
|
| Dialog shadow | — | `0 0.5rem 1rem rgba(0,0,0,.15)` |
|
|
| Dialog radius | — | `0.25rem` |
|
|
|
|
## Botões de Ação
|
|
|
|
| Papel | Variante | Cor |
|
|
|-------|---------|-----|
|
|
| Cancelar / Fechar | `outlined` | `secondary` |
|
|
| Confirmar / Salvar | `contained` | `primary` |
|
|
| Destrutivo (excluir) | `contained` | `error` |
|
|
|
|
## Regras
|
|
|
|
✅ **Correto:** sempre usar `IconButton` com `CloseIcon` no `DialogTitle` em posição `absolute`
|
|
✅ **Correto:** `DialogActions` sempre com `borderTop` e `backgroundColor` cinza
|
|
❌ **Incorreto:** header branco ou sem cor de fundo definida
|
|
❌ **Incorreto:** botões sem variante e cor explícitas
|
|
❌ **Incorreto:** usar `Modal` nu do MUI — sempre usar `Dialog` com as 3 regiões
|
|
|
|
## Impacto
|
|
|
|
Evita modais com aparências inconsistentes entre telas e garante conformidade com a identidade visual Betha exigida pelo parceiro.
|
|
|
|
## Referências
|
|
|
|
- Rule: `theme-provider-mui-betha`
|
|
- Rule: `estilos-design-system`
|