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

add style for orientation=vertical in tabs (#3332)

Browse Source
This commit is contained in:
Thomas Brandého 2024-05-22 01:21:46 +02:00 committed by GitHub
parent d40d992670
commit 4bda3eb233
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 251 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
reflex/components/datadisplay/code.py
View File

@ -493,7 +493,7 @@ class CodeBlock(Component):
else: else:
return code_block return code_block
def add_style(self) -> Style | None: def add_style(self):
"""Add style to the component.""" """Add style to the component."""
self.custom_style.update(self.style) self.custom_style.update(self.style)

2
reflex/components/datadisplay/code.pyi
View File

@ -1111,6 +1111,6 @@ class CodeBlock(Component):
The text component. The text component.
""" """
... ...
def add_style(self) -> Style | None: ... def add_style(self): ...
@staticmethod @staticmethod
def convert_theme_name(theme) -> str: ... def convert_theme_name(theme) -> str: ...

154
reflex/components/radix/primitives/accordion.py
View File

@ -59,7 +59,7 @@ class AccordionComponent(RadixPrimitiveComponent):
# The variant of the component. # The variant of the component.
variant: Var[LiteralAccordionVariant] variant: Var[LiteralAccordionVariant]
def add_style(self) -> Style | None: def add_style(self):
"""Add style to the component.""" """Add style to the component."""
if self.color_scheme is not None: if self.color_scheme is not None:
self.custom_attrs["data-accent-color"] = self.color_scheme self.custom_attrs["data-accent-color"] = self.color_scheme
@ -250,43 +250,41 @@ class AccordionItem(AccordionComponent):
return super().create(*children, value=value, **props, class_name=cls_name) return super().create(*children, value=value, **props, class_name=cls_name)
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}" divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}"
return Style( return {
{ "overflow": "hidden",
"overflow": "hidden", "width": "100%",
"width": "100%", "margin_top": "1px",
"margin_top": "1px", "border_top": divider_style,
"&:first-child": {
"margin_top": 0,
"border_top": 0,
"border_top_left_radius": "var(--radius-4)",
"border_top_right_radius": "var(--radius-4)",
},
"&:last-child": {
"border_bottom_left_radius": "var(--radius-4)",
"border_bottom_right_radius": "var(--radius-4)",
},
"&:focus-within": {
"position": "relative",
"z_index": 1,
},
_inherited_variant_selector("ghost", "&:first-child"): {
"border_radius": 0,
"border_top": divider_style, "border_top": divider_style,
"&:first-child": { },
"margin_top": 0, _inherited_variant_selector("ghost", "&:last-child"): {
"border_top": 0, "border_radius": 0,
"border_top_left_radius": "var(--radius-4)", "border_bottom": divider_style,
"border_top_right_radius": "var(--radius-4)", },
}, }
"&:last-child": {
"border_bottom_left_radius": "var(--radius-4)",
"border_bottom_right_radius": "var(--radius-4)",
},
"&:focus-within": {
"position": "relative",
"z_index": 1,
},
_inherited_variant_selector("ghost", "&:first-child"): {
"border_radius": 0,
"border_top": divider_style,
},
_inherited_variant_selector("ghost", "&:last-child"): {
"border_radius": 0,
"border_bottom": divider_style,
},
}
)
class AccordionHeader(AccordionComponent): class AccordionHeader(AccordionComponent):
@ -314,13 +312,13 @@ class AccordionHeader(AccordionComponent):
return super().create(*children, class_name=cls_name, **props) return super().create(*children, class_name=cls_name, **props)
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style({"display": "flex"}) return {"display": "flex"}
class AccordionTrigger(AccordionComponent): class AccordionTrigger(AccordionComponent):
@ -348,44 +346,42 @@ class AccordionTrigger(AccordionComponent):
return super().create(*children, class_name=cls_name, **props) return super().create(*children, class_name=cls_name, **props)
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style( return {
{ "color": color("accent", 11),
"color": color("accent", 11), "font_size": "1.1em",
"font_size": "1.1em", "line_height": 1,
"line_height": 1, "justify_content": "space-between",
"justify_content": "space-between", "align_items": "center",
"align_items": "center", "flex": 1,
"flex": 1, "display": "flex",
"display": "flex", "padding": "var(--space-3) var(--space-4)",
"padding": "var(--space-3) var(--space-4)", "width": "100%",
"width": "100%", "box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
"box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}", "&[data-state='open'] > .AccordionChevron": {
"&[data-state='open'] > .AccordionChevron": { "transform": "rotate(180deg)",
"transform": "rotate(180deg)", },
}, "&:hover": {
"background_color": color("accent", 4),
},
"& > .AccordionChevron": {
"transition": f"transform var(--animation-duration) var(--animation-easing)",
},
_inherited_variant_selector("classic"): {
"color": "var(--accent-contrast)",
"&:hover": { "&:hover": {
"background_color": color("accent", 4), "background_color": color("accent", 10),
}, },
"& > .AccordionChevron": { "& > .AccordionChevron": {
"transition": f"transform var(--animation-duration) var(--animation-easing)",
},
_inherited_variant_selector("classic"): {
"color": "var(--accent-contrast)", "color": "var(--accent-contrast)",
"&:hover": {
"background_color": color("accent", 10),
},
"& > .AccordionChevron": {
"color": "var(--accent-contrast)",
},
}, },
} },
) }
class AccordionIcon(Icon): class AccordionIcon(Icon):
@ -470,7 +466,7 @@ to {
""" """
] ]
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
@ -486,24 +482,22 @@ to {
_var_is_string=True, _var_is_string=True,
) )
return Style( return {
{ "overflow": "hidden",
"overflow": "hidden", "color": color("accent", 11),
"color": color("accent", 11), "padding_x": "var(--space-4)",
"padding_x": "var(--space-4)", # Apply before and after content to avoid height animation jank.
# Apply before and after content to avoid height animation jank. "&:before, &:after": {
"&:before, &:after": { "content": "' '",
"content": "' '", "display": "block",
"display": "block", "height": "var(--space-3)",
"height": "var(--space-3)", },
}, "&[data-state='open']": {"animation": slideDown},
"&[data-state='open']": {"animation": slideDown}, "&[data-state='closed']": {"animation": slideUp},
"&[data-state='closed']": {"animation": slideUp}, _inherited_variant_selector("classic"): {
_inherited_variant_selector("classic"): { "color": "var(--accent-contrast)",
"color": "var(--accent-contrast)", },
}, }
}
)
class Accordion(ComponentNamespace): class Accordion(ComponentNamespace):

