diff --git a/reflex/components/core/html.py b/reflex/components/core/html.py index 987d216a3..e344cb3d7 100644 --- a/reflex/components/core/html.py +++ b/reflex/components/core/html.py @@ -35,5 +35,11 @@ class Html(Div): 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) diff --git a/reflex/components/core/upload.py b/reflex/components/core/upload.py index a652f9462..b3ac37c15 100644 --- a/reflex/components/core/upload.py +++ b/reflex/components/core/upload.py @@ -219,6 +219,12 @@ class Upload(MemoizationLeaf): # 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 = { diff --git a/reflex/components/radix/themes/layout/container.py b/reflex/components/radix/themes/layout/container.py index 2e049df7d..2ab548cdf 100644 --- a/reflex/components/radix/themes/layout/container.py +++ b/reflex/components/radix/themes/layout/container.py @@ -4,6 +4,7 @@ from __future__ import annotations 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, + ) diff --git a/reflex/components/radix/themes/layout/container.pyi b/reflex/components/radix/themes/layout/container.pyi index 4e7bc275b..a2ea0266f 100644 --- a/reflex/components/radix/themes/layout/container.pyi +++ b/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 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. """ ... diff --git a/reflex/components/radix/themes/layout/stack.py b/reflex/components/radix/themes/layout/stack.py index 9c53c2a86..8f0abf433 100644 --- a/reflex/components/radix/themes/layout/stack.py +++ b/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 @@ class Stack(Flex): 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, diff --git a/reflex/components/radix/themes/layout/stack.pyi b/reflex/components/radix/themes/layout/stack.pyi index f14cd684c..c35f1dad8 100644 --- a/reflex/components/radix/themes/layout/stack.pyi +++ b/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[ diff --git a/reflex/style.py b/reflex/style.py index 159f05454..179e4ff19 100644 --- a/reflex/style.py +++ b/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", + }, +} diff --git a/tests/components/core/test_html.py b/tests/components/core/test_html.py index 4800437f0..325bdcaf9 100644 --- a/tests/components/core/test_html.py +++ b/tests/components/core/test_html.py @@ -16,4 +16,7 @@ def test_html_many_children(): def test_html_create(): html = Html.create("

Hello !

") assert str(html.dangerouslySetInnerHTML) == '{"__html": "

Hello !

"}' # type: ignore - assert str(html) == '
Hello !

"}}/>' + assert ( + str(html) + == '
Hello !

"}}/>' + ) diff --git a/tests/components/forms/test_uploads.py b/tests/components/forms/test_uploads.py index 36e1ebac7..930d669ef 100644 --- a/tests/components/forms/test_uploads.py +++ b/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()}", ]