From ba3de9b9e9565964e4cd9737b9fcd0b9926ba38f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Brand=C3=A9ho?= Date: Fri, 2 Feb 2024 21:23:31 +0100 Subject: [PATCH] fix icon_button to size children lucide icon correctly. (#2515) --- .../radix/themes/components/iconbutton.py | 55 ++++++++++++++++++- .../radix/themes/components/iconbutton.pyi | 42 +++++++------- 2 files changed, 76 insertions(+), 21 deletions(-) diff --git a/reflex/components/radix/themes/components/iconbutton.py b/reflex/components/radix/themes/components/iconbutton.py index 43b990167..9f5932075 100644 --- a/reflex/components/radix/themes/components/iconbutton.py +++ b/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}) diff --git a/reflex/components/radix/themes/components/iconbutton.pyi b/reflex/components/radix/themes/components/iconbutton.pyi index 612116ec1..4ef6ca74b 100644 --- a/reflex/components/radix/themes/components/iconbutton.pyi +++ b/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. """ ...