use direction props from radix.Flex (reflex-dev#2696)

* use direction props from radix.Flex

* override direction props

* test no var

* confirm no var

* add comment for reflex-web

Author: Lendemor

reflex/components/radix/themes/layout/stack.py

@@ -3,9 +3,10 @@
 from __future__ import annotations
 
 from reflex.components.component import Component
+from reflex.vars import Var
 
 from ..base import LiteralAlign, LiteralSpacing
-from .flex import Flex
+from .flex import Flex, LiteralFlexDirection
 
 
 class Stack(Flex):
@@ -41,12 +42,12 @@ def create(
 class VStack(Stack):
     """A vertical stack component."""
 
-    def _apply_theme(self, theme: Component):
-        self.style.update({"flex_direction": "column"})
+    # The direction of the stack.
+    direction: Var[LiteralFlexDirection] = "column"  # type: ignore
 
 
 class HStack(Stack):
     """A horizontal stack component."""
 
-    def _apply_theme(self, theme: Component):
-        self.style.update({"flex_direction": "row"})
+    # The direction of the stack.
+    direction: Var[LiteralFlexDirection] = "row"  # type: ignore

reflex/components/radix/themes/layout/stack.pyi

@@ -8,8 +8,9 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from reflex.components.component import Component
+from reflex.vars import Var
 from ..base import LiteralAlign, LiteralSpacing
-from .flex import Flex
+from .flex import Flex, LiteralFlexDirection
 
 class Stack(Flex):
     @overload
@@ -178,13 +179,13 @@ class VStack(Stack):
         *children,
         spacing: Optional[LiteralSpacing] = "2",
         align: Optional[LiteralAlign] = "start",
-        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,
+        as_child: Optional[Union[Var[bool], bool]] = None,
         justify: Optional[
             Union[
                 Var[Literal["start", "center", "end", "between"]],
@@ -296,8 +297,8 @@ class VStack(Stack):
             *children: The children of the stack.
             spacing: The spacing between each stack item.
             align: The alignment of the stack items.
-            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"
+            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"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
@@ -337,13 +338,13 @@ class HStack(Stack):
         *children,
         spacing: Optional[LiteralSpacing] = "2",
         align: Optional[LiteralAlign] = "start",
-        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,
+        as_child: Optional[Union[Var[bool], bool]] = None,
         justify: Optional[
             Union[
                 Var[Literal["start", "center", "end", "between"]],
@@ -455,8 +456,8 @@ class HStack(Stack):
             *children: The children of the stack.
             spacing: The spacing between each stack item.
             align: The alignment of the stack items.
-            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"
+            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"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.