From 1048f86dd35745aab836401e35801b57ae1f96d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Brand=C3=A9ho?= Date: Fri, 15 Mar 2024 18:57:20 +0100 Subject: [PATCH] convert text inside list_item to span and set icon display to inline (#2860) * convert text inside list_item to span and set icon display to inline * fix props * add comment for reflex-web --- reflex/components/radix/themes/layout/list.py | 35 +++++++++-- .../components/radix/themes/layout/list.pyi | 62 ++++++++++++++++--- 2 files changed, 84 insertions(+), 13 deletions(-) diff --git a/reflex/components/radix/themes/layout/list.py b/reflex/components/radix/themes/layout/list.py index 8d458910b..11c84a786 100644 --- a/reflex/components/radix/themes/layout/list.py +++ b/reflex/components/radix/themes/layout/list.py @@ -5,6 +5,8 @@ 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.lucide.icon import Icon +from reflex.components.radix.themes.typography.text import Text from reflex.style import Style from reflex.vars import Var @@ -39,12 +41,16 @@ LiteralListStyleTypeOrdered = Literal[ class BaseList(Flex, LayoutComponent): """Base class for ordered and unordered lists.""" + # The style of the list. Default to "none". + list_style_type: Var[ + Union[LiteralListStyleTypeUnordered, LiteralListStyleTypeOrdered] + ] + @classmethod def create( cls, *children, items: Optional[Union[Var[Iterable], Iterable]] = None, - list_style_type: str = "", **props, ): """Create a list component. @@ -52,21 +58,23 @@ class BaseList(Flex, LayoutComponent): Args: *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. Returns: The list component. + """ + list_style_type = props.pop("list_style_type", "none") if not children and items is not None: if isinstance(items, Var): 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_type"] = list_style_type 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"] return super().create(*children, **props) @@ -102,6 +110,7 @@ class UnorderedList(BaseList): Returns: The list component. + """ return super().create( *children, items=items, list_style_type=list_style_type, **props @@ -129,6 +138,7 @@ class OrderedList(BaseList): Returns: The list component. + """ return super().create( *children, items=items, list_style_type=list_style_type, **props @@ -138,7 +148,24 @@ class OrderedList(BaseList): class ListItem(Li): """Display an item of an ordered or unordered list.""" - ... + @classmethod + def create(cls, *children, **props): + """Create a list item component. + + Args: + *children: The children of the component. + **props: The properties of the component. + + Returns: + The list item component. + + """ + for child in children: + if isinstance(child, Text): + child.as_ = "span" + elif isinstance(child, Icon) and "display" not in child.style: + child.style["display"] = "inline" + return super().create(*children, **props) class List(ComponentNamespace): diff --git a/reflex/components/radix/themes/layout/list.pyi b/reflex/components/radix/themes/layout/list.pyi index 4ee3f65dd..74029553f 100644 --- a/reflex/components/radix/themes/layout/list.pyi +++ b/reflex/components/radix/themes/layout/list.pyi @@ -11,6 +11,8 @@ 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.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 @@ -41,7 +43,50 @@ class BaseList(Flex, LayoutComponent): cls, *children, items: Optional[Union[Union[Var[Iterable], Iterable], Iterable]] = None, - list_style_type: Optional[str] = "", + list_style_type: Optional[ + Union[ + Var[ + Union[ + Literal["none", "disc", "circle", "square"], + Literal[ + "none", + "decimal", + "decimal-leading-zero", + "lower-roman", + "upper-roman", + "lower-greek", + "lower-latin", + "upper-latin", + "armenian", + "georgian", + "lower-alpha", + "upper-alpha", + "hiragana", + "katakana", + ], + ] + ], + Union[ + Literal["none", "disc", "circle", "square"], + Literal[ + "none", + "decimal", + "decimal-leading-zero", + "lower-roman", + "upper-roman", + "lower-greek", + "lower-latin", + "upper-latin", + "armenian", + "georgian", + "lower-alpha", + "upper-alpha", + "hiragana", + "katakana", + ], + ], + ] + ] = None, as_child: Optional[Union[Var[bool], bool]] = None, direction: Optional[ Union[ @@ -257,7 +302,7 @@ class BaseList(Flex, LayoutComponent): Args: *children: The children of the component. items: A list of items to add to the list. - list_style_type: The style of 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" @@ -306,6 +351,7 @@ class BaseList(Flex, LayoutComponent): Returns: The list component. + """ ... @@ -581,6 +627,7 @@ class UnorderedList(BaseList): Returns: The list component. + """ ... @@ -873,12 +920,11 @@ class OrderedList(BaseList): Returns: The list component. + """ ... class ListItem(Li): - ... - @overload @classmethod def create( # type: ignore @@ -977,7 +1023,7 @@ class ListItem(Li): ] = None, **props ) -> "ListItem": - """Create the component. + """Create a list item component. Args: *children: The children of the component. @@ -1003,13 +1049,11 @@ class ListItem(Li): class_name: The class name for the component. autofocus: Whether the component should take the focus once the page is loaded custom_attrs: custom attribute - **props: The props of the component. + **props: The properties of the component. Returns: - The component. + The list item component. - Raises: - TypeError: If an invalid child is passed. """ ...