Add styles to Bar in Progress component

[Judge-Paul]

trafficstars

I noticed I couldn't change the bar color on the progress component without altering the actual component

<ProgressPrimitive.Indicator
  className="h-full w-full flex-1 bg-primary transition-all"
  style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>

like this

<ProgressPrimitive.Indicator
  className="h-full w-full flex-1 bg-[#6160DC] transition-all"
  style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>

So to add styles to my bar I created a property barClassName and passed it as a prop to the component

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, barClassName, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className,
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className={cn(
        "h-full w-full flex-1 bg-primary transition-all",
        barClassName,
      )}
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
));

I also created an issue to add this to the radix primitive but if it isn't accepted, I was hoping you could create a workaround that will allow us to pass a barClassName or similar property to the component

[Judge-Paul]

I changed it to look like this so I won't have to update the radix files

interface ExtraProps {
  barClassName?: string;
}

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & ExtraProps
>(({ className, value, barClassName, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className,
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className={cn(
        "h-full w-full flex-1 bg-primary transition-all",
        barClassName,
      )}
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
));

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[Judge-Paul]

@shadcn the issue wasn't reviewed (to the best of my knowledge)

[shadcn]

@Judge-Paul Agreed. Reopening this. (note: I know it says I closed but it was done via an action - sorry about that.

[Judge-Paul]

@Judge-Paul Agreed. Reopening this. (note: I know it says I closed but it was done via an action - sorry about that.

@shadcn figured it was closed automatically, hopefully, you or any of the collaborators take a look at it.

[cdeck95]

any update on this? ran into the same thing

[Judge-Paul]

I changed it to look like this so I won't have to update the radix files

interface ExtraProps {
  barClassName?: string;
}

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & ExtraProps
>(({ className, value, barClassName, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(
      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
      className,
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className={cn(
        "h-full w-full flex-1 bg-primary transition-all",
        barClassName,
      )}
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
));

@cdeck95 you can just use this component, I doubt it's getting added any time soon

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.