laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add default underline for links (#3148)

Browse Source
This commit is contained in:
Thomas Brandého 2024-04-26 20:42:05 +02:00 committed by GitHub
parent 0a8aaea599
commit 0ef695d842
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
reflex/components/radix/themes/typography/link.py
View File

@ -2,11 +2,13 @@
https://www.radix-ui.com/themes/docs/theme/typography https://www.radix-ui.com/themes/docs/theme/typography
""" """
from __future__ import annotations from __future__ import annotations
from typing import Literal from typing import Literal
from reflex.components.component import Component, MemoizationLeaf from reflex.components.component import Component, MemoizationLeaf
from reflex.components.core.colors import color
from reflex.components.core.cond import cond from reflex.components.core.cond import cond
from reflex.components.el.elements.inline import A from reflex.components.el.elements.inline import A
from reflex.components.next.link import NextLink from reflex.components.next.link import NextLink
@ -23,7 +25,7 @@ from .base import (
LiteralTextWeight, LiteralTextWeight,
) )
LiteralLinkUnderline = Literal["auto", "hover", "always"] LiteralLinkUnderline = Literal["auto", "hover", "always", "none"]
next_link = NextLink.create() next_link = NextLink.create()
@ -45,7 +47,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
# Removes the leading trim space: "normal" | "start" | "end" | "both" # Removes the leading trim space: "normal" | "start" | "end" | "both"
trim: Var[LiteralTextTrim] 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] underline: Var[LiteralLinkUnderline]
# Overrides the accent color inherited from the Theme. # Overrides the accent color inherited from the Theme.
@ -74,12 +76,17 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
Returns: Returns:
Component: The link component Component: The link component
""" """
props.setdefault(":hover", {"color": color("accent", 8)})
is_external = props.pop("is_external", None) is_external = props.pop("is_external", None)
if is_external is not None: if is_external is not None:
props["target"] = cond(is_external, "_blank", "") props["target"] = cond(is_external, "_blank", "")
if props.get("href") is not None: if props.get("href") is not None:
if not len(children): if not len(children):
raise ValueError("Link without a child will not display") raise ValueError("Link without a child will not display")
if "as_child" not in props: if "as_child" not in props:
# Extract props for the NextLink, the rest go to the Link/A element. # Extract props for the NextLink, the rest go to the Link/A element.
known_next_link_props = NextLink.get_props() known_next_link_props = NextLink.get_props()
@ -87,6 +94,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
for prop in props.copy(): for prop in props.copy():
if prop in known_next_link_props: if prop in known_next_link_props:
next_link_props[prop] = props.pop(prop) 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 # If user does not use `as_child`, by default we render using next_link to avoid page refresh during internal navigation
return super().create( return super().create(
NextLink.create(*children, **next_link_props), NextLink.create(*children, **next_link_props),

9
reflex/components/radix/themes/typography/link.pyi
View File

@ -9,6 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style from reflex.style import Style
from typing import Literal from typing import Literal
from reflex.components.component import Component, MemoizationLeaf from reflex.components.component import Component, MemoizationLeaf
from reflex.components.core.colors import color
from reflex.components.core.cond import cond from reflex.components.core.cond import cond
from reflex.components.el.elements.inline import A from reflex.components.el.elements.inline import A
from reflex.components.next.link import NextLink from reflex.components.next.link import NextLink
@ -17,7 +18,7 @@ from reflex.vars import Var
from ..base import LiteralAccentColor, RadixThemesComponent from ..base import LiteralAccentColor, RadixThemesComponent
from .base import LiteralTextSize, LiteralTextTrim, LiteralTextWeight from .base import LiteralTextSize, LiteralTextTrim, LiteralTextWeight
LiteralLinkUnderline = Literal["auto", "hover", "always"] LiteralLinkUnderline = Literal["auto", "hover", "always", "none"]
next_link = NextLink.create() next_link = NextLink.create()
class Link(RadixThemesComponent, A, MemoizationLeaf): class Link(RadixThemesComponent, A, MemoizationLeaf):
@ -47,8 +48,8 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
] = None, ] = None,
underline: Optional[ underline: Optional[
Union[ Union[
Var[Literal["auto", "hover", "always"]], Var[Literal["auto", "hover", "always", "none"]],
Literal["auto", "hover", "always"], Literal["auto", "hover", "always", "none"],
] ]
] = None, ] = None,
color_scheme: Optional[ color_scheme: Optional[
@ -237,7 +238,7 @@ class Link(RadixThemesComponent, A, MemoizationLeaf):
size: Text size: "1" - "9" size: Text size: "1" - "9"
weight: Thickness of text: "light" | "regular" | "medium" | "bold" weight: Thickness of text: "light" | "regular" | "medium" | "bold"
trim: Removes the leading trim space: "normal" | "start" | "end" | "both" 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. color_scheme: Overrides the accent color inherited from the Theme.
high_contrast: Whether to render the text with higher contrast color high_contrast: Whether to render the text with higher contrast color
is_external: If True, the link will open in a new tab is_external: If True, the link will open in a new tab