diff --git a/reflex/components/radix/themes/layout/list.py b/reflex/components/radix/themes/layout/list.py
index 825d818de..958740ea3 100644
--- a/reflex/components/radix/themes/layout/list.py
+++ b/reflex/components/radix/themes/layout/list.py
@@ -4,15 +4,12 @@ from typing import Iterable, Literal, Optional, Union
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.foreach import Foreach
-from reflex.components.el.elements.typography import Li
+from reflex.components.el.elements.typography import Li, Ol, Ul
from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.typography.text import Text
from reflex.style import Style
from reflex.vars import Var
-from .base import LayoutComponent
-from .flex import Flex
-
LiteralListStyleTypeUnordered = Literal[
"none",
"disc",
@@ -38,9 +35,11 @@ LiteralListStyleTypeOrdered = Literal[
]
-class BaseList(Flex, LayoutComponent):
+class BaseList(Component):
"""Base class for ordered and unordered lists."""
+ tag = "ul"
+
# The style of the list. Default to "none".
list_style_type: Var[
Union[LiteralListStyleTypeUnordered, LiteralListStyleTypeOrdered]
@@ -70,10 +69,9 @@ class BaseList(Flex, LayoutComponent):
children = [Foreach.create(items, ListItem.create)]
else:
children = [ListItem.create(item) for item in items]
- # props["list_style_type"] = list_style_type
+ props["list_style_position"] = "outside"
props["direction"] = "column"
style = props.setdefault("style", {})
- style["list_style_position"] = "outside"
style["list_style_type"] = list_style_type
if "gap" in props:
style["gap"] = props["gap"]
@@ -83,15 +81,17 @@ class BaseList(Flex, LayoutComponent):
self.style = Style(
{
"direction": "column",
- "list_style_position": "outside",
+ "list_style_position": "inside",
**self.style,
}
)
-class UnorderedList(BaseList):
+class UnorderedList(BaseList, Ul):
"""Display an unordered list."""
+ tag = "ul"
+
@classmethod
def create(
cls,
@@ -112,14 +112,17 @@ class UnorderedList(BaseList):
The list component.
"""
+ props["margin_left"] = props.get("margin_left", "1.5rem")
return super().create(
*children, items=items, list_style_type=list_style_type, **props
)
-class OrderedList(BaseList):
+class OrderedList(BaseList, Ol):
"""Display an ordered list."""
+ tag = "ol"
+
@classmethod
def create(
cls,
@@ -140,6 +143,7 @@ class OrderedList(BaseList):
The list component.
"""
+ props["margin_left"] = props.get("margin_left", "1.5rem")
return super().create(
*children, items=items, list_style_type=list_style_type, **props
)
diff --git a/reflex/components/radix/themes/layout/list.pyi b/reflex/components/radix/themes/layout/list.pyi
index 140d48a55..382e5aaf5 100644
--- a/reflex/components/radix/themes/layout/list.pyi
+++ b/reflex/components/radix/themes/layout/list.pyi
@@ -10,13 +10,11 @@ from reflex.style import Style
from typing import Iterable, Literal, Optional, Union
from reflex.components.component import Component, ComponentNamespace
from reflex.components.core.foreach import Foreach
-from reflex.components.el.elements.typography import Li
+from reflex.components.el.elements.typography import Li, Ol, Ul
from reflex.components.lucide.icon import Icon
from reflex.components.radix.themes.typography.text import Text
from reflex.style import Style
from reflex.vars import Var
-from .base import LayoutComponent
-from .flex import Flex
LiteralListStyleTypeUnordered = Literal["none", "disc", "circle", "square"]
LiteralListStyleTypeOrdered = Literal[
@@ -36,7 +34,7 @@ LiteralListStyleTypeOrdered = Literal[
"katakana",
]
-class BaseList(Flex, LayoutComponent):
+class BaseList(Component):
@overload
@classmethod
def create( # type: ignore
@@ -87,163 +85,6 @@ class BaseList(Flex, LayoutComponent):
],
]
] = None,
- as_child: Optional[Union[Var[bool], bool]] = None,
- direction: Optional[
- Union[
- Var[Literal["row", "column", "row-reverse", "column-reverse"]],
- Literal["row", "column", "row-reverse", "column-reverse"],
- ]
- ] = None,
- align: Optional[
- Union[
- Var[Literal["start", "center", "end", "baseline", "stretch"]],
- Literal["start", "center", "end", "baseline", "stretch"],
- ]
- ] = None,
- justify: Optional[
- Union[
- Var[Literal["start", "center", "end", "between"]],
- Literal["start", "center", "end", "between"],
- ]
- ] = None,
- wrap: Optional[
- Union[
- Var[Literal["nowrap", "wrap", "wrap-reverse"]],
- Literal["nowrap", "wrap", "wrap-reverse"],
- ]
- ] = None,
- spacing: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- access_key: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- auto_capitalize: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- content_editable: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- context_menu: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
- draggable: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- enter_key_hint: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- hidden: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- input_mode: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- item_prop: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
- role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
- slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
- spell_check: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- tab_index: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- title: Optional[
- Union[Var[Union[str, int, bool]], Union[str, int, bool]]
- ] = None,
- p: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- px: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- py: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- pt: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- pr: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- pb: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- pl: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
- grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
- m: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- mx: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- my: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- mt: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- mr: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- mb: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
- ml: Optional[
- Union[
- Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
- Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
- ]
- ] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
@@ -303,44 +144,6 @@ class BaseList(Flex, LayoutComponent):
*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".
- 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"
- align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
- 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"
- spacing: Gap between children: "0" - "9"
- 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.
- content_editable: Indicates whether the element's content is editable.
- context_menu: Defines the ID of a