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

@@ -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):

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.
         """
         ...