adding cancel and action sub components for alert dialog and rename a…

…lert dialog root (#2352)

* adding cancel and action sub components for alert dialog

* updates to pass integration tests

* add components

---------

Co-authored-by: Tom Gotsman <tomgotsman@Toms-MacBook-Pro.local>
Co-authored-by: Tom Gotsman <tomgotsman@toms-mbp.lan>

reflex/components/radix/themes/components/__init__.py

@@ -1,9 +1,11 @@
 """Radix themes components."""
 
 from .alertdialog import (
-    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
     AlertDialogContent,
     AlertDialogDescription,
+    AlertDialogRoot,
     AlertDialogTitle,
     AlertDialogTrigger,
 )
@@ -75,11 +77,13 @@
 from .tooltip import Tooltip
 
 # Alert Dialog
-alertdialog = AlertDialog.create
+alertdialog_root = AlertDialogRoot.create
 alertdialog_trigger = AlertDialogTrigger.create
 alertdialog_content = AlertDialogContent.create
 alertdialog_title = AlertDialogTitle.create
 alertdialog_description = AlertDialogDescription.create
+alertdialog_action = AlertDialogAction.create
+alertdialog_cancel = AlertDialogCancel.create
 
 # Aspect Ratio
 aspect_ratio = AspectRatio.create

reflex/components/radix/themes/components/alertdialog.py

@@ -12,8 +12,8 @@
 LiteralSwitchSize = Literal["1", "2", "3", "4"]
 
 
-class AlertDialog(CommonMarginProps, RadixThemesComponent):
-    """A toggle switch alternative to the checkbox."""
+class AlertDialogRoot(CommonMarginProps, RadixThemesComponent):
+    """Contains all the parts of the dialog."""
 
     tag = "AlertDialog.Root"
 
@@ -33,13 +33,13 @@ def get_event_triggers(self) -> Dict[str, Any]:
 
 
 class AlertDialogTrigger(CommonMarginProps, RadixThemesComponent):
-    """A toggle switch alternative to the checkbox."""
+    """Wraps the control that will open the dialog."""
 
     tag = "AlertDialog.Trigger"
 
 
 class AlertDialogContent(el.Div, CommonMarginProps, RadixThemesComponent):
-    """A toggle switch alternative to the checkbox."""
+    """Contains the content of the dialog. This component is based on the div element."""
 
     tag = "AlertDialog.Content"
 
@@ -61,12 +61,33 @@ def get_event_triggers(self) -> Dict[str, Any]:
 
 
 class AlertDialogTitle(CommonMarginProps, RadixThemesComponent):
-    """A toggle switch alternative to the checkbox."""
+    """An accessible title that is announced when the dialog is opened.
+    This part is based on the Heading component with a pre-defined font size and
+    leading trim on top.
+    """
 
     tag = "AlertDialog.Title"
 
 
 class AlertDialogDescription(CommonMarginProps, RadixThemesComponent):
-    """A toggle switch alternative to the checkbox."""
+    """An optional accessible description that is announced when the dialog is opened.
+    This part is based on the Text component with a pre-defined font size.
+    """
 
     tag = "AlertDialog.Description"
+
+
+class AlertDialogAction(CommonMarginProps, RadixThemesComponent):
+    """Wraps the control that will close the dialog. This should be distinguished
+    visually from the Cancel control.
+    """
+
+    tag = "AlertDialog.Action"
+
+
+class AlertDialogCancel(CommonMarginProps, RadixThemesComponent):
+    """Wraps the control that will close the dialog. This should be distinguished
+    visually from the Action control.
+    """
+
+    tag = "AlertDialog.Cancel"