10
reflex/components/radix/primitives/accordion.pyi
View File

@ -26,7 +26,7 @@ DEFAULT_ANIMATION_DURATION = 250
DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)" DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"
class AccordionComponent(RadixPrimitiveComponent): class AccordionComponent(RadixPrimitiveComponent):
def add_style(self) -> Style | None: ... def add_style(self): ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -520,7 +520,7 @@ class AccordionItem(AccordionComponent):
The accordion item. The accordion item.
""" """
... ...
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
class AccordionHeader(AccordionComponent): class AccordionHeader(AccordionComponent):
@overload @overload
@ -669,7 +669,7 @@ class AccordionHeader(AccordionComponent):
The Accordion header Component. The Accordion header Component.
""" """
... ...
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
class AccordionTrigger(AccordionComponent): class AccordionTrigger(AccordionComponent):
@overload @overload
@ -818,7 +818,7 @@ class AccordionTrigger(AccordionComponent):
The Accordion trigger Component. The Accordion trigger Component.
""" """
... ...
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
class AccordionIcon(Icon): class AccordionIcon(Icon):
@overload @overload
@ -1047,7 +1047,7 @@ class AccordionContent(AccordionComponent):
""" """
... ...
def add_custom_code(self) -> list[str]: ... def add_custom_code(self) -> list[str]: ...
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
class Accordion(ComponentNamespace): class Accordion(ComponentNamespace):
content = staticmethod(AccordionContent.create) content = staticmethod(AccordionContent.create)

17
reflex/components/radix/primitives/form.py
View File

