Bug in the ProgressBar component

Develop, Build & Integrate UI Extensions
1

Error description

The progress bar component provides faulty visualizations of progress.

The warning variant of a progress bar is red instead of orange. According to the documentation it should be orange. This behaviour can be seen in the “Warning progress bar” of the error reproduction.

The danger variant of a progress bar always shows a fully red bar regardless of value and maxValue. In the error reproduction below I expect the “Danger progress bar” to have a small orange part to the left and a bigger red part to the right.

Error reproduction

Code for reproducing the errors:

<ProgressBar value={5} maxValue={100} variant={"warning"} title="Warning progress bar" />
<ProgressBar value={5} maxValue={100} variant={"danger"} title="Danger progress bar" />

What gets displayed in hubspot when the code is ran:

image
image428×127 2.78 KB

Some context to reproduce the bug: I used @hubspot/ui-extensions version 0.17.1 and the visual Progressbar errors occur in local development and when the UI extension is deployed to a hubspot portal

Expected behaviour

I expected the progress bars from the error reproduction to look similar to those:

image
image830×188 21.6 KB

This image is taken from the documentation page for the ProgressBar component: ProgressBar - HubSpot docs

3

Hi @inventable-rears8, welcome to the HubSpot Community!

Thanks for flagging this with us and for sharing your code, screenshots and the troubleshooting you did!

Your implementation looks correct based on HubSpot’s ProgressBar documentation.

According to the docs, variant="warning" should display an orange/yellow bar, while variant="danger" should display a red bar, with the filled portion reflecting the value and maxValue settings.

Since you’re seeing different behavior in both local development and your deployed app and I see that you have a paid subscription, I’d recommend reaching out to our Support Team to investigate this.

When submitting your report, it would be helpful to include:

  • Expected vs. actual behavior: The color differences and incorrect progress fill, along with your screenshots.

  • Environment: @hubspot/ui-extensions v0.17.1 and your HubSpot Account ID.

  • Steps to reproduce: Your original <ProgressBar> code and confirmation that the issue occurs in both environments.

  • Link to this Community topic

Thanks again and feel free to share any updates here, as they could be helpful to others experiencing the same behavior. :blush:

Bérangère