From 7fee5d9e8d47330a9c6deb1039eb965f56cc6829 Mon Sep 17 00:00:00 2001 From: Masen Furer Date: Wed, 8 May 2024 14:02:37 -0700 Subject: [PATCH] Radix 3.0 tweaks (#3257) * radix themes progress: expose `max` prop It doesn't work yet, but PR filed for radix-ui/themes: https://github.com/radix-ui/themes/pull/492 * Move `progress` and `toast` to `_x` [REF-2779] Expose skeleton and data_list in top level namespace. --- reflex/__init__.py | 5 ++++- reflex/__init__.pyi | 3 ++- .../radix/themes/components/__init__.py | 3 ++- .../radix/themes/components/progress.py | 20 ++++++++++++++++++- .../radix/themes/components/progress.pyi | 16 +++++++-------- reflex/experimental/__init__.py | 5 +++++ 6 files changed, 40 insertions(+), 12 deletions(-) diff --git a/reflex/__init__.py b/reflex/__init__.py index f5c753789..b67208ec9 100644 --- a/reflex/__init__.py +++ b/reflex/__init__.py @@ -59,6 +59,7 @@ _ALL_COMPONENTS = [ "code", "container", "context_menu", + "data_list", "dialog", "divider", "drawer", @@ -79,6 +80,7 @@ _ALL_COMPONENTS = [ "scroll_area", "section", "select", + "skeleton", "slider", "spacer", "spinner", @@ -111,7 +113,8 @@ _ALL_COMPONENTS = [ "ordered_list", "moment", "logo", - "toast", + # Toast is in experimental namespace initially + # "toast", ] _MAPPING = { diff --git a/reflex/__init__.pyi b/reflex/__init__.pyi index 835666e1c..f919220a8 100644 --- a/reflex/__init__.pyi +++ b/reflex/__init__.pyi @@ -46,6 +46,7 @@ from reflex.components import checkbox as checkbox from reflex.components import code as code from reflex.components import container as container from reflex.components import context_menu as context_menu +from reflex.components import data_list as data_list from reflex.components import dialog as dialog from reflex.components import divider as divider from reflex.components import drawer as drawer @@ -66,6 +67,7 @@ from reflex.components import radio as radio from reflex.components import scroll_area as scroll_area from reflex.components import section as section from reflex.components import select as select +from reflex.components import skeleton as skeleton from reflex.components import slider as slider from reflex.components import spacer as spacer from reflex.components import spinner as spinner @@ -97,7 +99,6 @@ from reflex.components import unordered_list as unordered_list from reflex.components import ordered_list as ordered_list from reflex.components import moment as moment from reflex.components import logo as logo -from reflex.components import toast as toast from reflex.components.component import Component as Component from reflex.components.component import NoSSRComponent as NoSSRComponent from reflex.components.component import memo as memo diff --git a/reflex/components/radix/themes/components/__init__.py b/reflex/components/radix/themes/components/__init__.py index 0559e9842..7df1f7707 100644 --- a/reflex/components/radix/themes/components/__init__.py +++ b/reflex/components/radix/themes/components/__init__.py @@ -62,7 +62,8 @@ __all__ = [ "inset", "menu", "popover", - "progress", + # progress is in experimental namespace until https://github.com/radix-ui/themes/pull/492 + # "progress", "radio", "radio_cards", "radio_group", diff --git a/reflex/components/radix/themes/components/progress.py b/reflex/components/radix/themes/components/progress.py index 4121ed12b..bcd64edb8 100644 --- a/reflex/components/radix/themes/components/progress.py +++ b/reflex/components/radix/themes/components/progress.py @@ -2,6 +2,7 @@ from typing import Literal +from reflex.components.component import Component from reflex.vars import Var from ..base import LiteralAccentColor, RadixThemesComponent @@ -12,9 +13,12 @@ class Progress(RadixThemesComponent): tag = "Progress" - # The value of the progress bar: "0" to "100" + # The value of the progress bar: 0 to max (default 100) value: Var[int] + # The maximum progress value. + max: Var[int] + # The size of the progress bar: "1" | "2" | "3" size: Var[Literal["1", "2", "3"]] @@ -33,5 +37,19 @@ class Progress(RadixThemesComponent): # The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation. duration: Var[str] + @classmethod + def create(cls, *children, **props) -> Component: + """Create a Progress component. + + Args: + *children: The children of the component. + **props: The properties of the component. + + Returns: + The Progress Component. + """ + props.setdefault("width", "100%") + return super().create(*children, **props) + progress = Progress.create diff --git a/reflex/components/radix/themes/components/progress.pyi b/reflex/components/radix/themes/components/progress.pyi index 286c7918e..e72b83273 100644 --- a/reflex/components/radix/themes/components/progress.pyi +++ b/reflex/components/radix/themes/components/progress.pyi @@ -8,6 +8,7 @@ from reflex.vars import Var, BaseVar, ComputedVar from reflex.event import EventChain, EventHandler, EventSpec from reflex.style import Style from typing import Literal +from reflex.components.component import Component from reflex.vars import Var from ..base import LiteralAccentColor, RadixThemesComponent @@ -18,6 +19,7 @@ class Progress(RadixThemesComponent): cls, *children, value: Optional[Union[Var[int], int]] = None, + max: Optional[Union[Var[int], int]] = None, size: Optional[ Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]] ] = None, @@ -150,14 +152,12 @@ class Progress(RadixThemesComponent): ] = None, **props ) -> "Progress": - """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 a Progress component. Args: - *children: Child components. - value: The value of the progress bar: "0" to "100" + *children: The children of the component. + value: The value of the progress bar: 0 to max (default 100) + max: The maximum progress value. size: The size of the progress bar: "1" | "2" | "3" variant: The variant of the progress bar: "classic" | "surface" | "soft" color_scheme: The color theme of the progress bar @@ -170,10 +170,10 @@ class Progress(RadixThemesComponent): 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. + **props: The properties of the component. Returns: - A new component instance. + The Progress Component. """ ... diff --git a/reflex/experimental/__init__.py b/reflex/experimental/__init__.py index eb9b2eb95..991dffd50 100644 --- a/reflex/experimental/__init__.py +++ b/reflex/experimental/__init__.py @@ -2,6 +2,9 @@ from types import SimpleNamespace +from reflex.components.radix.themes.components.progress import progress as progress +from reflex.components.sonner.toast import toast as toast + from ..utils.console import warn from . import hooks as hooks from .layout import layout as layout @@ -14,5 +17,7 @@ warn( _x = SimpleNamespace( hooks=hooks, layout=layout, + progress=progress, run_in_thread=run_in_thread, + toast=toast, )