diff --git a/reflex/components/radix/themes/typography/link.py b/reflex/components/radix/themes/typography/link.py index fd57c1084..09798cd1f 100644 --- a/reflex/components/radix/themes/typography/link.py +++ b/reflex/components/radix/themes/typography/link.py @@ -6,7 +6,10 @@ from __future__ import annotations from typing import Literal +from reflex.components.component import Component from reflex.components.el.elements.inline import A +from reflex.components.next.link import NextLink +from reflex.utils import imports from reflex.vars import Var from ..base import ( @@ -22,6 +25,8 @@ from .base import ( LiteralLinkUnderline = Literal["auto", "hover", "always"] +next_link = NextLink.create() + class Link(CommonMarginProps, RadixThemesComponent, A): """A semantic element for navigation between pages.""" @@ -44,7 +49,34 @@ class Link(CommonMarginProps, RadixThemesComponent, A): underline: Var[LiteralLinkUnderline] # Overrides the accent color inherited from the Theme. - color: Var[LiteralAccentColor] + color_scheme: Var[LiteralAccentColor] # Whether to render the text with higher contrast color high_contrast: Var[bool] + + def _get_imports(self) -> imports.ImportDict: + return {**super()._get_imports(), **next_link._get_imports()} + + @classmethod + def create(cls, *children, **props) -> Component: + """Create a Link component. + + Args: + *children: The children of the component. + **props: The props of the component. + + Raises: + ValueError: in case of missing children + + Returns: + Component: The link component + """ + if props.get("href") is not None: + if not len(children): + raise ValueError("Link without a child will not display") + if "as_child" not in props: + # If user does not use `as_child`, by default we render using next_link to avoid page refresh during internal navigation + return super().create( + NextLink.create(*children, **props), as_child=True + ) + return super().create(*children, **props) diff --git a/reflex/components/radix/themes/typography/link.pyi b/reflex/components/radix/themes/typography/link.pyi index 5a9a762de..77db58552 100644 --- a/reflex/components/radix/themes/typography/link.pyi +++ b/reflex/components/radix/themes/typography/link.pyi @@ -8,12 +8,16 @@ from reflex.vars import Var, BaseVar, ComputedVar from reflex.event import EventChain, EventHandler, EventSpec from reflex.style import Style from typing import Literal +from reflex.components.component import Component from reflex.components.el.elements.inline import A +from reflex.components.next.link import NextLink +from reflex.utils import imports from reflex.vars import Var from ..base import CommonMarginProps, LiteralAccentColor, RadixThemesComponent from .base import LiteralTextSize, LiteralTextTrim, LiteralTextWeight LiteralLinkUnderline = Literal["auto", "hover", "always"] +next_link = NextLink.create() class Link(CommonMarginProps, RadixThemesComponent, A): @overload @@ -21,7 +25,31 @@ class Link(CommonMarginProps, RadixThemesComponent, A): 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", "5", "6", "7", "8", "9"]], + Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], + ] + ] = None, + weight: Optional[ + Union[ + Var[Literal["light", "regular", "medium", "bold"]], + Literal["light", "regular", "medium", "bold"], + ] + ] = None, + trim: Optional[ + Union[ + Var[Literal["normal", "start", "end", "both"]], + Literal["normal", "start", "end", "both"], + ] + ] = None, + underline: Optional[ + Union[ + Var[Literal["auto", "hover", "always"]], + Literal["auto", "hover", "always"], + ] + ] = None, color_scheme: Optional[ Union[ Var[ @@ -84,31 +112,6 @@ class Link(CommonMarginProps, RadixThemesComponent, A): ], ] ] = None, - as_child: Optional[Union[Var[bool], bool]] = None, - size: Optional[ - Union[ - Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]], - Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], - ] - ] = None, - weight: Optional[ - Union[ - Var[Literal["light", "regular", "medium", "bold"]], - Literal["light", "regular", "medium", "bold"], - ] - ] = None, - trim: Optional[ - Union[ - Var[Literal["normal", "start", "end", "both"]], - Literal["normal", "start", "end", "both"], - ] - ] = None, - underline: Optional[ - Union[ - Var[Literal["auto", "hover", "always"]], - Literal["auto", "hover", "always"], - ] - ] = None, high_contrast: Optional[Union[Var[bool], bool]] = None, m: Optional[ Union[ @@ -269,20 +272,16 @@ class Link(CommonMarginProps, RadixThemesComponent, A): ] = None, **props ) -> "Link": - """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 Link 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: Text size: "1" - "9" weight: Thickness of text: "light" | "regular" | "medium" | "bold" trim: Removes the leading trim space: "normal" | "start" | "end" | "both" underline: Sets the visibility of the underline affordance: "auto" | "hover" | "always" + color_scheme: Overrides the accent color inherited from the Theme. high_contrast: Whether to render the text with higher contrast color m: Margin: "0" - "9" mx: Margin horizontal: "0" - "9" @@ -323,9 +322,12 @@ class Link(CommonMarginProps, RadixThemesComponent, A): 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: Component properties. + **props: The props of the component. + + Raises: + ValueError: in case of missing children Returns: - A new component instance. + Component: The link component """ ...