ENG-6152: Dialog component (#16)

carlosabadia · web-flow · commit 500361bc54b4 · 2025-07-07T13:46:58.000+02:00
* ENG-6174: Card component

* ENG-6152: Dialog component
diff --git a/demo/demo/demo.py b/demo/demo/demo.py
@@ -19,6 +19,35 @@ def index() -> rx.Component:
             ),
             content="Seriously, click me",
         ),
+        ui.dialog(
+            trigger=ui.button(
+                ui.icon("Add02Icon"),
+                "Open dialog",
+                variant="secondary",
+            ),
+            title="Welcome to My App",
+            description="This dialog provides an overview of the application features and functionality.",
+            content=rx.el.div(
+                rx.el.p(
+                    "Did you click the button?",
+                    class_name="text-secondary-11 text-sm font-medium",
+                ),
+                rx.el.div(
+                    ui.dialog.close(
+                        render_=ui.button(
+                            "Cancel",
+                            variant="outline",
+                        ),
+                    ),
+                    ui.button(
+                        "Click me",
+                        on_click=rx.toast.success("You are cool :)"),
+                    ),
+                    class_name="flex flex-row gap-2 justify-end",
+                ),
+                class_name="flex flex-col gap-2 w-full",
+            ),
+        ),
         ui.checkbox(
             label="Click me",
             on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
diff --git a/reflex_ui/__init__.py b/reflex_ui/__init__.py
@@ -8,6 +8,7 @@
     "components.base.button": ["button"],
     "components.base.card": ["card"],
     "components.base.checkbox": ["checkbox"],
+    "components.base.dialog": ["dialog"],
     "components.base.scroll_area": ["scroll_area"],
     "components.base.select": ["select"],
     "components.base.skeleton": ["skeleton"],
diff --git a/reflex_ui/components/base/dialog.py b/reflex_ui/components/base/dialog.py
@@ -0,0 +1,267 @@
+"""Custom dialog component."""
+
+from typing import Literal
+
+from reflex.components.component import Component, ComponentNamespace
+from reflex.components.el import Div
+from reflex.event import EventHandler, passthrough_event_spec
+from reflex.utils.imports import ImportVar
+from reflex.vars import Var
+
+from reflex_ui.components.base.button import button
+from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
+from reflex_ui.components.icons.hugeicon import hi
+
+
+class ClassNames:
+    """Class names for dialog components."""
+
+    BACKDROP = "fixed inset-0 bg-black opacity-40 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-80"
+    POPUP = "fixed top-1/2 left-1/2 -mt-8 w-[31rem] max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-secondary-a4 bg-secondary-1 shadow-large transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0"
+    TITLE = "text-2xl font-semibold text-secondary-12"
+    DESCRIPTION = "text-sm text-secondary-11 font-[450]"
+    HEADER = "flex flex-col gap-2 px-6 pt-6 pb-4"
+    CONTENT = "flex flex-col gap-4 px-6 pb-6"
+    TRIGGER = ""
+    CLOSE = ""
+
+
+class DialogBaseComponent(BaseUIComponent):
+    """Base component for dialog components."""
+
+    library = f"{PACKAGE_NAME}/dialog"
+
+    @property
+    def import_var(self):
+        """Return the import variable for the dialog component."""
+        return ImportVar(tag="Dialog", package_path="", install=False)
+
+
+class DialogRoot(DialogBaseComponent):
+    """Groups all parts of the dialog. Doesn't render its own HTML element."""
+
+    tag = "Dialog.Root"
+
+    # Whether the dialog is initially open. To render a controlled dialog, use the open prop instead.
+    default_open: Var[bool]
+
+    # Whether the dialog is currently open.
+    open: Var[bool]
+
+    # Event handler called when the dialog is opened or closed
+    on_open_change: EventHandler[passthrough_event_spec(bool, dict, str)]
+
+    # Determines whether the dialog should close on outside clicks. Defaults to True.
+    dismissible: Var[bool]
+
+    # Determines if the dialog enters a modal state when open.
+    # - True: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
+    # - False: user interaction with the rest of the document is allowed.
+    # - 'trap-focus': focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+    modal: Var[bool | Literal["trap-focus"]]
+
+    # Event handler called after any animations complete when the dialog is opened or closed.
+    on_open_change_complete: EventHandler[passthrough_event_spec(bool)]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the dialog root component."""
+        props["data-slot"] = "dialog"
+        return super().create(*children, **props)
+
+
+class DialogTrigger(DialogBaseComponent):
+    """A button that opens the dialog. Renders a <button> element."""
+
+    tag = "Dialog.Trigger"
+
+    # Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>). Defaults to True.
+    native_button: Var[bool]
+
+    # The render prop
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the dialog trigger component."""
+        props["data-slot"] = "dialog-trigger"
+        cls.set_class_name(ClassNames.TRIGGER, props)
+        return super().create(*children, **props)
+
+
+class DialogPortal(DialogBaseComponent):
+    """A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to <body>."""
+
+    tag = "Dialog.Portal"
+
+    # A parent element to render the portal element into.
+    container: Var[str]
+
+    # Whether to keep the portal mounted in the DOM while the popup is hidden. Defaults to False.
+    keep_mounted: Var[bool]
+
+
+class DialogBackdrop(DialogBaseComponent):
+    """An overlay displayed beneath the popup. Renders a <div> element."""
+
+    tag = "Dialog.Backdrop"
+
+    # The render prop
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the dialog backdrop component."""
+        props["data-slot"] = "dialog-backdrop"
+        cls.set_class_name(ClassNames.BACKDROP, props)
+        return super().create(*children, **props)
+
+
+class DialogPopup(DialogBaseComponent):
+    """A container for the dialog contents. Renders a <div> element."""
+
+    tag = "Dialog.Popup"
+
+    # Determines the element to focus when the dialog is opened. By default, the first focusable element is focused.
+    initial_focus: Var[str]
+
+    # Determines the element to focus when the dialog is closed. By default, focus returns to the trigger.
+    final_focus: Var[str]
+
+    # The render prop
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the dialog popup component."""
+        props["data-slot"] = "dialog-popup"
+        cls.set_class_name(ClassNames.POPUP, props)
+        return super().create(*children, **props)
+
+
+class DialogTitle(DialogBaseComponent):
+    """A heading that labels the dialog. Renders an <h2> element."""
+
+    tag = "Dialog.Title"
+
+    # The render prop
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the dialog title component."""
+        props["data-slot"] = "dialog-title"
+        cls.set_class_name(ClassNames.TITLE, props)
+        return super().create(*children, **props)
+
+
+class DialogDescription(DialogBaseComponent):
+    """A paragraph with additional information about the dialog. Renders a <p> element.."""
+
+    tag = "Dialog.Description"
+
+    # The render prop
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the dialog description component."""
+        props["data-slot"] = "dialog-description"
+        cls.set_class_name(ClassNames.DESCRIPTION, props)
+        return super().create(*children, **props)
+
+
+class DialogClose(DialogBaseComponent):
+    """A paragraph with additional information about the dialog. Renders a <p> element."""
+
+    tag = "Dialog.Close"
+
+    # Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>). Defaults to True.
+    native_button: Var[bool]
+
+    # The render prop
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the dialog close component."""
+        props["data-slot"] = "dialog-close"
+        cls.set_class_name(ClassNames.CLOSE, props)
+        return super().create(*children, **props)
+
+
+class HighLevelDialog(DialogRoot):
+    """High level dialog component."""
+
+    # Dialog props
+    trigger: Var[Component | None]
+    content: Var[str | Component | None]
+    title: Var[str | Component | None]
+    description: Var[str | Component | None]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the dialog component."""
+        trigger = props.pop("trigger", None)
+        content = props.pop("content", None)
+        title = props.pop("title", None)
+        description = props.pop("description", None)
+        class_name = props.pop("class_name", "")
+
+        return DialogRoot.create(
+            DialogTrigger.create(render_=trigger) if trigger else None,
+            DialogPortal.create(
+                DialogBackdrop.create(),
+                DialogPopup.create(
+                    Div.create(
+                        Div.create(
+                            DialogTitle.create(title) if title else None,
+                            DialogClose.create(
+                                render_=button(
+                                    hi("Cancel01Icon"),
+                                    variant="ghost",
+                                    size="icon-sm",
+                                    class_name="text-secondary-11",
+                                ),
+                            ),
+                            class_name="flex flex-row justify-between items-baseline gap-1",
+                        ),
+                        DialogDescription.create(description) if description else None,
+                        class_name=ClassNames.HEADER,
+                    ),
+                    Div.create(
+                        content,
+                        class_name=ClassNames.CONTENT,
+                    ),
+                    *children,
+                    class_name=class_name,
+                ),
+            ),
+            **props,
+        )
+
+    def _exclude_props(self) -> list[str]:
+        return [
+            *super()._exclude_props(),
+            "trigger",
+            "content",
+            "title",
+            "description",
+        ]
+
+
+class Dialog(ComponentNamespace):
+    """Namespace for Dialog components."""
+
+    root = staticmethod(DialogRoot.create)
+    trigger = staticmethod(DialogTrigger.create)
+    portal = staticmethod(DialogPortal.create)
+    backdrop = staticmethod(DialogBackdrop.create)
+    popup = staticmethod(DialogPopup.create)
+    title = staticmethod(DialogTitle.create)
+    description = staticmethod(DialogDescription.create)
+    close = staticmethod(DialogClose.create)
+    __call__ = staticmethod(HighLevelDialog.create)
+
+
+dialog = Dialog()
