Skip to content

Commit

Permalink
add style for orientation=vertical in tabs (#3332)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lendemor
Lendemor authored May 21, 2024
1 parent d40d992 commit 4bda3eb
Show file tree
Hide file tree
Showing 19 changed files with 251 additions and 228 deletions.
2 changes: 1 addition & 1 deletion reflex/components/datadisplay/code.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,7 @@ def create(
else:
return code_block

def add_style(self) -> Style | None:
def add_style(self):
"""Add style to the component."""
self.custom_style.update(self.style)

Expand Down
2 changes: 1 addition & 1 deletion reflex/components/datadisplay/code.pyi
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1111,6 +1111,6 @@ class CodeBlock(Component):
The text component.
"""
...
def add_style(self) -> Style | None: ...
def add_style(self): ...
@staticmethod
def convert_theme_name(theme) -> str: ...
154 changes: 74 additions & 80 deletions reflex/components/radix/primitives/accordion.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ class AccordionComponent(RadixPrimitiveComponent):
# The variant of the component.
variant: Var[LiteralAccordionVariant]

def add_style(self) -> Style | None:
def add_style(self):
"""Add style to the component."""
if self.color_scheme is not None:
self.custom_attrs["data-accent-color"] = self.color_scheme
Expand Down Expand Up @@ -250,43 +250,41 @@ def create(

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.
Returns:
The style of the component.
"""
divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}"
return Style(
{
"overflow": "hidden",
"width": "100%",
"margin_top": "1px",
return {
"overflow": "hidden",
"width": "100%",
"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,
"&: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,
},
_inherited_variant_selector("ghost", "&:last-child"): {
"border_radius": 0,
"border_bottom": divider_style,
},
}
)
},
_inherited_variant_selector("ghost", "&:last-child"): {
"border_radius": 0,
"border_bottom": divider_style,
},
}


class AccordionHeader(AccordionComponent):
Expand Down Expand Up @@ -314,13 +312,13 @@ def create(cls, *children, **props) -> Component:

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.
Returns:
The style of the component.
"""
return Style({"display": "flex"})
return {"display": "flex"}


class AccordionTrigger(AccordionComponent):
Expand Down Expand Up @@ -348,44 +346,42 @@ def create(cls, *children, **props) -> Component:

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.
Returns:
The style of the component.
"""
return Style(
{
"color": color("accent", 11),
"font_size": "1.1em",
"line_height": 1,
"justify_content": "space-between",
"align_items": "center",
"flex": 1,
"display": "flex",
"padding": "var(--space-3) var(--space-4)",
"width": "100%",
"box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
"&[data-state='open'] > .AccordionChevron": {
"transform": "rotate(180deg)",
},
return {
"color": color("accent", 11),
"font_size": "1.1em",
"line_height": 1,
"justify_content": "space-between",
"align_items": "center",
"flex": 1,
"display": "flex",
"padding": "var(--space-3) var(--space-4)",
"width": "100%",
"box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
"&[data-state='open'] > .AccordionChevron": {
"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": {
"background_color": color("accent", 4),
"background_color": color("accent", 10),
},
"& > .AccordionChevron": {
"transition": f"transform var(--animation-duration) var(--animation-easing)",
},
_inherited_variant_selector("classic"): {
"color": "var(--accent-contrast)",
"&:hover": {
"background_color": color("accent", 10),
},
"& > .AccordionChevron": {
"color": "var(--accent-contrast)",
},
},
}
)
},
}


class AccordionIcon(Icon):
Expand Down Expand Up @@ -470,7 +466,7 @@ def add_custom_code(self) -> list[str]:
"""
]

def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
Expand All @@ -486,24 +482,22 @@ def add_style(self) -> Style | None:
_var_is_string=True,
)

return Style(
{
"overflow": "hidden",
"color": color("accent", 11),
"padding_x": "var(--space-4)",
# Apply before and after content to avoid height animation jank.
"&:before, &:after": {
"content": "' '",
"display": "block",
"height": "var(--space-3)",
},
"&[data-state='open']": {"animation": slideDown},
"&[data-state='closed']": {"animation": slideUp},
_inherited_variant_selector("classic"): {
"color": "var(--accent-contrast)",
},
}
)
return {
"overflow": "hidden",
"color": color("accent", 11),
"padding_x": "var(--space-4)",
# Apply before and after content to avoid height animation jank.
"&:before, &:after": {
"content": "' '",
"display": "block",
"height": "var(--space-3)",
},
"&[data-state='open']": {"animation": slideDown},
"&[data-state='closed']": {"animation": slideUp},
_inherited_variant_selector("classic"): {
"color": "var(--accent-contrast)",
},
}


class Accordion(ComponentNamespace):
Expand Down
10 changes: 5 additions & 5 deletions reflex/components/radix/primitives/accordion.pyi
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ DEFAULT_ANIMATION_DURATION = 250
DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"

class AccordionComponent(RadixPrimitiveComponent):
def add_style(self) -> Style | None: ...
def add_style(self): ...
@overload
@classmethod
def create( # type: ignore
Expand Down Expand Up @@ -520,7 +520,7 @@ class AccordionItem(AccordionComponent):
The accordion item.
"""
...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...

