Actions destructives

Règle absolue

Toute action destructive requiert une confirmation explicite. Le modal doit nommer l'objet concerné, décrire les conséquences, et proposer un bouton libellé comme l'action, jamais "OK" ou "Oui".

En Rails, le modal est le partiel design_system/confirm_modal, rendu une fois en fin de <body> de chaque layout ; son contrôleur Stimulus en fait la méthode de confirmation de Turbo. Un geste le déclenche avec confirm_data sur son formulaire : le titre nomme l'objet, body dit les conséquences, button est le libellé de l'action ; danger: false donne un btn-primary pour un geste qui n'efface rien.

<%= button_to "Supprimer", order_path(@order), method: :delete, class: "btn btn-danger btn-sm",
      form: { data: confirm_data("Supprimer #{@order.number} ?",
                                 body: "La commande et tous ses articles seront supprimés.",
                                 button: "Supprimer la commande") } %>

Modal de confirmation (impact faible / réversible)

Pour les actions récupérables ou facilement réversibles. Message simple, bouton btn-danger, pas de saisie requise.

<button class="btn btn-danger btn-sm" onclick="document.getElementById('modal-soft').showModal()">
  Archiver la commande
</button>
<dialog id="modal-soft" class="modal">
  <div class="modal-box">
    <h3 class="font-accent font-bold text-lg text-mc-navy">Archiver CMD-0241 ?</h3>
    <p class="py-4 text-sm text-base-content/70">
      La commande sera archivée et n'apparaîtra plus dans la liste principale.
      Vous pouvez la restaurer depuis les archives.
    </p>
    <div class="modal-action">
      <form method="dialog"><button class="btn btn-ghost">Annuler</button></form>
      <button class="btn btn-danger">Archiver</button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

Modal de confirmation (impact fort / irréversible)

Pour les suppressions définitives à fort impact : demander à l'utilisateur de saisir le nom de l'objet pour débloquer le bouton de confirmation.

<button class="btn btn-danger btn-sm" onclick="document.getElementById('modal-hard').showModal()">
  Supprimer définitivement
</button>
<dialog id="modal-hard" class="modal">
  <div class="modal-box">
    <h3 class="font-accent font-bold text-lg text-mc-navy">Supprimer CMD-0241 définitivement ?</h3>
    <p class="py-4 text-sm text-base-content/70">
      Cette action est irréversible. Tous les articles, documents et l'historique
      de cette commande seront supprimés.
    </p>
    <fieldset class="fieldset mb-4">
      <legend class="fieldset-legend">Tapez CMD-0241 pour confirmer</legend>
      <input type="text" id="confirm-input" class="input w-full" placeholder="CMD-0241"
             oninput="document.getElementById('confirm-delete-btn').disabled = this.value !== 'CMD-0241'">
    </fieldset>
    <div class="modal-action">
      <form method="dialog"><button class="btn btn-ghost">Annuler</button></form>
      <button id="confirm-delete-btn" class="btn btn-danger" disabled>Supprimer définitivement</button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

Undo toast (action réversible)

Pour les actions faibles et récupérables : exécuter immédiatement, puis proposer un délai d'annulation de 5 secondes. Aucun modal requis.

<div class="toast toast-top toast-end z-50">
  <div class="alert alert-info gap-3">
    <span class="text-sm">Commande archivée.</span>
    <button class="btn btn-ghost btn-sm">Annuler</button>
  </div>
</div>

Règles