@ -8,7 +8,6 @@ from reflex.components.component import ComponentNamespace
from reflex.components.el.elements.forms import Form as HTMLForm from reflex.components.el.elements.forms import Form as HTMLForm
from reflex.components.radix.themes.components.text_field import TextFieldRoot from reflex.components.radix.themes.components.text_field import TextFieldRoot
from reflex.constants.event import EventTriggers from reflex.constants.event import EventTriggers
from reflex.style import Style
from reflex.vars import Var from reflex.vars import Var
from .base import RadixPrimitiveComponentWithClassName from .base import RadixPrimitiveComponentWithClassName
@ -38,13 +37,13 @@ class FormRoot(FormComponent, HTMLForm):
EventTriggers.ON_CLEAR_SERVER_ERRORS: lambda: [], EventTriggers.ON_CLEAR_SERVER_ERRORS: lambda: [],
} }
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style({"width": "100%"}) return {"width": "100%"}
class FormField(FormComponent): class FormField(FormComponent):
@ -60,13 +59,13 @@ class FormField(FormComponent):
# Flag to mark the form field as invalid, for server side validation. # Flag to mark the form field as invalid, for server side validation.
server_invalid: Var[bool] server_invalid: Var[bool]
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style({"display": "grid", "margin_bottom": "10px"}) return {"display": "grid", "margin_bottom": "10px"}
class FormLabel(FormComponent): class FormLabel(FormComponent):
@ -76,13 +75,13 @@ class FormLabel(FormComponent):
alias = "RadixFormLabel" alias = "RadixFormLabel"
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style({"font_size": "15px", "font_weight": "500", "line_height": "35px"}) return {"font_size": "15px", "font_weight": "500", "line_height": "35px"}
class FormControl(FormComponent): class FormControl(FormComponent):
@ -149,13 +148,13 @@ class FormMessage(FormComponent):
# Forces the message to be shown. This is useful when using server-side validation. # Forces the message to be shown. This is useful when using server-side validation.
force_match: Var[bool] force_match: Var[bool]
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style({"font_size": "13px", "opacity": "0.8", "color": "white"}) return {"font_size": "13px", "opacity": "0.8", "color": "white"}
class FormValidityState(FormComponent): class FormValidityState(FormComponent):

9
reflex/components/radix/primitives/form.pyi
View File

@ -12,7 +12,6 @@ from reflex.components.component import ComponentNamespace
from reflex.components.el.elements.forms import Form as HTMLForm from reflex.components.el.elements.forms import Form as HTMLForm
from reflex.components.radix.themes.components.text_field import TextFieldRoot from reflex.components.radix.themes.components.text_field import TextFieldRoot
from reflex.constants.event import EventTriggers from reflex.constants.event import EventTriggers
from reflex.style import Style
from reflex.vars import Var from reflex.vars import Var
from .base import RadixPrimitiveComponentWithClassName from .base import RadixPrimitiveComponentWithClassName
@ -96,7 +95,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
class FormRoot(FormComponent, HTMLForm): class FormRoot(FormComponent, HTMLForm):
def get_event_triggers(self) -> Dict[str, Any]: ... def get_event_triggers(self) -> Dict[str, Any]: ...
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -275,7 +274,7 @@ class FormRoot(FormComponent, HTMLForm):
... ...
class FormField(FormComponent): class FormField(FormComponent):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -358,7 +357,7 @@ class FormField(FormComponent):
... ...
class FormLabel(FormComponent): class FormLabel(FormComponent):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -532,7 +531,7 @@ LiteralMatcher = Literal[
] ]
class FormMessage(FormComponent): class FormMessage(FormComponent):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore

49
reflex/components/radix/primitives/progress.py
View File

