Radix 3.0 (reflex-dev#3159)

Author: Lendemor

README.md

@@ -123,7 +123,7 @@ def index():
             rx.button("Generate Image", on_click=State.get_image, width="25em"),
             rx.cond(
                 State.processing,
-                rx.chakra.circular_progress(is_indeterminate=True),
+                rx.spinner(),
                 rx.cond(
                     State.complete,
                     rx.image(src=State.image_url, width="20em"),

integration/test_navigation.py

@@ -7,7 +7,7 @@
 
 from reflex.testing import AppHarness
 
-from .utils import poll_for_navigation
+from .utils import SessionStorage, poll_for_navigation
 
 
 def NavigationApp():
@@ -66,6 +66,10 @@ async def test_navigation_app(navigation_app: AppHarness):
     assert navigation_app.app_instance is not None, "app is not running"
     driver = navigation_app.frontend()
 
+    ss = SessionStorage(driver)
+    token = AppHarness._poll_for(lambda: ss.get("token") is not None)
+    assert token is not None
+
     internal_link = driver.find_element(By.ID, "internal")
 
     with poll_for_navigation(driver):

reflex/.templates/web/utils/state.js

@@ -691,8 +691,8 @@ export const getRefValue = (ref) => {
   if (ref.current.type == "checkbox") {
     return ref.current.checked; // chakra
   } else if (
-    ref.current.className?.includes("rt-CheckboxButton") ||
-    ref.current.className?.includes("rt-SwitchButton")
+    ref.current.className?.includes("rt-CheckboxRoot") ||
+    ref.current.className?.includes("rt-SwitchRoot")
   ) {
     return ref.current.ariaChecked == "true"; // radix
   } else if (ref.current.className?.includes("rt-SliderRoot")) {

reflex/__init__.py

@@ -81,6 +81,7 @@
     "select",
     "slider",
     "spacer",
+    "spinner",
     "stack",
     "switch",
     "table",

reflex/__init__.pyi

@@ -69,6 +69,7 @@ from reflex.components import section as section
 from reflex.components import select as select
 from reflex.components import slider as slider
 from reflex.components import spacer as spacer
+from reflex.components import spinner as spinner
 from reflex.components import stack as stack
 from reflex.components import switch as switch
 from reflex.components import table as table

reflex/components/radix/primitives/form.py

@@ -6,7 +6,7 @@
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.el.elements.forms import Form as HTMLForm
-from reflex.components.radix.themes.components.text_field import TextFieldInput
+from reflex.components.radix.themes.components.text_field import TextFieldRoot
 from reflex.constants.event import EventTriggers
 from reflex.vars import Var
 
@@ -108,9 +108,9 @@ def create(cls, *children, **props):
                 f"FormControl can only have at most one child, got {len(children)} children"
             )
         for child in children:
-            if not isinstance(child, TextFieldInput):
+            if not isinstance(child, TextFieldRoot):
                 raise TypeError(
-                    "Only Radix TextFieldInput is allowed as child of FormControl"
+                    "Only Radix TextFieldRoot is allowed as child of FormControl"
                 )
         return super().create(*children, **props)
 

reflex/components/radix/primitives/form.pyi

@@ -10,7 +10,7 @@ from reflex.style import Style
 from typing import Any, Dict, Literal
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.el.elements.forms import Form as HTMLForm
-from reflex.components.radix.themes.components.text_field import TextFieldInput
+from reflex.components.radix.themes.components.text_field import TextFieldRoot
 from reflex.constants.event import EventTriggers
 from reflex.vars import Var
 from .base import RadixPrimitiveComponentWithClassName

reflex/components/radix/themes/base.py

@@ -73,10 +73,17 @@ class CommonMarginProps(Component):
     ml: Var[LiteralSpacing]
 
 
+class RadixLoadingProp(Component):
+    """Base class for components that can be in a loading state."""
+
+    # If set, show an rx.spinner instead of the component children.
+    loading: Var[bool]
+
+
 class RadixThemesComponent(Component):
     """Base class for all @radix-ui/themes components."""
 
-    library = "@radix-ui/themes@^2.0.0"
+    library = "@radix-ui/themes@^3.0.0"
 
     # "Fake" prop color_scheme is used to avoid shadowing CSS prop "color".
     _rename_props: Dict[str, str] = {"colorScheme": "color"}

reflex/components/radix/themes/base.pyi

@@ -176,6 +176,84 @@ class CommonMarginProps(Component):
         """
         ...
 
+class RadixLoadingProp(Component):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        loading: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "RadixLoadingProp":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            loading: If set, show an rx.spinner instead of the component children.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
 class RadixThemesComponent(Component):
     @overload
     @classmethod

reflex/components/radix/themes/color_mode.pyi

@@ -417,6 +417,7 @@ class ColorModeButton(Button):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
+        loading: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -507,6 +508,7 @@ class ColorModeButton(Button):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
+            loading: If set, show an rx.spinner instead of the component children.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.