added documentation for ConfirmationDialog, examples

solara/lab/components/confirmation_dialog.py

@@ -18,20 +18,28 @@ def ConfirmationDialog(
     max_width: Union[int, str] = 500,
     persistent: bool = True,
 ):
-    """A dialog used to confirm a user action. By default, has a title, a text explaining the
+    """A dialog used to confirm a user action.
+
+    (*Note: [This component is experimental and its API may change in the future](/docs/lab).*)
+
+    By default, has a title, a text explaining the
     decision to be made, and two buttons "OK" and "Cancel".
 
     ## Basic examples
 
     ```solara
     import solara
+    from solara.lab.components.confirmation_dialog import ConfirmationDialog
 
     is_open = solara.reactive(False)
 
     def delete_user():
-        ...
+        print("User being deleted...")
 
-    solara.ConfirmationDialog(is_open, delete_user, content="Are you sure you want to delete this user?")
+    @solara.component
+    def Page():
+        solara.Button(label="Delete user", on_click=lambda: is_open.set(True))
+        ConfirmationDialog(is_open, delete_user, content="Are you sure you want to delete this user?")
     ```
 
     ## Arguments

solara/website/pages/api/__init__.py

@@ -118,6 +118,7 @@
         "pages": [
             "tab",
             "tabs",
+            "confirmation_dialog",
         ],
     },
 ]

solara/website/pages/api/confirmation_dialog.py

@@ -0,0 +1,50 @@
+"""
+# ConfirmationDialog
+
+"""
+
+import solara
+from solara.lab.components.confirmation_dialog import ConfirmationDialog
+from solara.website.utils import apidoc
+
+users = solara.reactive("Alice Bob Cindy Dirk Eve Fred".split())
+user_to_be_deleted = solara.reactive(users.value[0])
+is_open = solara.reactive(False)
+
+
+def confirm_delete():
+    if user_to_be_deleted.value:
+        is_open.set(True)
+
+
+def delete_user():
+    if user_to_be_deleted.value:
+        users.set([u for u in users.value if u != user_to_be_deleted.value])
+    if users.value:
+        user_to_be_deleted.value = users.value[0]
+    else:
+        user_to_be_deleted.value = None
+
+
+@solara.component
+def Page():
+    """Create a list of users, a dropdown to select one, and a button to delete the
+    selected user. A confirmation dialog will pop up first before deletion."""
+    solara.Markdown("#### Users:")
+    with solara.Column():
+        for user in users.value:
+            bgcolor = user.lower()[0] * 3
+            solara.Text(user, style=f"width: 300px; background-color: #{bgcolor}; padding: 10px;")
+        if not users.value:
+            solara.Text("(no users left)")
+    solara.Select(label="User to be deleted:", value=user_to_be_deleted, values=users.value, style="max-width: 400px;")
+    solara.Button(
+        on_click=confirm_delete,
+        label=(f"Delete user: {user_to_be_deleted.value}" if user_to_be_deleted.value else "Delete user"),
+        style="max-width: 400px;",
+        disabled=not users.value,
+    )
+    ConfirmationDialog(is_open, delete_user, title="Delete user", content=f"Are you sure you want to delete user **{user_to_be_deleted.value}**?")
+
+
+__doc__ += apidoc(solara.lab.components.confirmation_dialog.ConfirmationDialog.f)  # type: ignore