@ -2,14 +2,13 @@
from __future__ import annotations from __future__ import annotations
from typing import Optional from typing import Any, Optional
from reflex.components.component import Component, ComponentNamespace from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color from reflex.components.core.colors import color
from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
from reflex.style import Style
from reflex.vars import Var from reflex.vars import Var
@ -28,7 +27,7 @@ class ProgressRoot(ProgressComponent):
# Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full" # Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
radius: Var[LiteralRadius] radius: Var[LiteralRadius]
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
@ -37,17 +36,15 @@ class ProgressRoot(ProgressComponent):
if self.radius is not None: if self.radius is not None:
self.custom_attrs["data-radius"] = self.radius self.custom_attrs["data-radius"] = self.radius
return Style( return {
{ "position": "relative",
"position": "relative", "overflow": "hidden",
"overflow": "hidden", "background": color("gray", 3, alpha=True),
"background": color("gray", 3, alpha=True), "border_radius": "max(var(--radius-2), var(--radius-full))",
"border_radius": "max(var(--radius-2), var(--radius-full))", "width": "100%",
"width": "100%", "height": "20px",
"height": "20px", "boxShadow": f"inset 0 0 0 1px {color('gray', 5, alpha=True)}",
"boxShadow": f"inset 0 0 0 1px {color('gray', 5, alpha=True)}", }
}
)
def _exclude_props(self) -> list[str]: def _exclude_props(self) -> list[str]:
return ["radius"] return ["radius"]
@ -69,7 +66,7 @@ class ProgressIndicator(ProgressComponent):
# The color scheme of the progress indicator. # The color scheme of the progress indicator.
color_scheme: Var[LiteralAccentColor] color_scheme: Var[LiteralAccentColor]
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
@ -78,19 +75,17 @@ class ProgressIndicator(ProgressComponent):
if self.color_scheme is not None: if self.color_scheme is not None:
self.custom_attrs["data-accent-color"] = self.color_scheme self.custom_attrs["data-accent-color"] = self.color_scheme
return Style( return {
{ "background_color": color("accent", 9),
"background_color": color("accent", 9), "width": "100%",
"width": "100%", "height": "100%",
"height": "100%", "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
"&[data_state='loading']": {
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear", "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
"&[data_state='loading']": { },
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear", "transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))", # type: ignore
}, "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
"transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))", # type: ignore }
"boxShadow": "inset 0 0 0 1px var(--gray-a5)",
}
)
def _exclude_props(self) -> list[str]: def _exclude_props(self) -> list[str]:
return ["color_scheme"] return ["color_scheme"]

7
reflex/components/radix/primitives/progress.pyi
View File

@ -7,13 +7,12 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style from reflex.style import Style
from typing import Optional from typing import Any, Optional
from reflex.components.component import Component, ComponentNamespace from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color from reflex.components.core.colors import color
from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
from reflex.style import Style
from reflex.vars import Var from reflex.vars import Var
class ProgressComponent(RadixPrimitiveComponentWithClassName): class ProgressComponent(RadixPrimitiveComponentWithClassName):
@ -95,7 +94,7 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
... ...
class ProgressRoot(ProgressComponent): class ProgressRoot(ProgressComponent):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -181,7 +180,7 @@ class ProgressRoot(ProgressComponent):
... ...
class ProgressIndicator(ProgressComponent): class ProgressIndicator(ProgressComponent):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore

103
reflex/components/radix/primitives/slider.py
View File

