fix icon_button to size children lucide icon correctly. (#2515)

reflex/components/radix/themes/components/iconbutton.py

@@ -1,7 +1,12 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Literal
 
 from reflex import el
+from reflex.components.component import Component
+from reflex.components.core import match
+from reflex.components.lucide import Icon
+from reflex.style import Style
 from reflex.vars import Var
 
 from ..base import (
@@ -17,7 +22,7 @@ LiteralButtonSize = Literal["1", "2", "3", "4"]
 class IconButton(el.Button, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
-    tag = "Button"
+    tag = "IconButton"
 
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
@@ -36,3 +41,51 @@ class IconButton(el.Button, RadixThemesComponent):
 
     # Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
     radius: Var[LiteralRadius]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create a IconButton component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Raises:
+            ValueError: If no children are passed.
+
+        Returns:
+            The IconButton component.
+        """
+        if children:
+            if type(children[0]) == str:
+                children = [
+                    Icon.create(
+                        children[0],
+                    )
+                ]
+        else:
+            raise ValueError(
+                "IconButton requires a child icon. Pass a string as the first child or a rx.icon."
+            )
+        if "size" in props:
+            if type(props["size"]) == str:
+                RADIX_TO_LUCIDE_SIZE = {
+                    "1": "12px",
+                    "2": "24px",
+                    "3": "36px",
+                    "4": "48px",
+                }
+                children[0].size = RADIX_TO_LUCIDE_SIZE[props["size"]]
+            else:
+                children[0].size = match(
+                    props["size"],
+                    ("1", "12px"),
+                    ("2", "24px"),
+                    ("3", "36px"),
+                    ("4", "48px"),
+                    "12px",
+                )
+        return super().create(*children, **props)
+
+    def _apply_theme(self, theme: Component):
+        self.style = Style({"padding": "6px", **self.style})

reflex/components/radix/themes/components/iconbutton.pyi

@@ -9,6 +9,10 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
 from reflex import el
+from reflex.components.component import Component
+from reflex.components.core import match
+from reflex.components.lucide import Icon
+from reflex.style import Style
 from reflex.vars import Var
 from ..base import (
     LiteralAccentColor,
@@ -25,7 +29,16 @@ class IconButton(el.Button, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
+                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
+            ]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -88,16 +101,6 @@ class IconButton(el.Button, RadixThemesComponent):
                 ],
             ]
         ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[
-            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
-        ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
-                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
-            ]
-        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         radius: Optional[
             Union[
@@ -229,18 +232,14 @@ class IconButton(el.Button, RadixThemesComponent):
         ] = None,
         **props
     ) -> "IconButton":
-        """Create a new component instance.
-
-        Will prepend "RadixThemes" to the component tag to avoid conflicts with
-        other UI libraries for common names, like Text and Button.
+        """Create a IconButton component.
 
         Args:
-            *children: Child components.
-            color: map to CSS default color property.
-            color_scheme: map to radix color property.
+            *children: The children of the component.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             size: Button size "1" - "4"
             variant: Variant of button: "classic" | "solid" | "soft" | "surface" | "outline" | "ghost"
+            color_scheme: Override theme color for button
             high_contrast: Whether to render the button with higher contrast color against background
             radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
             auto_focus: Automatically focuses the button when the page loads
@@ -278,9 +277,12 @@ class IconButton(el.Button, RadixThemesComponent):
             autofocus: Whether the component should take the focus once the page is loaded
             _rename_props: props to change the name of
             custom_attrs: custom attribute
-            **props: Component properties.
+            **props: The properties of the component.
+
+        Raises:
+            ValueError: If no children are passed.
 
         Returns:
-            A new component instance.
+            The IconButton component.
         """
         ...