Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add props from Radix tooltip primitives to tooltip component #2499

Merged
merged 2 commits into from
Jan 31, 2024
Merged

Add props from Radix tooltip primitives to tooltip component #2499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e9de57
add tooltip primitives props to tooltip
martinxu9 Jan 31, 2024
b47fc4f
ruff
martinxu9 Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions reflex/components/radix/themes/components/tooltip.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,116 @@
"""Interactive components provided by @radix-ui/themes."""
from typing import Any, Dict, Literal, Union

from reflex.components.component import Component
from reflex.constants import EventTriggers
from reflex.utils import format
from reflex.vars import Var

from ..base import (
RadixThemesComponent,
)

LiteralSideType = Literal[
"top",
"right",
"bottom",
"left",
]

LiteralAlignType = Literal[
"start",
"center",
"end",
]

LiteralStickyType = Literal[
"partial",
"always",
]


# The Tooltip inherits props from the Tooltip.Root, Tooltip.Portal, Tooltip.Content
class Tooltip(RadixThemesComponent):
"""Floating element that provides a control with contextual information via pointer or focus."""

tag = "Tooltip"

# The content of the tooltip.
content: Var[str]

# The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
default_open: Var[bool]

# The controlled open state of the tooltip. Must be used in conjunction with `on_open_change`.
open: Var[bool]

# The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
side: Var[LiteralSideType]

# The distance in pixels from the trigger. Defaults to 0.
side_offset: Var[Union[float, int]]

# The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
align: Var[LiteralAlignType]

# An offset in pixels from the "start" or "end" alignment options.
align_offset: Var[Union[float, int]]

# When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
avoid_collisions: Var[bool]

# The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]

# The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
arrow_padding: Var[Union[float, int]]

# The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
sticky: Var[LiteralStickyType]

# Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
hide_when_detached: Var[bool]

# Override the duration in milliseconds to customize the open delay for a specific tooltip. Default is 700.
delay_duration: Var[Union[float, int]]

# Prevents Tooltip content from remaining open when hovering.
disable_hoverable_content: Var[bool]

# Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
force_mount: Var[bool]

# By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.
aria_label: Var[str]

def get_event_triggers(self) -> Dict[str, Any]:
"""Get the events triggers signatures for the component.

Returns:
The signatures of the event triggers.
"""
return {
**super().get_event_triggers(),
EventTriggers.ON_OPEN_CHANGE: lambda e0: [e0.target.value],
EventTriggers.ON_ESCAPE_KEY_DOWN: lambda e0: [e0.target.value],
EventTriggers.ON_POINTER_DOWN_OUTSIDE: lambda e0: [e0.target.value],
}

@classmethod
def create(cls, *children, **props) -> Component:
"""Initialize the Tooltip component.

Run some additional handling on the props.

Args:
*children: The positional arguments
**props: The keyword arguments

Returns:
The created component.
"""
ARIA_LABEL_KEY = "aria_label"
if props.get(ARIA_LABEL_KEY) is not None:
props[format.to_kebab_case(ARIA_LABEL_KEY)] = props.pop(ARIA_LABEL_KEY)

return super().create(*children, **props)
141 changes: 72 additions & 69 deletions reflex/components/radix/themes/components/tooltip.pyi
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,79 +7,61 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style
from typing import Any, Dict, Literal, Union
from reflex.components.component import Component
from reflex.constants import EventTriggers
from reflex.utils import format
from reflex.vars import Var
from ..base import RadixThemesComponent

LiteralSideType = Literal["top", "right", "bottom", "left"]
LiteralAlignType = Literal["start", "center", "end"]
LiteralStickyType = Literal["partial", "always"]