@ -6,7 +6,6 @@ from typing import Any, Dict, List, Literal
from reflex.components.component import Component, ComponentNamespace from reflex.components.component import Component, ComponentNamespace
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.style import Style
from reflex.vars import Var from reflex.vars import Var
LiteralSliderOrientation = Literal["horizontal", "vertical"] LiteralSliderOrientation = Literal["horizontal", "vertical"]
@ -59,28 +58,26 @@ class SliderRoot(SliderComponent):
"on_value_commit": lambda e0: [e0], # trigger when thumb is released "on_value_commit": lambda e0: [e0], # trigger when thumb is released
} }
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style( return {
{ "position": "relative",
"position": "relative", "display": "flex",
"display": "flex", "align_items": "center",
"align_items": "center", "user_select": "none",
"user_select": "none", "touch_action": "none",
"touch_action": "none", "width": "200px",
"width": "200px", "height": "20px",
"height": "20px", "&[data-orientation='vertical']": {
"&[data-orientation='vertical']": { "flex_direction": "column",
"flex_direction": "column", "width": "20px",
"width": "20px", "height": "100px",
"height": "100px", },
}, }
}
)
class SliderTrack(SliderComponent): class SliderTrack(SliderComponent):
@ -89,22 +86,20 @@ class SliderTrack(SliderComponent):
tag = "Track" tag = "Track"
alias = "RadixSliderTrack" alias = "RadixSliderTrack"
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style( return {
{ "position": "relative",
"position": "relative", "flex_grow": "1",
"flex_grow": "1", "background_color": "black",
"background_color": "black", "border_radius": "9999px",
"border_radius": "9999px", "height": "3px",
"height": "3px", "&[data-orientation='vertical']": {"width": "3px"},
"&[data-orientation='vertical']": {"width": "3px"}, }
}
)
class SliderRange(SliderComponent): class SliderRange(SliderComponent):
@ -113,20 +108,18 @@ class SliderRange(SliderComponent):
tag = "Range" tag = "Range"
alias = "RadixSliderRange" alias = "RadixSliderRange"
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style( return {
{ "position": "absolute",
"position": "absolute", "background_color": "white",
"background_color": "white", "height": "100%",
"height": "100%", "&[data-orientation='vertical']": {"width": "100%"},
"&[data-orientation='vertical']": {"width": "100%"}, }
}
)
class SliderThumb(SliderComponent): class SliderThumb(SliderComponent):
@ -135,29 +128,27 @@ class SliderThumb(SliderComponent):
tag = "Thumb" tag = "Thumb"
alias = "RadixSliderThumb" alias = "RadixSliderThumb"
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style( return {
{ "display": "block",
"display": "block", "width": "20px",
"width": "20px", "height": "20px",
"height": "20px", "background_color": "black",
"background_color": "black", "box_shadow": "0 2px 10px black",
"box_shadow": "0 2px 10px black", "border_radius": "10px",
"border_radius": "10px", "&:hover": {
"&:hover": { "background_color": "gray",
"background_color": "gray", },
}, "&:focus": {
"&:focus": { "outline": "none",
"outline": "none", "box_shadow": "0 0 0 4px gray",
"box_shadow": "0 0 0 4px gray", },
}, }
}
)
class Slider(ComponentNamespace): class Slider(ComponentNamespace):

9
reflex/components/radix/primitives/slider.pyi
View File

@ -10,7 +10,6 @@ from reflex.style import Style
from typing import Any, Dict, List, Literal from typing import Any, Dict, List, Literal
from reflex.components.component import Component, ComponentNamespace from reflex.components.component import Component, ComponentNamespace
from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
from reflex.style import Style
from reflex.vars import Var from reflex.vars import Var
LiteralSliderOrientation = Literal["horizontal", "vertical"] LiteralSliderOrientation = Literal["horizontal", "vertical"]
@ -96,7 +95,7 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
class SliderRoot(SliderComponent): class SliderRoot(SliderComponent):
def get_event_triggers(self) -> Dict[str, Any]: ... def get_event_triggers(self) -> Dict[str, Any]: ...
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -197,7 +196,7 @@ class SliderRoot(SliderComponent):
... ...
class SliderTrack(SliderComponent): class SliderTrack(SliderComponent):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -276,7 +275,7 @@ class SliderTrack(SliderComponent):
... ...
class SliderRange(SliderComponent): class SliderRange(SliderComponent):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -355,7 +354,7 @@ class SliderRange(SliderComponent):
... ...
class SliderThumb(SliderComponent): class SliderThumb(SliderComponent):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore

46
reflex/components/radix/themes/components/tabs.py
View File

