laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF-2574] Default width for Stack (+children) and default padding for container (#3104)

Browse Source
This commit is contained in:
Masen Furer 2024-04-30 13:15:57 -07:00 committed by GitHub
parent 8bb736111a
commit b7e85ecec4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 81 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
reflex/components/core/html.py
View File

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

6
reflex/components/core/upload.py
View File

@ -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 = {

32
reflex/components/radix/themes/layout/container.py
View File

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

39
reflex/components/radix/themes/layout/container.pyi
View File

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

8
reflex/components/radix/themes/layout/stack.py
View File

@ -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,

6
reflex/components/radix/themes/layout/stack.pyi
View File

@ -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[

14
reflex/style.py
View File

@ -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",
},
}

5
tests/components/core/test_html.py
View File

@ -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>"}}/>'
)

2
tests/components/forms/test_uploads.py
View File

@ -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()}",
]