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.

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

Expose color_scheme on TabsTrigger #3112

Merged
merged 4 commits into from
May 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
27 changes: 26 additions & 1 deletion reflex/components/radix/themes/components/tabs.py
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
"""Interactive components provided by @radix-ui/themes."""
from __future__ import annotations

from typing import Any, Dict, List, Literal

from reflex.components.component import ComponentNamespace
from reflex.components.component import Component, ComponentNamespace
from reflex.constants import EventTriggers
from reflex.vars import Var

from ..base import (
LiteralAccentColor,
RadixThemesComponent,
)

Expand Down Expand Up @@ -59,8 +62,30 @@ class TabsTrigger(RadixThemesComponent):
# Whether the tab is disabled
disabled: Var[bool]

# The color of the line under the tab when active.
color_scheme: Var[LiteralAccentColor]

_valid_parents: List[str] = ["TabsList"]

@classmethod
def create(self, *children, **props) -> Component:
"""Create a TabsTrigger component.

Args:
*children: The children of the component.
**props: The properties of the component.

Returns:
The TabsTrigger Component.
"""
if "color_scheme" in props:
custom_attrs = props.setdefault("custom_attrs", {})
custom_attrs["data-accent-color"] = props["color_scheme"]
return super().create(*children, **props)

def _exclude_props(self) -> list[str]:
return ["color_scheme"]


class TabsContent(RadixThemesComponent):
"""Contains the content associated with each trigger."""
Expand Down
78 changes: 69 additions & 9 deletions reflex/components/radix/themes/components/tabs.pyi
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style
from typing import Any, Dict, List, Literal
from reflex.components.component import ComponentNamespace
from reflex.components.component import Component, ComponentNamespace
from reflex.constants import EventTriggers
from reflex.vars import Var
from ..base import RadixThemesComponent
from ..base import LiteralAccentColor, RadixThemesComponent

class TabsRoot(RadixThemesComponent):
def get_event_triggers(self) -> Dict[str, Any]: ...
Expand Down Expand Up @@ -196,6 +196,68 @@ class TabsTrigger(RadixThemesComponent):
*children,
value: Optional[Union[Var[str], str]] = None,
disabled: Optional[Union[Var[bool], bool]] = None,
color_scheme: 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",
],
]
] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
Expand Down Expand Up @@ -249,25 +311,23 @@ class TabsTrigger(RadixThemesComponent):
] = None,
**props
) -> "TabsTrigger":
"""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 TabsTrigger component.

Args:
*children: Child components.
*children: The children of the component.
value: The value of the tab. Must be unique for each tab.
disabled: Whether the tab is disabled
color_scheme: The color of the line under the tab when active.
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 properties of the component.

Returns:
A new component instance.
The TabsTrigger Component.
"""
...

Expand Down
Loading