[REF-2574] Default width for Stack (+children) and default padding fo…

…r container (#3104)

reflex/components/core/html.py

@@ -35,5 +35,11 @@ def create(cls, *children, **props):
         else:
             props["dangerouslySetInnerHTML"] = {"__html": children[0]}
 
+        # Apply the default classname
+        given_class_name = props.pop("class_name", [])
+        if isinstance(given_class_name, str):
+            given_class_name = [given_class_name]
+        props["class_name"] = ["rx-Html", *given_class_name]
+
         # Create the component.
         return super().create(**props)

reflex/components/core/upload.py

@@ -219,6 +219,12 @@ def create(cls, *children, **props) -> Component:
         # Mark the Upload component as used in the app.
         cls.is_used = True
 
+        # Apply the default classname
+        given_class_name = props.pop("class_name", [])
+        if isinstance(given_class_name, str):
+            given_class_name = [given_class_name]
+        props["class_name"] = ["rx-Upload", *given_class_name]
+
         # get only upload component props
         supported_props = cls.get_props().union({"on_drop"})
         upload_props = {

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

@@ -4,6 +4,7 @@
 from typing import Literal
 
 from reflex import el
+from reflex.style import STACK_CHILDREN_FULL_WIDTH
 from reflex.vars import Var
 
 from ..base import RadixThemesComponent
@@ -19,5 +20,32 @@ class Container(el.Div, RadixThemesComponent):
 
     tag = "Container"
 
-    # The size of the container: "1" - "4" (default "4")
-    size: Var[LiteralContainerSize]
+    # The size of the container: "1" - "4" (default "3")
+    size: Var[LiteralContainerSize] = Var.create_safe("3")
+
+    @classmethod
+    def create(
+        cls,
+        *children,
+        padding: str = "16px",
+        stack_children_full_width: bool = False,
+        **props,
+    ):
+        """Create the container component.
+
+        Args:
+            children: The children components.
+            padding: The padding of the container.
+            stack_children_full_width: If True, any vstack/hstack children will have 100% width.
+            props: The properties of the container.
+
+        Returns:
+            The container component.
+        """
+        if stack_children_full_width:
+            props["style"] = {**STACK_CHILDREN_FULL_WIDTH, **props.pop("style", {})}
+        return super().create(
+            *children,
+            padding=padding,
+            **props,
+        )

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

@@ -9,6 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
 from reflex import el
+from reflex.style import STACK_CHILDREN_FULL_WIDTH
 from reflex.vars import Var
 from ..base import RadixThemesComponent
 
@@ -20,6 +21,8 @@ class Container(el.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
+        padding: Optional[str] = "16px",
+        stack_children_full_width: Optional[bool] = False,
         size: Optional[
             Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
         ] = None,
@@ -116,39 +119,15 @@ class Container(el.Div, RadixThemesComponent):
         ] = None,
         **props
     ) -> "Container":
-        """Create a new component instance.
-
-        Will prepend "RadixThemes" to the component tag to avoid conflicts with
-        other UI libraries for common names, like Text and Button.
+        """Create the container component.
 
         Args:
-            *children: Child components.
-            size: The size of the container: "1" - "4" (default "4")
-            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 <menu> element which will serve as the element's context menu.
-            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
-            draggable: Defines whether the element can be dragged.
-            enter_key_hint: Hints what media types the media element is able to play.
-            hidden: Defines whether the element is hidden.
-            input_mode: Defines the type of the element.
-            item_prop: Defines the name of the element for metadata purposes.
-            lang: Defines the language used in the element.
-            role: Defines the role of the element.
-            slot: Assigns a slot in a shadow DOM shadow tree to an element.
-            spell_check: Defines whether the element may be checked for spelling errors.
-            tab_index: Defines the position of the current element in the tabbing order.
-            title: Defines a tooltip for the element.
-            style: The style of the component.
-            key: A unique key for the component.
-            id: The id for the component.
-            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: Component properties.
+            children: The children components.
+            padding: The padding of the container.
+            stack_children_full_width: If True, any vstack/hstack children will have 100% width.
+            props: The properties of the container.
 
         Returns:
-            A new component instance.
+            The container component.
         """
         ...

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

@@ -16,7 +16,7 @@ class Stack(Flex):
     def create(
         cls,
         *children,
-        spacing: LiteralSpacing = "2",
+        spacing: LiteralSpacing = "3",
         align: LiteralAlign = "start",
         **props,
     ) -> Component:
@@ -31,6 +31,12 @@ def create(
         Returns:
             The stack component.
         """
+        # Apply the default classname
+        given_class_name = props.pop("class_name", [])
+        if isinstance(given_class_name, str):
+            given_class_name = [given_class_name]
+        props["class_name"] = ["rx-Stack", *given_class_name]
+
         return super().create(
             *children,
             spacing=spacing,

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

@@ -18,7 +18,7 @@ class Stack(Flex):
     def create(  # type: ignore
         cls,
         *children,
-        spacing: Optional[LiteralSpacing] = "2",
+        spacing: Optional[LiteralSpacing] = "3",
         align: Optional[LiteralAlign] = "start",
         as_child: Optional[Union[Var[bool], bool]] = None,
         direction: Optional[
@@ -177,7 +177,7 @@ class VStack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        spacing: Optional[LiteralSpacing] = "2",
+        spacing: Optional[LiteralSpacing] = "3",
         align: Optional[LiteralAlign] = "start",
         direction: Optional[
             Union[
@@ -336,7 +336,7 @@ class HStack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        spacing: Optional[LiteralSpacing] = "2",
+        spacing: Optional[LiteralSpacing] = "3",
         align: Optional[LiteralAlign] = "start",
         direction: Optional[
             Union[

reflex/style.py

@@ -274,3 +274,17 @@ def convert_dict_to_style_and_format_emotion(
 
     """
     return format_as_emotion(Style(raw_dict))
+
+
+STACK_CHILDREN_FULL_WIDTH = {
+    "& :where(.rx-Stack)": {
+        "width": "100%",
+    },
+    "& :where(.rx-Stack) > :where( "
+    "div:not(.rt-Box, .rx-Upload, .rx-Html),"
+    "input, select, textarea, table"
+    ")": {
+        "width": "100%",
+        "flex_shrink": "1",
+    },
+}

tests/components/core/test_html.py

@@ -16,4 +16,7 @@ def test_html_many_children():
 def test_html_create():
     html = Html.create("<p>Hello !</p>")
     assert str(html.dangerouslySetInnerHTML) == '{"__html": "<p>Hello !</p>"}'  # type: ignore
-    assert str(html) == '<div dangerouslySetInnerHTML={{"__html": "<p>Hello !</p>"}}/>'
+    assert (
+        str(html)
+        == '<div className={`rx-Html`} dangerouslySetInnerHTML={{"__html": "<p>Hello !</p>"}}/>'
+    )

tests/components/forms/test_uploads.py

@@ -81,6 +81,7 @@ def test_upload_root_component_render(upload_root_component):
     [box] = upload["children"]
     assert box["name"] == "Box"
     assert box["props"] == [
+        "className={`rx-Upload`}",
         'sx={{"border": "1px dotted black"}}',
         "{...getRootProps()}",
     ]
@@ -122,6 +123,7 @@ def test_upload_component_render(upload_component):
     [box] = upload["children"]
     assert box["name"] == "Box"
     assert box["props"] == [
+        "className={`rx-Upload`}",
         'sx={{"border": "1px dotted black", "padding": "5em", "textAlign": "center"}}',
         "{...getRootProps()}",
     ]