@ -4,6 +4,7 @@ from __future__ import annotations
from typing import Any, Dict, List, Literal from typing import Any, Dict, List, Literal
from reflex.components.component import Component, ComponentNamespace from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color
from reflex.constants import EventTriggers from reflex.constants import EventTriggers
from reflex.vars import Var from reflex.vars import Var
@ -12,6 +13,8 @@ from ..base import (
RadixThemesComponent, RadixThemesComponent,
) )
vertical_orientation_css = "&[data-orientation='vertical']"
class TabsRoot(RadixThemesComponent): class TabsRoot(RadixThemesComponent):
"""Set of content sections to be displayed one at a time.""" """Set of content sections to be displayed one at a time."""
@ -41,6 +44,18 @@ class TabsRoot(RadixThemesComponent):
EventTriggers.ON_CHANGE: lambda e0: [e0], EventTriggers.ON_CHANGE: lambda e0: [e0],
} }
def add_style(self) -> Dict[str, Any] | None:
"""Add style for the component.
Returns:
The style to add.
"""
return {
vertical_orientation_css: {
"display": "flex",
}
}
class TabsList(RadixThemesComponent): class TabsList(RadixThemesComponent):
"""Contains the triggers that sit alongside the active content.""" """Contains the triggers that sit alongside the active content."""
@ -50,6 +65,19 @@ class TabsList(RadixThemesComponent):
# Tabs size "1" - "2" # Tabs size "1" - "2"
size: Var[Literal["1", "2"]] size: Var[Literal["1", "2"]]
def add_style(self):
"""Add style for the component.
Returns:
The style to add.
"""
return {
vertical_orientation_css: {
"display": "block",
"box_shadow": f"inset -1px 0 0 0 {color('gray', 5, alpha=True)}",
},
}
class TabsTrigger(RadixThemesComponent): class TabsTrigger(RadixThemesComponent):
"""The button that activates its associated content.""" """The button that activates its associated content."""
@ -86,6 +114,14 @@ class TabsTrigger(RadixThemesComponent):
def _exclude_props(self) -> list[str]: def _exclude_props(self) -> list[str]:
return ["color_scheme"] return ["color_scheme"]
def add_style(self) -> Dict[str, Any] | None:
"""Add style for the component.
Returns:
The style to add.
"""
return {vertical_orientation_css: {"width": "100%"}}
class TabsContent(RadixThemesComponent): class TabsContent(RadixThemesComponent):
"""Contains the content associated with each trigger.""" """Contains the content associated with each trigger."""
@ -95,6 +131,16 @@ class TabsContent(RadixThemesComponent):
# The value of the tab. Must be unique for each tab. # The value of the tab. Must be unique for each tab.
value: Var[str] value: Var[str]
def add_style(self) -> dict[str, Any] | None:
"""Add style for the component.
Returns:
The style to add.
"""
return {
vertical_orientation_css: {"width": "100%", "margin": None},
}
class Tabs(ComponentNamespace): class Tabs(ComponentNamespace):
"""Set of content sections to be displayed one at a time.""" """Set of content sections to be displayed one at a time."""

7
reflex/components/radix/themes/components/tabs.pyi
View File

@ -9,12 +9,16 @@ from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style from reflex.style import Style
from typing import Any, Dict, List, Literal from typing import Any, Dict, List, Literal
from reflex.components.component import Component, ComponentNamespace from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.colors import color
from reflex.constants import EventTriggers from reflex.constants import EventTriggers
from reflex.vars import Var from reflex.vars import Var
from ..base import LiteralAccentColor, RadixThemesComponent from ..base import LiteralAccentColor, RadixThemesComponent
vertical_orientation_css = "&[data-orientation='vertical']"
class TabsRoot(RadixThemesComponent): class TabsRoot(RadixThemesComponent):
def get_event_triggers(self) -> Dict[str, Any]: ... def get_event_triggers(self) -> Dict[str, Any]: ...
def add_style(self) -> Dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -108,6 +112,7 @@ class TabsRoot(RadixThemesComponent):
... ...
class TabsList(RadixThemesComponent): class TabsList(RadixThemesComponent):
def add_style(self): ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore
@ -330,8 +335,10 @@ class TabsTrigger(RadixThemesComponent):
The TabsTrigger Component. The TabsTrigger Component.
""" """
... ...
def add_style(self) -> Dict[str, Any] | None: ...
class TabsContent(RadixThemesComponent): class TabsContent(RadixThemesComponent):
def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore

16
reflex/components/radix/themes/layout/center.py
View File

