.agent/global/rules/modal-dialog-padrao-betha.md at e7adba8fd8a5111c6732fa5e412bf529747111f7

2026-09-28 22:18:39 -03:00

2.8 KiB

Raw Blame History

type	name	description	scope	trigger	priority	updatedAt
rule	modal-dialog-padrao-betha	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	global	model_decision	alta	2026-09-28

Todo modal/dialog nos frontends React do ecossistema GOV deve seguir a estrutura visual Betha: header escuro + body branco + footer cinza.

Estrutura Obrigatória

<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

2.8 KiB Raw Blame History

Regra: Padrão Modal/Dialog MUI — Estrutura Betha