Crafting a Seamless UX: Custom Confirmation Dialogs with Turbo 🚀✨

Introduction 👋

In the intricate landscape of user experience (UX) design, confirmation dialogs stand as guardians against inadvertent data loss.
This article explores the significance of confirmation dialogs and their indispensable role in refining user interface (UI) design.

The UX Power of Confirmation Dialogs 💡

Confirmation dialogs, ubiquitous in digital interfaces, act as a crucial defense mechanism, preventing unintended actions that could jeopardize critical user data. Their primary purpose is to add an extra layer of security, compelling users to confirm their intent before embarking on potentially irreversible actions.

Guarding Against Accidental Deletion

Consider a scenario where a user, navigating an application, accidentally clicks the "Delete" button. Without a confirmation dialog,
this innocent mistake could result in the loss of valuable data. Confirmation dialogs offer users a moment of pause, minimizing the risk of unintended consequences.

Empowering User Control

Confirmation dialogs not only shield against data loss but also empower users, providing greater control over their actions within a platform. Well-designed confirmation dialogs align with user-centric design principles, prioritizing user safety and satisfaction.

Best Practices for Confirmation Dialogs 🌟

To maximize the effectiveness of confirmation dialogs, adherence to best practices is crucial. Clear, concise, and easily understandable language is paramount. Ambiguous wording can lead to user frustration, defeating the purpose of the dialog.

Strategic placement and design ensure that dialogs are noticeable without being intrusive. Intuitive icons and consistent visual cues help users quickly grasp the significance of the dialog, fostering a seamless and efficient user experience.

When to use

• Important system events requiring prompt user intervention.
• Actions with destructive consequences, like deletion or impactful transactions.
• Especially for actions that are irreversible.

When not to use

Avoid implementing confirmation dialogs for actions that lack serious consequences, such as changing user preferences. Utilize them exclusively for actions with substantial implications.

Implementing Custom Dialogs in Rails 7 with Turbo 🛠️

Assuming you're using Rails 7 with Turbo, integrating a custom dialog box is a breeze. Design your dialog box, create a partial, and render it from your application layout. My personal touch? Crafted the dialog using Tailwind CSS for a sleek look and feel. Any questions? Feel free to ask!

dialog#turbo-confirm.backdrop:bg-gray-900.backdrop:bg-opacity-80.h-modal.rounded-lg.shadow-xl
  form[method="dialog"]
    .relative.transform.overflow-hidden.rounded-lg.bg-white.text-left.shadow-xl.transition-all

      .bg-white.px-4.pb-4.pt-5.sm:p-6.sm:pb-4.mb-5
        .sm:flex.sm:items-start
          .mx-auto.flex.h-12.w-12.flex-shrink-0.items-center.justify-center.rounded-full.bg-red-100.sm:mx-0.sm:h-10.sm:w-10
            svg.w-6.h-6.text-red-600[aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 20 20"]
              path[stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9h2v5m-2 0h4M9.408 5.5h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"]

          .mt-3.text-center.sm:ml-4.sm:mt-0.sm:text-left
            h3#dialog-title.text-base.font-semibold.leading-6.text-gray-900
              = t('dialog.title')

            .mt-2
              p#dialog-body.text-sm.text-gray-500
                = t('dialog.default_body')

      .bg-gray-50.px-4.py-3.flex.flex-row-reverse.sm:px-6
        div
          button#dialog-cancel.py-2.5.px-5.me-2.mb-2.text-sm.font-medium.text-gray-900.focus:outline-none.bg-white.rounded-lg.border.border-gray-200.hover:bg-gray-100.focus:z-10.focus:ring-4.focus:ring-gray-200[value="cancel"]
            = t('dialog.cancel')

          button#dialog-confirm.px-5.py-2.5.me-2.text-sm.font-medium.text-white.bg-red-700.hover:bg-red-800.focus:ring-4.focus:outline-none.focus:ring-red-300.rounded-lg.text-center[value="confirm"]
            = t('dialog.apply')

In case you're not using slim templates you can easily convert this piece of template to erb using a tool such a https://tools.gizipp.com/slim-to-html-erb

// app/javascript/application.js

Turbo.setConfirmMethod((message, element) => {
  let dialog = document.getElementById("turbo-confirm")
  const body = document.body;

  // dynamic body, we could do similar thing with title or buttons and even with colors!
  // By adding more data attributes to our element and handle here after that
  dialog.querySelector("[id='dialog-body']").innerHTML = window.DOMPurify.sanitize(message);

  // prevent background from scrolling
  body.classList.add('overflow-hidden');
  dialog.showModal()

  return new Promise((resolve, reject) => {
    dialog.addEventListener("close", () => {
        dialog.returnValue == "confirm" ? resolve(true) : body.classList.remove('overflow-hidden');
    }, { once: true })
  })
})

Here's how you can easily use this feature in your template:

- confirm_body = 'Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.'
= link_to(deactivate_account_path, data: { turbo_method: :patch, turbo_confirm: confirm_body })

So, as you embark on your coding endeavors, remember that the is not just about lines of code — it's about crafting experiences that resonate with users, ensuring they navigate your Rails 7 application with confidence and satisfaction. Happy coding, and may your user experience always be Turbo-charged! 🚀✨