Turbo

Confirm dialogs

data-turbo-confirm, answered by a dialog in the components' own chrome instead of window.confirm.

Importing "unmagic/components" (or "unmagic/components/confirm") replaces the browser's window.confirm for Turbo's data-turbo-confirm with a dialog in the components' own chrome. Nothing changes in your views.

<%= button_to "Delete", label_path(label), method: :delete,
      form: { data: { turbo_confirm: "Delete this label?",
                      turbo_confirm_accept: "Delete",
                      turbo_confirm_variant: "danger" } } %>

Options

Read from the submit button first, then the form:

data-turbo-confirm-title: the heading, "Are you sure?" by default
data-turbo-confirm-accept: the confirming button's label, "Confirm" by default
data-turbo-confirm-variant: "danger" styles that button as destructive and focuses Cancel instead

A link with data-turbo-method gets a form Turbo builds, which carries only data-turbo-confirm. Use button_to when you need the other options.

Translating it

Render the template once in the layout, and the dialog takes its words from your locale rather than the English defaults:

<%= confirm_dialog_template %>

The keys sit under unmagic.components.confirm:

fr:
  unmagic:
    components:
      confirm:
        title: "Êtes-vous sûr ?"
        cancel: "Annuler"
        accept: "Confirmer"

See it working

Confirm