[GTM-345]Define component props in class for doc discoverability (#4183)

* Define component props in class for doc discoverability

* add other files

* fix accordion typing

* add more

* pyright fix

* pyi fix

* pyi fix fr

* resinstate connection banner api

* precommit fix

* fix reflex-web test for select

* exclude props we don't need from compiling.
use regular model fields where necessary

* fix counter tests

* list partial fix

* list fix

* list fix

* precommit fix

* Accept suggestions

* Update reflex/components/radix/primitives/accordion.py

Co-authored-by: Masen Furer <m_github@0x26.net>

* address missed comment

* pyright fix

---------

Co-authored-by: Masen Furer <m_github@0x26.net>
This commit is contained in:
Elijah Ahianyo 2024-11-01 10:55:02 +00:00 committed by GitHub
parent dbc9ab2d63
commit bcd51779e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 227 additions and 76 deletions

View File

@ -391,7 +391,7 @@ class CodeBlock(Component):
theme: Var[Union[Theme, str]] = Theme.one_light theme: Var[Union[Theme, str]] = Theme.one_light
# The language to use. # The language to use.
language: Var[LiteralCodeLanguage] = "python" # type: ignore language: Var[LiteralCodeLanguage] = Var.create("python")
# The code to display. # The code to display.
code: Var[str] code: Var[str]
@ -411,6 +411,12 @@ class CodeBlock(Component):
# Props passed down to the code tag. # Props passed down to the code tag.
code_tag_props: Var[Dict[str, str]] code_tag_props: Var[Dict[str, str]]
# Whether a copy button should appear.
can_copy: Optional[bool] = False
# A custom copy button to override the default one.
copy_button: Optional[Union[bool, Component]] = None
def add_imports(self) -> ImportDict: def add_imports(self) -> ImportDict:
"""Add imports for the CodeBlock component. """Add imports for the CodeBlock component.
@ -448,16 +454,12 @@ class CodeBlock(Component):
def create( def create(
cls, cls,
*children, *children,
can_copy: Optional[bool] = False,
copy_button: Optional[Union[bool, Component]] = None,
**props, **props,
): ):
"""Create a text component. """Create a text component.
Args: Args:
*children: The children of the component. *children: The children of the component.
can_copy: Whether a copy button should appears.
copy_button: A custom copy button to override the default one.
**props: The props to pass to the component. **props: The props to pass to the component.
Returns: Returns:
@ -465,6 +467,8 @@ class CodeBlock(Component):
""" """
# This component handles style in a special prop. # This component handles style in a special prop.
custom_style = props.pop("custom_style", {}) custom_style = props.pop("custom_style", {})
can_copy = props.pop("can_copy", False)
copy_button = props.pop("copy_button", None)
if "theme" not in props: if "theme" not in props:
# Default color scheme responds to global color mode. # Default color scheme responds to global color mode.
@ -536,6 +540,9 @@ class CodeBlock(Component):
return out return out
def _exclude_props(self) -> list[str]:
return ["can_copy", "copy_button"]
class CodeblockNamespace(ComponentNamespace): class CodeblockNamespace(ComponentNamespace):
"""Namespace for the CodeBlock component.""" """Namespace for the CodeBlock component."""

View File

@ -356,8 +356,6 @@ class CodeBlock(Component):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
can_copy: Optional[bool] = False,
copy_button: Optional[Union[Component, bool]] = None,
theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None, theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
language: Optional[ language: Optional[
Union[ Union[
@ -933,6 +931,8 @@ class CodeBlock(Component):
wrap_long_lines: Optional[Union[Var[bool], bool]] = None, wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None, custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None, code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None,
can_copy: Optional[bool] = None,
copy_button: Optional[Union[Component, bool]] = None,
style: Optional[Style] = None, style: Optional[Style] = None,
key: Optional[Any] = None, key: Optional[Any] = None,
id: Optional[Any] = None, id: Optional[Any] = None,
@ -960,8 +960,6 @@ class CodeBlock(Component):
Args: Args:
*children: The children of the component. *children: The children of the component.
can_copy: Whether a copy button should appears.
copy_button: A custom copy button to override the default one.
theme: The theme to use ("light" or "dark"). theme: The theme to use ("light" or "dark").
language: The language to use. language: The language to use.
code: The code to display. code: The code to display.
@ -970,6 +968,8 @@ class CodeBlock(Component):
wrap_long_lines: Whether to wrap long lines. wrap_long_lines: Whether to wrap long lines.
custom_style: A custom style for the code block. custom_style: A custom style for the code block.
code_tag_props: Props passed down to the code tag. code_tag_props: Props passed down to the code tag.
can_copy: Whether a copy button should appear.
copy_button: A custom copy button to override the default one.
style: The style of the component. style: The style of the component.
key: A unique key for the component. key: A unique key for the component.
id: The id for the component. id: The id for the component.
@ -991,8 +991,6 @@ class CodeblockNamespace(ComponentNamespace):
@staticmethod @staticmethod
def __call__( def __call__(
*children, *children,
can_copy: Optional[bool] = False,
copy_button: Optional[Union[Component, bool]] = None,
theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None, theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
language: Optional[ language: Optional[
Union[ Union[
@ -1568,6 +1566,8 @@ class CodeblockNamespace(ComponentNamespace):
wrap_long_lines: Optional[Union[Var[bool], bool]] = None, wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None, custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None, code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None,
can_copy: Optional[bool] = None,
copy_button: Optional[Union[Component, bool]] = None,
style: Optional[Style] = None, style: Optional[Style] = None,
key: Optional[Any] = None, key: Optional[Any] = None,
id: Optional[Any] = None, id: Optional[Any] = None,
@ -1595,8 +1595,6 @@ class CodeblockNamespace(ComponentNamespace):
Args: Args:
*children: The children of the component. *children: The children of the component.
can_copy: Whether a copy button should appears.
copy_button: A custom copy button to override the default one.
theme: The theme to use ("light" or "dark"). theme: The theme to use ("light" or "dark").
language: The language to use. language: The language to use.
code: The code to display. code: The code to display.
@ -1605,6 +1603,8 @@ class CodeblockNamespace(ComponentNamespace):
wrap_long_lines: Whether to wrap long lines. wrap_long_lines: Whether to wrap long lines.
custom_style: A custom style for the code block. custom_style: A custom style for the code block.
code_tag_props: Props passed down to the code tag. code_tag_props: Props passed down to the code tag.
can_copy: Whether a copy button should appear.
copy_button: A custom copy button to override the default one.
style: The style of the component. style: The style of the component.
key: A unique key for the component. key: A unique key for the component.
id: The id for the component. id: The id for the component.

View File

@ -2,7 +2,7 @@
from __future__ import annotations from __future__ import annotations
from typing import Any, List, Literal, Optional, Tuple, Union from typing import Any, List, Literal, Tuple, Union
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
@ -193,6 +193,11 @@ class AccordionItem(AccordionComponent):
# When true, prevents the user from interacting with the item. # When true, prevents the user from interacting with the item.
disabled: Var[bool] disabled: Var[bool]
# The header of the accordion item.
header: Var[Union[Component, str]]
# The content of the accordion item.
content: Var[Union[Component, str]] = Var.create(None)
_valid_children: List[str] = [ _valid_children: List[str] = [
"AccordionHeader", "AccordionHeader",
"AccordionTrigger", "AccordionTrigger",
@ -205,21 +210,20 @@ class AccordionItem(AccordionComponent):
def create( def create(
cls, cls,
*children, *children,
header: Optional[Component | Var] = None,
content: Optional[Component | Var] = None,
**props, **props,
) -> Component: ) -> Component:
"""Create an accordion item. """Create an accordion item.
Args: Args:
*children: The list of children to use if header and content are not provided. *children: The list of children to use if header and content are not provided.
header: The header of the accordion item.
content: The content of the accordion item.
**props: Additional properties to apply to the accordion item. **props: Additional properties to apply to the accordion item.
Returns: Returns:
The accordion item. The accordion item.
""" """
header = props.pop("header", None)
content = props.pop("content", None)
# The item requires a value to toggle (use a random unique name if not provided). # The item requires a value to toggle (use a random unique name if not provided).
value = props.pop("value", get_uuid_string_var()) value = props.pop("value", get_uuid_string_var())
@ -291,6 +295,9 @@ class AccordionItem(AccordionComponent):
}, },
} }
def _exclude_props(self) -> list[str]:
return ["header", "content"]
class AccordionHeader(AccordionComponent): class AccordionHeader(AccordionComponent):
"""An accordion component.""" """An accordion component."""

View File

@ -303,10 +303,10 @@ class AccordionItem(AccordionComponent):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
header: Optional[Union[Component, Var]] = None,
content: Optional[Union[Component, Var]] = None,
value: Optional[Union[Var[str], str]] = None, value: Optional[Union[Var[str], str]] = None,
disabled: Optional[Union[Var[bool], bool]] = None, disabled: Optional[Union[Var[bool], bool]] = None,
header: Optional[Union[Component, Var[Union[Component, str]], str]] = None,
content: Optional[Union[Component, Var[Union[Component, str]], str]] = None,
color_scheme: Optional[ color_scheme: Optional[
Union[ Union[
Literal[ Literal[
@ -403,10 +403,10 @@ class AccordionItem(AccordionComponent):
Args: Args:
*children: The list of children to use if header and content are not provided. *children: The list of children to use if header and content are not provided.
header: The header of the accordion item.
content: The content of the accordion item.
value: A unique identifier for the item. value: A unique identifier for the item.
disabled: When true, prevents the user from interacting with the item. disabled: When true, prevents the user from interacting with the item.
header: The header of the accordion item.
content: The content of the accordion item.
color_scheme: The color scheme of the component. color_scheme: The color scheme of the component.
variant: The variant of the component. variant: The variant of the component.
as_child: Change the default rendered element for the one passed as a child. as_child: Change the default rendered element for the one passed as a child.

View File

@ -17,7 +17,7 @@ rx.text(
from __future__ import annotations from __future__ import annotations
from typing import Dict, List, Literal, get_args from typing import Dict, List, Literal, Optional, Union, get_args
from reflex.components.component import BaseComponent from reflex.components.component import BaseComponent
from reflex.components.core.cond import Cond, color_mode_cond, cond from reflex.components.core.cond import Cond, color_mode_cond, cond
@ -96,26 +96,31 @@ def _set_static_default(props, position, prop, default):
class ColorModeIconButton(IconButton): class ColorModeIconButton(IconButton):
"""Icon Button for toggling light / dark mode via toggle_color_mode.""" """Icon Button for toggling light / dark mode via toggle_color_mode."""
# The position of the icon button. Follow document flow if None.
position: Optional[Union[LiteralPosition, Var[LiteralPosition]]] = None
# Allow picking the "system" value for the color mode.
allow_system: bool = False
@classmethod @classmethod
def create( def create(
cls, cls,
position: LiteralPosition | None = None,
allow_system: bool = False,
**props, **props,
): ):
"""Create a icon button component that calls toggle_color_mode on click. """Create an icon button component that calls toggle_color_mode on click.
Args: Args:
position: The position of the icon button. Follow document flow if None.
allow_system: Allow picking the "system" value for the color mode.
**props: The props to pass to the component. **props: The props to pass to the component.
Returns: Returns:
The button component. The button component.
""" """
position = props.pop("position", None)
allow_system = props.pop("allow_system", False)
# position is used to set nice defaults for positioning the icon button # position is used to set nice defaults for positioning the icon button
if isinstance(position, Var): if isinstance(position, Var):
_set_var_default(props, position, "position", "fixed", position) _set_var_default(props, position, "position", "fixed", position) # type: ignore
_set_var_default(props, position, "bottom", "2rem") _set_var_default(props, position, "bottom", "2rem")
_set_var_default(props, position, "top", "2rem") _set_var_default(props, position, "top", "2rem")
_set_var_default(props, position, "left", "2rem") _set_var_default(props, position, "left", "2rem")
@ -155,12 +160,15 @@ class ColorModeIconButton(IconButton):
color_mode_item("system"), color_mode_item("system"),
), ),
) )
return super().create( return IconButton.create(
ColorModeIcon.create(), ColorModeIcon.create(),
on_click=toggle_color_mode, on_click=toggle_color_mode,
**props, **props,
) )
def _exclude_props(self) -> list[str]:
return ["position", "allow_system"]
class ColorModeSwitch(Switch): class ColorModeSwitch(Switch):
"""Switch for toggling light / dark mode via toggle_color_mode.""" """Switch for toggling light / dark mode via toggle_color_mode."""

View File

@ -75,6 +75,18 @@ class ColorModeIconButton(IconButton):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
position: Optional[
Union[
Literal["bottom-left", "bottom-right", "top-left", "top-right"],
Union[
Literal["bottom-left", "bottom-right", "top-left", "top-right"],
Var[
Literal["bottom-left", "bottom-right", "top-left", "top-right"]
],
],
]
] = None,
allow_system: Optional[bool] = None,
as_child: Optional[Union[Var[bool], bool]] = None, as_child: Optional[Union[Var[bool], bool]] = None,
size: Optional[ size: Optional[
Union[ Union[
@ -226,7 +238,7 @@ class ColorModeIconButton(IconButton):
on_unmount: Optional[EventType[[]]] = None, on_unmount: Optional[EventType[[]]] = None,
**props, **props,
) -> "ColorModeIconButton": ) -> "ColorModeIconButton":
"""Create a icon button component that calls toggle_color_mode on click. """Create an icon button component that calls toggle_color_mode on click.
Args: Args:
position: The position of the icon button. Follow document flow if None. position: The position of the icon button. Follow document flow if None.

View File

@ -53,6 +53,9 @@ class Slider(RadixThemesComponent):
# The name of the slider. Submitted with its owning form as part of a name/value pair. # The name of the slider. Submitted with its owning form as part of a name/value pair.
name: Var[str] name: Var[str]
# The width of the slider.
width: Var[Optional[str]] = Var.create("100%")
# The minimum value of the slider. # The minimum value of the slider.
min: Var[Union[float, int]] min: Var[Union[float, int]]
@ -81,20 +84,19 @@ class Slider(RadixThemesComponent):
def create( def create(
cls, cls,
*children, *children,
width: Optional[str] = "100%",
**props, **props,
) -> Component: ) -> Component:
"""Create a Slider component. """Create a Slider component.
Args: Args:
*children: The children of the component. *children: The children of the component.
width: The width of the slider.
**props: The properties of the component. **props: The properties of the component.
Returns: Returns:
The component. The component.
""" """
default_value = props.pop("default_value", [50]) default_value = props.pop("default_value", [50])
width = props.pop("width", "100%")
if isinstance(default_value, Var): if isinstance(default_value, Var):
if issubclass(default_value._var_type, (int, float)): if issubclass(default_value._var_type, (int, float)):

View File

@ -24,7 +24,6 @@ class Slider(RadixThemesComponent):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
width: Optional[str] = "100%",
as_child: Optional[Union[Var[bool], bool]] = None, as_child: Optional[Union[Var[bool], bool]] = None,
size: Optional[ size: Optional[
Union[ Union[
@ -123,6 +122,7 @@ class Slider(RadixThemesComponent):
Union[List[Union[float, int]], Var[List[Union[float, int]]]] Union[List[Union[float, int]], Var[List[Union[float, int]]]]
] = None, ] = None,
name: Optional[Union[Var[str], str]] = None, name: Optional[Union[Var[str], str]] = None,
width: Optional[Union[Var[Optional[str]], str]] = None,
min: Optional[Union[Var[Union[float, int]], float, int]] = None, min: Optional[Union[Var[Union[float, int]], float, int]] = None,
max: Optional[Union[Var[Union[float, int]], float, int]] = None, max: Optional[Union[Var[Union[float, int]], float, int]] = None,
step: Optional[Union[Var[Union[float, int]], float, int]] = None, step: Optional[Union[Var[Union[float, int]], float, int]] = None,
@ -174,7 +174,6 @@ class Slider(RadixThemesComponent):
Args: Args:
*children: The children of the component. *children: The children of the component.
width: The width of the slider.
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
size: Button size "1" - "3" size: Button size "1" - "3"
variant: Variant of button variant: Variant of button
@ -184,6 +183,7 @@ class Slider(RadixThemesComponent):
default_value: The value of the slider when initially rendered. Use when you do not need to control the state of the slider. default_value: The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
value: The controlled value of the slider. Must be used in conjunction with onValueChange. value: The controlled value of the slider. Must be used in conjunction with onValueChange.
name: The name of the slider. Submitted with its owning form as part of a name/value pair. name: The name of the slider. Submitted with its owning form as part of a name/value pair.
width: The width of the slider.
min: The minimum value of the slider. min: The minimum value of the slider.
max: The maximum value of the slider. max: The maximum value of the slider.
step: The step value of the slider. step: The step value of the slider.

View File

@ -2,7 +2,7 @@
from __future__ import annotations from __future__ import annotations
from typing import Any, Iterable, Literal, Optional, Union from typing import Any, Iterable, Literal, 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
@ -44,27 +44,30 @@ class BaseList(Component):
# The style of the list. Default to "none". # The style of the list. Default to "none".
list_style_type: Var[ list_style_type: Var[
Union[LiteralListStyleTypeUnordered, LiteralListStyleTypeOrdered] Union[LiteralListStyleTypeUnordered, LiteralListStyleTypeOrdered]
] ] = Var.create("none")
# A list of items to add to the list.
items: Var[Iterable] = Var.create([])
@classmethod @classmethod
def create( def create(
cls, cls,
*children, *children,
items: Optional[Var[Iterable]] = None,
**props, **props,
): ):
"""Create a list component. """Create a list component.
Args: Args:
*children: The children of the component. *children: The children of the component.
items: A list of items to add to the list.
**props: The properties of the component. **props: The properties of the component.
Returns: Returns:
The list component. The list component.
""" """
items = props.pop("items", None)
list_style_type = props.pop("list_style_type", "none") list_style_type = props.pop("list_style_type", "none")
if not children and items is not None: if not children and items is not None:
if isinstance(items, Var): if isinstance(items, Var):
children = [Foreach.create(items, ListItem.create)] children = [Foreach.create(items, ListItem.create)]
@ -87,6 +90,9 @@ class BaseList(Component):
"direction": "column", "direction": "column",
} }
def _exclude_props(self) -> list[str]:
return ["items", "list_style_type"]
class UnorderedList(BaseList, Ul): class UnorderedList(BaseList, Ul):
"""Display an unordered list.""" """Display an unordered list."""
@ -97,22 +103,21 @@ class UnorderedList(BaseList, Ul):
def create( def create(
cls, cls,
*children, *children,
items: Optional[Var[Iterable]] = None,
list_style_type: LiteralListStyleTypeUnordered = "disc",
**props, **props,
): ):
"""Create a unordered list component. """Create an unordered list component.
Args: Args:
*children: The children of the component. *children: The children of the component.
items: A list of items to add to the list.
list_style_type: The style of the list.
**props: The properties of the component. **props: The properties of the component.
Returns: Returns:
The list component. The list component.
""" """
items = props.pop("items", None)
list_style_type = props.pop("list_style_type", "disc")
props["margin_left"] = props.get("margin_left", "1.5rem") props["margin_left"] = props.get("margin_left", "1.5rem")
return super().create( return super().create(
*children, items=items, list_style_type=list_style_type, **props *children, items=items, list_style_type=list_style_type, **props
@ -128,22 +133,21 @@ class OrderedList(BaseList, Ol):
def create( def create(
cls, cls,
*children, *children,
items: Optional[Var[Iterable]] = None,
list_style_type: LiteralListStyleTypeOrdered = "decimal",
**props, **props,
): ):
"""Create an ordered list component. """Create an ordered list component.
Args: Args:
*children: The children of the component. *children: The children of the component.
items: A list of items to add to the list.
list_style_type: The style of the list.
**props: The properties of the component. **props: The properties of the component.
Returns: Returns:
The list component. The list component.
""" """
items = props.pop("items", None)
list_style_type = props.pop("list_style_type", "decimal")
props["margin_left"] = props.get("margin_left", "1.5rem") props["margin_left"] = props.get("margin_left", "1.5rem")
return super().create( return super().create(
*children, items=items, list_style_type=list_style_type, **props *children, items=items, list_style_type=list_style_type, **props

View File

@ -35,7 +35,6 @@ class BaseList(Component):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
items: Optional[Union[Iterable, Var[Iterable]]] = None,
list_style_type: Optional[ list_style_type: Optional[
Union[ Union[
Literal[ Literal[
@ -78,6 +77,7 @@ class BaseList(Component):
], ],
] ]
] = None, ] = None,
items: Optional[Union[Iterable, Var[Iterable]]] = None,
style: Optional[Style] = None, style: Optional[Style] = None,
key: Optional[Any] = None, key: Optional[Any] = None,
id: Optional[Any] = None, id: Optional[Any] = None,
@ -105,8 +105,8 @@ class BaseList(Component):
Args: Args:
*children: The children of the component. *children: The children of the component.
items: A list of items to add to the list.
list_style_type: The style of the list. Default to "none". list_style_type: The style of the list. Default to "none".
items: A list of items to add to the list.
style: The style of the component. style: The style of the component.
key: A unique key for the component. key: A unique key for the component.
id: The id for the component. id: The id for the component.
@ -129,8 +129,49 @@ class UnorderedList(BaseList, Ul):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
list_style_type: Optional[
Union[
Literal[
"armenian",
"decimal",
"decimal-leading-zero",
"georgian",
"hiragana",
"katakana",
"lower-alpha",
"lower-greek",
"lower-latin",
"lower-roman",
"none",
"upper-alpha",
"upper-latin",
"upper-roman",
],
Literal["circle", "disc", "none", "square"],
Var[
Union[
Literal[
"armenian",
"decimal",
"decimal-leading-zero",
"georgian",
"hiragana",
"katakana",
"lower-alpha",
"lower-greek",
"lower-latin",
"lower-roman",
"none",
"upper-alpha",
"upper-latin",
"upper-roman",
],
Literal["circle", "disc", "none", "square"],
]
],
]
] = None,
items: Optional[Union[Iterable, Var[Iterable]]] = None, items: Optional[Union[Iterable, Var[Iterable]]] = None,
list_style_type: Optional[LiteralListStyleTypeUnordered] = "disc",
access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
auto_capitalize: Optional[ auto_capitalize: Optional[
Union[Var[Union[bool, int, str]], bool, int, str] Union[Var[Union[bool, int, str]], bool, int, str]
@ -178,12 +219,12 @@ class UnorderedList(BaseList, Ul):
on_unmount: Optional[EventType[[]]] = None, on_unmount: Optional[EventType[[]]] = None,
**props, **props,
) -> "UnorderedList": ) -> "UnorderedList":
"""Create a unordered list component. """Create an unordered list component.
Args: Args:
*children: The children of the component. *children: The children of the component.
list_style_type: The style of the list. Default to "none".
items: A list of items to add to the list. items: A list of items to add to the list.
list_style_type: The style of the list.
access_key: Provides a hint for generating a keyboard shortcut for the current element. access_key: Provides a hint for generating a keyboard shortcut for the current element.
auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user. auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
content_editable: Indicates whether the element's content is editable. content_editable: Indicates whether the element's content is editable.
@ -220,8 +261,49 @@ class OrderedList(BaseList, Ol):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
list_style_type: Optional[
Union[
Literal[
"armenian",
"decimal",
"decimal-leading-zero",
"georgian",
"hiragana",
"katakana",
"lower-alpha",
"lower-greek",
"lower-latin",
"lower-roman",
"none",
"upper-alpha",
"upper-latin",
"upper-roman",
],
Literal["circle", "disc", "none", "square"],
Var[
Union[
Literal[
"armenian",
"decimal",
"decimal-leading-zero",
"georgian",
"hiragana",
"katakana",
"lower-alpha",
"lower-greek",
"lower-latin",
"lower-roman",
"none",
"upper-alpha",
"upper-latin",
"upper-roman",
],
Literal["circle", "disc", "none", "square"],
]
],
]
] = None,
items: Optional[Union[Iterable, Var[Iterable]]] = None, items: Optional[Union[Iterable, Var[Iterable]]] = None,
list_style_type: Optional[LiteralListStyleTypeOrdered] = "decimal",
reversed: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, reversed: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
start: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, start: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
type: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None, type: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
@ -276,8 +358,8 @@ class OrderedList(BaseList, Ol):
Args: Args:
*children: The children of the component. *children: The children of the component.
list_style_type: The style of the list. Default to "none".
items: A list of items to add to the list. items: A list of items to add to the list.
list_style_type: The style of the list.
reversed: Reverses the order of the list. reversed: Reverses the order of the list.
start: Specifies the start value of the first list item in an ordered list. start: Specifies the start value of the first list item in an ordered list.
type: Specifies the kind of marker to use in the list (letters or numbers). type: Specifies the kind of marker to use in the list (letters or numbers).
@ -406,7 +488,6 @@ class List(ComponentNamespace):
@staticmethod @staticmethod
def __call__( def __call__(
*children, *children,
items: Optional[Union[Iterable, Var[Iterable]]] = None,
list_style_type: Optional[ list_style_type: Optional[
Union[ Union[
Literal[ Literal[
@ -449,6 +530,7 @@ class List(ComponentNamespace):
], ],
] ]
] = None, ] = None,
items: Optional[Union[Iterable, Var[Iterable]]] = None,
style: Optional[Style] = None, style: Optional[Style] = None,
key: Optional[Any] = None, key: Optional[Any] = None,
id: Optional[Any] = None, id: Optional[Any] = None,
@ -476,8 +558,8 @@ class List(ComponentNamespace):
Args: Args:
*children: The children of the component. *children: The children of the component.
items: A list of items to add to the list.
list_style_type: The style of the list. Default to "none". list_style_type: The style of the list. Default to "none".
items: A list of items to add to the list.
style: The style of the component. style: The style of the component.
key: A unique key for the component. key: A unique key for the component.
id: The id for the component. id: The id for the component.

View File

@ -12,20 +12,22 @@ from .flex import Flex, LiteralFlexDirection
class Stack(Flex): class Stack(Flex):
"""A stack component.""" """A stack component."""
# The spacing between each stack item.
spacing: Var[LiteralSpacing] = Var.create("3")
# The alignment of the stack items.
align: Var[LiteralAlign] = Var.create("start")
@classmethod @classmethod
def create( def create(
cls, cls,
*children, *children,
spacing: LiteralSpacing = "3",
align: LiteralAlign = "start",
**props, **props,
) -> Component: ) -> Component:
"""Create a new instance of the component. """Create a new instance of the component.
Args: Args:
*children: The children of the stack. *children: The children of the stack.
spacing: The spacing between each stack item.
align: The alignment of the stack items.
**props: The properties of the stack. **props: The properties of the stack.
Returns: Returns:
@ -39,8 +41,6 @@ class Stack(Flex):
return super().create( return super().create(
*children, *children,
spacing=spacing,
align=align,
**props, **props,
) )

View File

@ -10,7 +10,6 @@ from reflex.event import EventType
from reflex.style import Style from reflex.style import Style
from reflex.vars.base import Var from reflex.vars.base import Var
from ..base import LiteralAlign, LiteralSpacing
from .flex import Flex from .flex import Flex
class Stack(Flex): class Stack(Flex):
@ -19,8 +18,18 @@ class Stack(Flex):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
spacing: Optional[LiteralSpacing] = "3", spacing: Optional[
align: Optional[LiteralAlign] = "start", Union[
Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
]
] = None,
align: Optional[
Union[
Literal["baseline", "center", "end", "start", "stretch"],
Var[Literal["baseline", "center", "end", "start", "stretch"]],
]
] = None,
as_child: Optional[Union[Var[bool], bool]] = None, as_child: Optional[Union[Var[bool], bool]] = None,
direction: Optional[ direction: Optional[
Union[ Union[
@ -114,8 +123,8 @@ class Stack(Flex):
Args: Args:
*children: The children of the stack. *children: The children of the stack.
spacing: The spacing between each stack item. spacing: Gap between children: "0" - "9"
align: The alignment of the stack items. align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse" direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between" justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
@ -155,14 +164,24 @@ class VStack(Stack):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
spacing: Optional[LiteralSpacing] = "3",
align: Optional[LiteralAlign] = "start",
direction: Optional[ direction: Optional[
Union[ Union[
Literal["column", "column-reverse", "row", "row-reverse"], Literal["column", "column-reverse", "row", "row-reverse"],
Var[Literal["column", "column-reverse", "row", "row-reverse"]], Var[Literal["column", "column-reverse", "row", "row-reverse"]],
] ]
] = None, ] = None,
spacing: Optional[
Union[
Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
]
] = None,
align: Optional[
Union[
Literal["baseline", "center", "end", "start", "stretch"],
Var[Literal["baseline", "center", "end", "start", "stretch"]],
]
] = None,
as_child: Optional[Union[Var[bool], bool]] = None, as_child: Optional[Union[Var[bool], bool]] = None,
justify: Optional[ justify: Optional[
Union[ Union[
@ -239,9 +258,9 @@ class VStack(Stack):
Args: Args:
*children: The children of the stack. *children: The children of the stack.
spacing: The spacing between each stack item.
align: The alignment of the stack items.
direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse" direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
spacing: Gap between children: "0" - "9"
align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between" justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse" wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
@ -280,14 +299,24 @@ class HStack(Stack):
def create( # type: ignore def create( # type: ignore
cls, cls,
*children, *children,
spacing: Optional[LiteralSpacing] = "3",
align: Optional[LiteralAlign] = "start",
direction: Optional[ direction: Optional[
Union[ Union[
Literal["column", "column-reverse", "row", "row-reverse"], Literal["column", "column-reverse", "row", "row-reverse"],
Var[Literal["column", "column-reverse", "row", "row-reverse"]], Var[Literal["column", "column-reverse", "row", "row-reverse"]],
] ]
] = None, ] = None,
spacing: Optional[
Union[
Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
]
] = None,
align: Optional[
Union[
Literal["baseline", "center", "end", "start", "stretch"],
Var[Literal["baseline", "center", "end", "start", "stretch"]],
]
] = None,
as_child: Optional[Union[Var[bool], bool]] = None, as_child: Optional[Union[Var[bool], bool]] = None,
justify: Optional[ justify: Optional[
Union[ Union[
@ -364,9 +393,9 @@ class HStack(Stack):
Args: Args:
*children: The children of the stack. *children: The children of the stack.
spacing: The spacing between each stack item.
align: The alignment of the stack items.
direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse" direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
spacing: Gap between children: "0" - "9"
align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between" justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse" wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"