Added fill color for progress (#3926)

* Added fill color for progress

* updated pyi file

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)
 
 

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.