Progress component to support color_scheme on component level (#2684)

* Progress component to support `color_scheme` on component level * pyi fix
reflex-dev · Feb 21, 2024 · a6fb25e · a6fb25e
1 parent a3be76f
commit a6fb25e
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 10 deletions.
diff --git 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,30 +90,44 @@ def _apply_theme(self, theme: Component):
             }
         )
 
+    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.
         """
         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
@@ -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()