diff --git a/reflex/components/radix/themes/typography/link.py b/reflex/components/radix/themes/typography/link.py index a5d969b6c..7a4e424ed 100644 --- a/reflex/components/radix/themes/typography/link.py +++ b/reflex/components/radix/themes/typography/link.py @@ -2,11 +2,13 @@ https://www.radix-ui.com/themes/docs/theme/typography """ + from __future__ import annotations from typing import Literal from reflex.components.component import Component, MemoizationLeaf +from reflex.components.core.colors import color from reflex.components.core.cond import cond from reflex.components.el.elements.inline import A from reflex.components.next.link import NextLink @@ -23,7 +25,7 @@ from .base import ( LiteralTextWeight, ) -LiteralLinkUnderline = Literal["auto", "hover", "always"] +LiteralLinkUnderline = Literal["auto", "hover", "always", "none"] next_link = NextLink.create() @@ -45,7 +47,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf): # Removes the leading trim space: "normal" | "start" | "end" | "both" trim: Var[LiteralTextTrim] - # Sets the visibility of the underline affordance: "auto" | "hover" | "always" + # Sets the visibility of the underline affordance: "auto" | "hover" | "always" | "none" underline: Var[LiteralLinkUnderline] # Overrides the accent color inherited from the Theme. @@ -74,12 +76,17 @@ class Link(RadixThemesComponent, A, MemoizationLeaf): Returns: Component: The link component """ + props.setdefault(":hover", {"color": color("accent", 8)}) + is_external = props.pop("is_external", None) + if is_external is not None: props["target"] = cond(is_external, "_blank", "") + 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: # Extract props for the NextLink, the rest go to the Link/A element. known_next_link_props = NextLink.get_props() @@ -87,6 +94,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf): for prop in props.copy(): if prop in known_next_link_props: next_link_props[prop] = props.pop(prop) + # 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, **next_link_props), diff --git a/reflex/components/radix/themes/typography/link.pyi b/reflex/components/radix/themes/typography/link.pyi index ea519d3e4..ebcb8dce6 100644 --- a/reflex/components/radix/themes/typography/link.pyi +++ b/reflex/components/radix/themes/typography/link.pyi @@ -9,6 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec from reflex.style import Style from typing import Literal from reflex.components.component import Component, MemoizationLeaf +from reflex.components.core.colors import color from reflex.components.core.cond import cond from reflex.components.el.elements.inline import A from reflex.components.next.link import NextLink @@ -17,7 +18,7 @@ from reflex.vars import Var from ..base import LiteralAccentColor, RadixThemesComponent from .base import LiteralTextSize, LiteralTextTrim, LiteralTextWeight -LiteralLinkUnderline = Literal["auto", "hover", "always"] +LiteralLinkUnderline = Literal["auto", "hover", "always", "none"] next_link = NextLink.create() class Link(RadixThemesComponent, A, MemoizationLeaf): @@ -47,8 +48,8 @@ class Link(RadixThemesComponent, A, MemoizationLeaf): ] = None, underline: Optional[ Union[ - Var[Literal["auto", "hover", "always"]], - Literal["auto", "hover", "always"], + Var[Literal["auto", "hover", "always", "none"]], + Literal["auto", "hover", "always", "none"], ] ] = None, color_scheme: Optional[ @@ -237,7 +238,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf): 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" + underline: Sets the visibility of the underline affordance: "auto" | "hover" | "always" | "none" color_scheme: Overrides the accent color inherited from the Theme. high_contrast: Whether to render the text with higher contrast color is_external: If True, the link will open in a new tab