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
"""
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),

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 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