Setting 100% as max limit on ProgressBar progress

[lulen11]

Hey @kbardi,

In the spirit of trying to learn more and dive into uncomfortable React territory, I've been trying to set a maxProgress variable on the ProgressBar this morning. I think I need to stop trying...

I was looking at the utils/validation files as an example of where we've set maxCharacters on an Input. Similarly, I am trying to set a maxProgress const of 100 because once the progress of anything reaches 100, we don't want it to go beyond that. Eg. Right now, in the portal, the users are seeing 113% once they've submitted everything. Originally, I was editing portal files because I thought the progress percentage would be specific to whatever thing we're tracking (in this case completed steps of the application) but then I decided it was a blueprint thing because the progress of something should never go beyond 100.

Some various attempts I tried (not all at once) but didn't push up because I was just getting error after error:

const ProgressBar = ({
  theme,
  progress,
  displayNumber,
  backgroundColor,
  barColor,
  color,
  height,
  fontSize,
  maxProgress,
})

const maxProgress = {
   maxLength: `100`,
 };

 {displayNumber && `${progress.maxProgress}%`}

Would love to talk to you about this one as I'd appreciate the learning opportunity :)

In the meantime, I've set a very simple CSS rule on the progress styles so that visually if the progress goes beyond 100, you can still see the percentage number within the bar.

[lulen11]

PS. @davidpaley will need the simple CSS fix for the mentor recruitment deploy tomorrow so if setting the maxProgress variable is more complicated / time consuming, let's merge this with master and do a blueprint release before continuing with the above.

[rin]

@lulen11 I fixed it!

https://www.loom.com/share/ee0f38cfcf2341cbae94182c157e6c69

[rin]

@kbardi Can haz review?

[lulen11]

Thank you so much for explaining Rin!!! The math.min query makes so much sense and now i've learnt something for the future 👏 👏 I'm stoked. Thank you. @kbardi let us know if this is ok so we can merge and release for MR deployment with @davidpaley :)

[lulen11]

hey @kbardi since your approval, I merged this. Is there anything else we need to do to get the changes reflected in our projects? I want to make sure the progress bar works properly in MR now