ConfirmDialog

ConfirmDialog pede confirmação antes de uma ação que não pode ser desfeita, como excluir. Ele não usa o elemento dialog: é um bloco da própria página com um formulário. «Confirmar» envia um POST para o endereço da ação, e «Cancelar» é um link de volta. Sem JavaScript, funciona do mesmo jeito.

Quando usar

Use em toda ação de exclusão ou de mudança grande que a tela não deva fazer com um clique só. A tela decide para onde o formulário vai e para onde «Cancelar» leva. O componente leva o token da sessão e os campos ocultos da ação, como o id do registro.

Regras de exibição:

• Os botões são «Confirmar» (ou o que você passar em confirmLabel) e «Cancelar» (ui/panel/states.ts:65).
• Com kind: "danger", o botão de confirmação ganha o estilo de perigo e o atributo data-kind="danger". O padrão é primary (ui/panel/states.ts:50 e :65).
• Uma lista em fields, como ids[], vira um campo oculto por valor. Um choice põe um controle de escolha antes dos botões, como a ação de uma operação em massa (ui/panel/states.ts:53 e :55).
• A mensagem vem em text e é ligada ao bloco com aria-describedby (ui/panel/states.ts:65).

Onde aparece no painel

• Módulos, para confirmar ativar ou desativar um módulo: panel/screens/modules/modulos.ts:126.
• Coleções: a exclusão de um registro (panel/collections/routes.ts:515) e a exclusão em massa, com a contagem de registros e a escolha da ação (panel/collections/routes.ts:651).
• Usuários, na exclusão de uma conta: panel/screens/users/edit.ts:150, com o título «Excluir usuário».
• Privacidade, na exclusão dos dados de um titular: panel/screens/ops/privacidade.ts:189.
• Mídia, na exclusão de um arquivo: panel/screens/site/midia.ts:127, com o botão «Excluir arquivo».
• Moderação de comentários, na exclusão de um comentário: modules/comentarios/screens/moderation.ts:158, com o título «Excluir comentário».
• Lixeira de posts, para restaurar ou excluir de vez: modules/posts/screens/trash.ts:22 e :85.

Variantes e propriedades

ConfirmDialog

Pasta: ui/panel

Variantes

Id	Variante	Tom
states-confirm-light	delete-post	light
states-confirm-danger-light	delete-user-danger	light

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
title	string	Sim	—
text	string	Sim	—
action	string	Sim	Target of the POST form behind «Confirmar».
csrf	string	Sim	—
cancelHref	string	Sim	Where «Cancelar» goes back to.
confirmLabel	string	Não	—
kind	"primary" | "danger"	Não	Look of the confirm button: `primary` (default) or `danger` for a destructive action.
fields	Readonly<Record<string, string | readonly string[]>>	Não	Hidden fields posted with the confirmation (e.g. the id); a list (`ids[]`) gives one input per value.
choice	PanelField	Não	A control the confirmation asks (e.g. the target of a bulk action), posted with it, before the buttons.
id	string	Não	—

Captura

A primeira variante do catálogo, a confirmação de exclusão de um post, em 1280 px:

A mesma variante em 360 px:

Origem

• ui/panel/states.ts: ConfirmDialog e ConfirmDialogProps.
• ui/panel/states.gallery.ts: as variantes do catálogo (padrão e perigo).