Phoenix implementation of Zag.js Dialog.

Examples

Basic Usage

With top-level slots:

<.dialog id="my-dialog" class="dialog">
  <:trigger>Open Dialog</:trigger>
  <:title>Dialog Title</:title>
  <:description>
    This is a dialog description that explains what the dialog is about.
  </:description>
  <:content>
    <p>Dialog content goes here. You can add any content you want inside the dialog.</p>
  </:content>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

With title, description, and close trigger inside content (use the same id as the dialog):

<.dialog id="my-dialog" class="dialog">
  <:trigger>Open Dialog</:trigger>
  <:content>
    <.dialog_title id="my-dialog">Dialog Title</.dialog_title>
    <.dialog_description id="my-dialog">
      This is a dialog description that explains what the dialog is about.
    </.dialog_description>
    <p>Dialog content goes here. You can add any content you want inside the dialog.</p>
    <.dialog_close_trigger id="my-dialog">
      <.heroicon name="hero-x-mark" class="icon" />
    </.dialog_close_trigger>
  </:content>
</.dialog>

Controlled Mode

<.dialog
  id="my-dialog"
  controlled
  open={@dialog_open}
  on_open_change="dialog_changed">
  <:trigger>Open Dialog</:trigger>
  <:content>
    <:title>Dialog Title</:title>
    <:description>Dialog description goes here.</:description>
    <p>Dialog content</p>
    <:close_trigger>Close</:close_trigger>
  </:content>
</.dialog>

def handle_event("dialog_changed", %{"open" => open}, socket) do
  {:noreply, assign(socket, :dialog_open, open)}
end

Animation

Set animation on dialog (instant, js, or custom).

• instant - Zag toggles the native hidden attribute, no animation.

• js - Web Animations API drives opacity/scale via animation_options (Corex.Animation.Scale).

• custom - the hook never re-applies hidden; the consumer drives the animation by listening to the CustomEvent whose type is on_open_change_client. The detail shape is:

  // event.detail (DialogOpenChangedDetail)
  { id, open, previousOpen }

  Closed visibility is provided by CSS baselines on [data-state="closed"] (see e2e/assets/corex/components/dialog.css), so the consumer only needs to drive the transition itself. Use the Scale helpers exported from corex (mirroring how Accordion / Tree view use the Height helpers).

import { animate } from "motion"
import {
  findDialogBackdrop,
  findDialogContent,
  animateScaleOpen,
  animateScaleClose,
} from "corex"

const reducedMotion = () =>
  window.matchMedia("(prefers-reduced-motion: reduce)").matches

document.addEventListener("my-dialog-open-changed", (e) => {
  const { id, open } = e.detail
  const root = document.getElementById(id)
  if (!root) return
  const backdrop = findDialogBackdrop(root)
  const content = findDialogContent(root)
  if (open) {
    if (backdrop)
      animateScaleOpen(backdrop, { animator: animate, duration: 0.5, easing: "ease-out" })
    if (content) {
      animateScaleOpen(content, {
        animator: animate,
        duration: 0.7,
        easing: [0.16, 1, 0.3, 1],
        scaleStart: 0.7,
        scaleEnd: 1,
      })
      if (!reducedMotion())
        animate(
          content,
          { y: [60, 0], filter: ["blur(12px)", "blur(0px)"] },
          { duration: 0.7, easing: [0.16, 1, 0.3, 1] },
        )
    }
  } else {
    if (backdrop)
      animateScaleClose(backdrop, { animator: animate, duration: 0.4, easing: "ease-in" })
    if (content) {
      animateScaleClose(content, {
        animator: animate,
        duration: 0.35,
        easing: "ease-in",
        scaleStart: 0.8,
        scaleEnd: 1,
      })
      if (!reducedMotion())
        animate(
          content,
          { y: [0, 40], filter: ["blur(0px)", "blur(12px)"] },
          { duration: 0.35, easing: "ease-in" },
        )
    }
  }
})

API Control

In order to use the API, you must use an id on the component

Client-side

<button phx-click={Corex.Dialog.set_open("my-dialog", true)}>
  Open Dialog
</button>

Server-side

def handle_event("open_dialog", _, socket) do
  {:noreply, Corex.Dialog.set_open(socket, "my-dialog", true)}
end

Styling

Use data attributes to target elements:

[data-scope="dialog"][data-part="root"] {}
[data-scope="dialog"][data-part="trigger"] {}
[data-scope="dialog"][data-part="backdrop"] {}
[data-scope="dialog"][data-part="positioner"] {}
[data-scope="dialog"][data-part="content"] {}
[data-scope="dialog"][data-part="title"] {}
[data-scope="dialog"][data-part="description"] {}
[data-scope="dialog"][data-part="close-trigger"] {}

If you wish to use the default Corex styling, you can use the class dialog on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/dialog.css";

You can then use modifiers

<.dialog class="dialog dialog--accent dialog--lg">