class AccordionHeader(AccordionComponent):
@overload
Expand Down Expand Up @@ -669,7 +669,7 @@ class AccordionHeader(AccordionComponent):
The Accordion header Component.
"""
...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...

class AccordionTrigger(AccordionComponent):
@overload
Expand Down Expand Up @@ -818,7 +818,7 @@ class AccordionTrigger(AccordionComponent):
The Accordion trigger Component.
"""
...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...

class AccordionIcon(Icon):
@overload
Expand Down Expand Up @@ -1047,7 +1047,7 @@ class AccordionContent(AccordionComponent):
"""
...
def add_custom_code(self) -> list[str]: ...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...

class Accordion(ComponentNamespace):
content = staticmethod(AccordionContent.create)
Expand Down
17 changes: 8 additions & 9 deletions reflex/components/radix/primitives/form.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
from reflex.components.el.elements.forms import Form as HTMLForm
from reflex.components.radix.themes.components.text_field import TextFieldRoot
from reflex.constants.event import EventTriggers
from reflex.style import Style
from reflex.vars import Var

from .base import RadixPrimitiveComponentWithClassName
Expand Down Expand Up @@ -38,13 +37,13 @@ def get_event_triggers(self) -> Dict[str, Any]:
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.
Returns:
The style of the component.
"""
return Style({"width": "100%"})
return {"width": "100%"}


class FormField(FormComponent):
Expand All @@ -60,13 +59,13 @@ class FormField(FormComponent):
# Flag to mark the form field as invalid, for server side validation.
server_invalid: Var[bool]

def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
The style of the component.
"""
return Style({"display": "grid", "margin_bottom": "10px"})
return {"display": "grid", "margin_bottom": "10px"}


class FormLabel(FormComponent):
Expand All @@ -76,13 +75,13 @@ class FormLabel(FormComponent):

alias = "RadixFormLabel"

def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
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):
Expand Down Expand Up @@ -149,13 +148,13 @@ class FormMessage(FormComponent):
# Forces the message to be shown. This is useful when using server-side validation.
force_match: Var[bool]

def add_style(self) -> Style | None:
def add_style(self) -> dict[str, Any] | None:
"""Add style to the component.
Returns:
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):
Expand Down
9 changes: 4 additions & 5 deletions reflex/components/radix/primitives/form.pyi
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ from reflex.components.component import ComponentNamespace
from reflex.components.el.elements.forms import Form as HTMLForm
from reflex.components.radix.themes.components.text_field import TextFieldRoot
from reflex.constants.event import EventTriggers
from reflex.style import Style
from reflex.vars import Var
from .base import RadixPrimitiveComponentWithClassName

Expand Down Expand Up @@ -96,7 +95,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):

class FormRoot(FormComponent, HTMLForm):
def get_event_triggers(self) -> Dict[str, Any]: ...
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
Expand Down Expand Up @@ -275,7 +274,7 @@ class FormRoot(FormComponent, HTMLForm):
...

class FormField(FormComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
Expand Down Expand Up @@ -358,7 +357,7 @@ class FormField(FormComponent):
...

class FormLabel(FormComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
Expand Down Expand Up @@ -532,7 +531,7 @@ LiteralMatcher = Literal[
]

class FormMessage(FormComponent):
def add_style(self) -> Style | None: ...
def add_style(self) -> dict[str, Any] | None: ...
@overload
@classmethod
def create( # type: ignore
Expand Down
Loading

0 comments on commit 4bda3eb

Please sign in to comment.