diff --git a/reflex/components/radix/themes/components/progress.py b/reflex/components/radix/themes/components/progress.py index a5f1fa1837..e9fe168c6d 100644 --- a/reflex/components/radix/themes/components/progress.py +++ b/reflex/components/radix/themes/components/progress.py @@ -4,6 +4,7 @@ from reflex.components.component import Component from reflex.components.core.breakpoints import Responsive +from reflex.style import Style from reflex.vars.base import Var from ..base import LiteralAccentColor, RadixThemesComponent @@ -38,6 +39,21 @@ 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] + # The color of the progress bar fill animation. + fill_color: Var[str] + + @staticmethod + def _color_selector(color: str) -> Style: + """Return a style object with the correct color and css selector. + + Args: + color: Color of the fill part. + + Returns: + Style: Style object with the correct css selector and color. + """ + return Style({".rt-ProgressIndicator": {"background_color": color}}) + @classmethod def create(cls, *children, **props) -> Component: """Create a Progress component. @@ -50,6 +66,12 @@ def create(cls, *children, **props) -> Component: The Progress Component. """ props.setdefault("width", "100%") + if "fill_color" in props: + color = props.get("fill_color", "") + style = props.get("style", {}) + style = style | cls._color_selector(color) + props["style"] = style + return super().create(*children, **props) diff --git a/reflex/components/radix/themes/components/progress.pyi b/reflex/components/radix/themes/components/progress.pyi index 8ef3049159..f2e89526ac 100644 --- a/reflex/components/radix/themes/components/progress.pyi +++ b/reflex/components/radix/themes/components/progress.pyi @@ -107,6 +107,7 @@ class Progress(RadixThemesComponent): ] ] = None, duration: Optional[Union[Var[str], str]] = None, + fill_color: Optional[Union[Var[str], str]] = None, style: Optional[Style] = None, key: Optional[Any] = None, id: Optional[Any] = None, @@ -162,6 +163,7 @@ class Progress(RadixThemesComponent): high_contrast: Whether to render the progress bar with higher contrast color against background radius: Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full" duration: The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation. + fill_color: The color of the progress bar fill animation. style: The style of the component. key: A unique key for the component. id: The id for the component.