From a6fb25e1396ff4820bf244bba26aca6deec259a5 Mon Sep 17 00:00:00 2001 From: Elijah Ahianyo Date: Wed, 21 Feb 2024 22:38:27 +0000 Subject: [PATCH] Progress component to support `color_scheme` on component level (#2684) * Progress component to support `color_scheme` on component level * pyi fix --- .../components/radix/primitives/progress.py | 48 ++++++++++-- .../components/radix/primitives/progress.pyi | 73 ++++++++++++++++++- 2 files changed, 111 insertions(+), 10 deletions(-) diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py index 1b03a8d98..ac30cf435 100644 --- a/reflex/components/radix/primitives/progress.py +++ b/reflex/components/radix/primitives/progress.py @@ -2,11 +2,13 @@ from __future__ import annotations -from typing import Optional +from typing import Optional, Union from reflex.components.component import Component, ComponentNamespace +from reflex.components.core.colors import color from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName +from reflex.components.radix.themes.base import LiteralAccentColor from reflex.style import Style from reflex.vars import Var @@ -57,10 +59,26 @@ class ProgressIndicator(ProgressComponent): # The maximum progress value. max: Var[Optional[int]] + # The color scheme of the progress indicator. + color_scheme: Var[LiteralAccentColor] + def _apply_theme(self, theme: Component): + global_color_scheme = getattr(theme, "accent_color", None) + + if global_color_scheme is None and self.color_scheme is None: + raise ValueError( + "`color_scheme` cannot be None. Either set the `color_scheme` prop on the progress indicator " + "component or set the `accent_color` prop in your global theme." + ) + + color_scheme = color( + self.color_scheme if self.color_scheme is not None else global_color_scheme, # type: ignore + 9, + ) + self.style = Style( { - "background-color": "var(--accent-9)", + "background-color": color_scheme, "width": "100%", "height": "100%", f"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear", @@ -72,20 +90,28 @@ class ProgressIndicator(ProgressComponent): } ) + def _exclude_props(self) -> list[str]: + return ["color_scheme"] + class Progress(ComponentNamespace): - """High level API for progress bar.""" + """High-level API for progress bar.""" root = staticmethod(ProgressRoot.create) indicator = staticmethod(ProgressIndicator.create) @staticmethod - def __call__(width: Optional[str] = "100%", **props) -> Component: - """High level API for progress bar. + def __call__( + width: Optional[str] = "100%", + color_scheme: Optional[Union[Var, LiteralAccentColor]] = None, + **props, + ) -> Component: + """High-level API for progress bar. Args: - width: The width of the progerss bar - **props: The props of the progress bar + width: The width of the progress bar. + **props: The props of the progress bar. + color_scheme: The color scheme of the progress indicator. Returns: The progress bar. @@ -93,9 +119,15 @@ class Progress(ComponentNamespace): style = props.setdefault("style", {}) style.update({"width": width}) + progress_indicator_props = ( + {"color_scheme": color_scheme} if color_scheme is not None else {} + ) + return ProgressRoot.create( ProgressIndicator.create( - value=props.get("value"), max=props.get("max", 100) + value=props.get("value"), + max=props.get("max", 100), + **progress_indicator_props, # type: ignore ), **props, ) diff --git a/reflex/components/radix/primitives/progress.pyi b/reflex/components/radix/primitives/progress.pyi index 61b8d5edd..02c14ce17 100644 --- a/reflex/components/radix/primitives/progress.pyi +++ b/reflex/components/radix/primitives/progress.pyi @@ -7,10 +7,12 @@ from typing import Any, Dict, Literal, Optional, Union, overload from reflex.vars import Var, BaseVar, ComputedVar from reflex.event import EventChain, EventHandler, EventSpec from reflex.style import Style -from typing import Optional +from typing import Optional, Union from reflex.components.component import Component, ComponentNamespace +from reflex.components.core.colors import color from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName +from reflex.components.radix.themes.base import LiteralAccentColor from reflex.style import Style from reflex.vars import Var @@ -188,6 +190,68 @@ class ProgressIndicator(ProgressComponent): *children, value: Optional[Union[Var[Optional[int]], Optional[int]]] = None, max: Optional[Union[Var[Optional[int]], Optional[int]]] = None, + color_scheme: Optional[ + Union[ + Var[ + Literal[ + "tomato", + "red", + "ruby", + "crimson", + "pink", + "plum", + "purple", + "violet", + "iris", + "indigo", + "blue", + "cyan", + "teal", + "jade", + "green", + "grass", + "brown", + "orange", + "sky", + "mint", + "lime", + "yellow", + "amber", + "gold", + "bronze", + "gray", + ] + ], + Literal[ + "tomato", + "red", + "ruby", + "crimson", + "pink", + "plum", + "purple", + "violet", + "iris", + "indigo", + "blue", + "cyan", + "teal", + "jade", + "green", + "grass", + "brown", + "orange", + "sky", + "mint", + "lime", + "yellow", + "amber", + "gold", + "bronze", + "gray", + ], + ] + ] = None, as_child: Optional[Union[Var[bool], bool]] = None, style: Optional[Style] = None, key: Optional[Any] = None, @@ -248,6 +312,7 @@ class ProgressIndicator(ProgressComponent): *children: The children of the component. value: The current progress value. max: The maximum progress value. + color_scheme: The color scheme of the progress indicator. as_child: Change the default rendered element for the one passed as a child. style: The style of the component. key: A unique key for the component. @@ -270,6 +335,10 @@ class Progress(ComponentNamespace): indicator = staticmethod(ProgressIndicator.create) @staticmethod - def __call__(width: Optional[str] = "100%", **props) -> Component: ... + def __call__( + width: Optional[str] = "100%", + color_scheme: Optional[Union[Var, LiteralAccentColor]] = None, + **props + ) -> Component: ... progress = Progress()