@ -2,7 +2,7 @@
from __future__ import annotations from __future__ import annotations
from reflex.style import Style from typing import Any
from .flex import Flex from .flex import Flex
@ -10,16 +10,14 @@ from .flex import Flex
class Center(Flex): class Center(Flex):
"""A center component.""" """A center component."""
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style that center the content. """Add style that center the content.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style( return {
{ "display": "flex",
"display": "flex", "align_items": "center",
"align_items": "center", "justify_content": "center",
"justify_content": "center", }
}
)

4
reflex/components/radix/themes/layout/center.pyi
View File

@ -7,11 +7,11 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style from reflex.style import Style
from reflex.style import Style from typing import Any
from .flex import Flex from .flex import Flex
class Center(Flex): class Center(Flex):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore

15
reflex/components/radix/themes/layout/list.py
View File

@ -1,14 +1,13 @@
"""List components.""" """List components."""
from __future__ import annotations from __future__ import annotations
from typing import Iterable, Literal, Optional, Union from typing import Any, Iterable, Literal, Optional, Union
from reflex.components.component import Component, ComponentNamespace from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.foreach import Foreach from reflex.components.core.foreach import Foreach
from reflex.components.el.elements.typography import Li, Ol, Ul from reflex.components.el.elements.typography import Li, Ol, Ul
from reflex.components.lucide.icon import Icon from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.typography.text import Text from reflex.components.radix.themes.typography.text import Text
from reflex.style import Style
from reflex.vars import Var from reflex.vars import Var
LiteralListStyleTypeUnordered = Literal[ LiteralListStyleTypeUnordered = Literal[
@ -78,18 +77,16 @@ class BaseList(Component):
style["gap"] = props["gap"] style["gap"] = props["gap"]
return super().create(*children, **props) return super().create(*children, **props)
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style( return {
{ "direction": "column",
"direction": "column", "list_style_position": "inside",
"list_style_position": "inside", }
}
)
class UnorderedList(BaseList, Ul): class UnorderedList(BaseList, Ul):

5
reflex/components/radix/themes/layout/list.pyi
View File

@ -7,13 +7,12 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style from reflex.style import Style
from typing import Iterable, Literal, Optional, Union from typing import Any, Iterable, Literal, Optional, Union
from reflex.components.component import Component, ComponentNamespace from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.foreach import Foreach from reflex.components.core.foreach import Foreach
from reflex.components.el.elements.typography import Li, Ol, Ul from reflex.components.el.elements.typography import Li, Ol, Ul
from reflex.components.lucide.icon import Icon from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.typography.text import Text from reflex.components.radix.themes.typography.text import Text
from reflex.style import Style
from reflex.vars import Var from reflex.vars import Var
LiteralListStyleTypeUnordered = Literal["none", "disc", "circle", "square"] LiteralListStyleTypeUnordered = Literal["none", "disc", "circle", "square"]
@ -157,7 +156,7 @@ class BaseList(Component):
""" """
... ...
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
class UnorderedList(BaseList, Ul): class UnorderedList(BaseList, Ul):
@overload @overload

16
reflex/components/radix/themes/layout/spacer.py
View File

@ -2,7 +2,7 @@
from __future__ import annotations from __future__ import annotations
from reflex.style import Style from typing import Any
from .flex import Flex from .flex import Flex
@ -10,16 +10,14 @@ from .flex import Flex
class Spacer(Flex): class Spacer(Flex):
"""A spacer component.""" """A spacer component."""
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns:
The style of the component. The style of the component.
""" """
return Style( return {
{ "flex": 1,
"flex": 1, "justify_self": "stretch",
"justify_self": "stretch", "align_self": "stretch",
"align_self": "stretch", }
}
)

4
reflex/components/radix/themes/layout/spacer.pyi
View File

@ -7,11 +7,11 @@ from typing import Any, Dict, Literal, Optional, Union, overload
from reflex.vars import Var, BaseVar, ComputedVar from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventChain, EventHandler, EventSpec from reflex.event import EventChain, EventHandler, EventSpec
from reflex.style import Style from reflex.style import Style
from reflex.style import Style from typing import Any
from .flex import Flex from .flex import Flex
class Spacer(Flex): class Spacer(Flex):
def add_style(self) -> Style | None: ... def add_style(self) -> dict[str, Any] | None: ...
@overload @overload
@classmethod @classmethod
def create( # type: ignore def create( # type: ignore

4
reflex/experimental/layout.py
View File

@ -2,6 +2,8 @@
from __future__ import annotations from __future__ import annotations
from typing import Any
from reflex import color, cond from reflex import color, cond
from reflex.components.base.fragment import Fragment from reflex.components.base.fragment import Fragment
from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
@ -40,7 +42,7 @@ class Sidebar(Box, MemoizationLeaf):
Box.create(width=props.get("width")), # spacer for layout Box.create(width=props.get("width")), # spacer for layout
) )
def add_style(self) -> Style | None: def add_style(self) -> dict[str, Any] | None:
"""Add style to the component. """Add style to the component.
Returns: Returns: