Doggo Storybook 0.9.0

Alert Dialog

Renders an alert dialog that requires the immediate attention and response of the user.

Read more Read less

This component is meant for situations where critical information must be conveyed, and an explicit response is required from the user. It is typically used for confirmation dialogs, warning messages, error notifications, and other scenarios where an immediate decision is necessary.

For non-critical dialogs, such as those containing forms or additional information, use Doggo.Components.build_modal/1 instead.

Usage

<.alert_dialog id="end-session-modal">
  <:title>End Training Session Early?</:title>
  <p>
    Are you sure you want to end the current training session with Bella?
    She's making great progress today!
  </p>
  <:footer>
    <.button phx-click="end-session">
      Yes, end session
    </.button>
    <.button phx-click={JS.exec("data-cancel", to: "#end-session-modal")}>
      No, continue training
    </.button>
  </:footer>
</.alert_dialog>

To open the dialog, use the show_modal/1 function.

<.button
  phx-click={.show_modal("end-session-modal")}
  aria-haspopup="dialog"
>
  show
</.button>

CSS

To hide the modal when the open attribute is not set, use the following CSS styles:

dialog.alert-dialog:not([open]),
dialog.alert-dialog[open="false"] {
  display: none;
}

Semantics

While the showModal() JavaScript function is typically recommended for managing modal dialog semantics, this component utilizes the open attribute to control visibility. This approach is chosen to eliminate the need for library consumers to add additional JavaScript code. To ensure proper modal semantics, the aria-modal attribute is added to the dialog element.

End Training Session Early?

Are you sure you want to end the current training session with Bella? She's making great progress today!

Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
close_label :string Aria label for the close button. "Close"
dismissable :boolean When set to `true`, the dialog can be dismissed by clicking a close button or by pressing the escape key. false
Required id * :string
on_cancel %JS{} An additional `Phoenix.LiveView.JS` command to execute when the dialog is canceled. This command is executed in addition to closing the dialog. If you only want the dialog to be closed, you don't have to set this attribute. %Phoenix.LiveView.JS{ops: []}
open :boolean Initializes the dialog as open. false
rest :global Any additional HTML attributes.
close :slot The content for the 'close' link. Defaults to the word 'close'.
footer :slot 
<:footer>
  <button
    phx-click={Phoenix.LiveView.JS.exec("data-cancel", to: "#alert-dialog-single-default")}
  >
    Yes, end session
  </button>
  <button
    phx-click={Phoenix.LiveView.JS.exec("data-cancel", to: "#alert-dialog-single-default")}
  >
    No, continue training
  </button>
</:footer>
Required inner_block * :slot The modal body. 
<p>
  Are you sure you want to end the current training session with Bella?
  She's making great progress today!
</p>
Required title * :slot 
<:title>End Training Session Early?</:title>