class Tooltip(RadixThemesComponent):
def get_event_triggers(self) -> Dict[str, Any]: ...
@overload
@classmethod
def create( # type: ignore
cls,
*children,
color: Optional[Union[Var[str], str]] = None,
color_scheme: Optional[
content: Optional[Union[Var[str], str]] = None,
default_open: Optional[Union[Var[bool], bool]] = None,
open: Optional[Union[Var[bool], bool]] = None,
side: Optional[
Union[
Var[
Literal[
"tomato",
"red",
"ruby",
"crimson",
"pink",
"plum",
"purple",
"violet",
"iris",
"indigo",
"blue",
"cyan",
"teal",
"jade",
"green",
"grass",
"brown",
"orange",
"sky",
"mint",
"lime",
"yellow",
"amber",
"gold",
"bronze",
"gray",
]
],
Literal[
"tomato",
"red",
"ruby",
"crimson",
"pink",
"plum",
"purple",
"violet",
"iris",
"indigo",
"blue",
"cyan",
"teal",
"jade",
"green",
"grass",
"brown",
"orange",
"sky",
"mint",
"lime",
"yellow",
"amber",
"gold",
"bronze",
"gray",
],
Var[Literal["top", "right", "bottom", "left"]],
Literal["top", "right", "bottom", "left"],
]
] = None,
content: Optional[Union[Var[str], str]] = None,
side_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
align: Optional[
Union[
Var[Literal["start", "center", "end"]],
Literal["start", "center", "end"],
]
] = None,
align_offset: Optional[Union[Var[Union[float, int]], Union[float, int]]] = None,
avoid_collisions: Optional[Union[Var[bool], bool]] = None,
collision_padding: Optional[
Union[
Var[Union[float, int, Dict[str, Union[float, int]]]],
Union[float, int, Dict[str, Union[float, int]]],
]
] = None,
arrow_padding: Optional[
Union[Var[Union[float, int]], Union[float, int]]
] = None,
sticky: Optional[
Union[Var[Literal["partial", "always"]], Literal["partial", "always"]]
] = None,
hide_when_detached: Optional[Union[Var[bool], bool]] = None,
delay_duration: Optional[
Union[Var[Union[float, int]], Union[float, int]]
] = None,
disable_hoverable_content: Optional[Union[Var[bool], bool]] = None,
force_mount: Optional[Union[Var[bool], bool]] = None,
aria_label: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
Expand All @@ -98,6 +80,9 @@ class Tooltip(RadixThemesComponent):
on_double_click: Optional[
Union[EventHandler, EventSpec, list, function, BaseVar]
] = None,
on_escape_key_down: Optional[
Union[EventHandler, EventSpec, list, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, list, function, BaseVar]
] = None,
Expand Down Expand Up @@ -125,6 +110,12 @@ class Tooltip(RadixThemesComponent):
on_mouse_up: Optional[
Union[EventHandler, EventSpec, list, function, BaseVar]
] = None,
on_open_change: Optional[
Union[EventHandler, EventSpec, list, function, BaseVar]
] = None,
on_pointer_down_outside: Optional[
Union[EventHandler, EventSpec, list, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, list, function, BaseVar]
] = None,
Expand All @@ -133,25 +124,37 @@ class Tooltip(RadixThemesComponent):
] = None,
**props
) -> "Tooltip":
"""Create a new component instance.
"""Initialize the Tooltip component.

Will prepend "RadixThemes" to the component tag to avoid conflicts with
other UI libraries for common names, like Text and Button.
Run some additional handling on the props.

Args:
*children: Child components.
color: map to CSS default color property.
color_scheme: map to radix color property.
*children: The positional arguments
content: The content of the tooltip.
default_open: The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
open: The controlled open state of the tooltip. Must be used in conjunction with `on_open_change`.
side: The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
side_offset: The distance in pixels from the trigger. Defaults to 0.
align: The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
align_offset: An offset in pixels from the "start" or "end" alignment options.
avoid_collisions: When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
arrow_padding: The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
delay_duration: Override the duration in milliseconds to customize the open delay for a specific tooltip. Default is 700.
disable_hoverable_content: Prevents Tooltip content from remaining open when hovering.
force_mount: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
aria_label: By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.
style: The style of the component.
key: A unique key for the component.
id: The id for the component.
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 keyword arguments

Returns:
A new component instance.
The created component.
"""
...
Loading