⌛ Progress bar component

[JoeyDjr]

Here is a discussion about the progress bar component.

From my point of view, the component have only the following properties :

• the name of the data that in progress (for example the name of a file)
• the total number of the data (for example the total size of a file)
• the current number of the data (for example the current uploaded size of a file)

Do we build the component around the file uploads, or do we make it even more generic ? I don't have an example in mind of what it could be used for.

Please, share your ideas about that, do not hesitate to add some propositions! 🙏
@lolottetheclash @fredericvilcot @ccamel @ErikssonJoakim

[ccamel]

@JoeyDjr The component must be as generic and versatile as possible. Do not prejudge the use that will be made of this component (e.g. File uploads).

We consider here an horizontal progress bar, with a linear progress.

So in my sense, at least you should have the following properties:

• min value (optional, default: 0)
• max value (optional, default: 100)
• value (optional) - if not provided = unknown state

@fredericvilcot how do you want to handle the color? In the theme?

[JoeyDjr]

ok I agree with that
I suggest to add the optional property 'name' or 'label' to display a little text (see the picture below)

and maybe an optional property 'unit' or something like that (for example 'Mo') placed after the 'value' . I'm not sure about the last point

[lolottetheclash]

@ccamel You're right, it could also be used as a linear progress bar like when we are reading a page and that the linear progress bar is dynamically updated according to our reading progress.
We could also provide an optional icon prop in order to offer the user the possibility to display a "processing" icon and a "succeed" icon when the status bar advancement is complete ? It draws the user's attention to the status of the progress bar.
I think it could be also nice to have some optional text prop to display as @JoeyDjr said.

[ErikssonJoakim]

I agree the icon component could indicate failure as well as in process and success

[ccamel]

Okay, sounds good. Just make things optional and customizable: with or without icons, and be able to change the icons for progress completed states. Let's check with @fredericvilcot!

[JoeyDjr]

I suggest we can add a feature to this component : round the numbers.
maybe the component provide an optional prop round: boolean (set true by default) or round: number (set 2 by default to round 2 decimal) and round the number to display them.

[ccamel]

Concerning the formatting of numbers, I'd like to offer the possibility to pass a formatting function, which would take as input the current value (+ possibly the min/max limits), and which would return a string. This is much more flexible since the caller can decide to round, truncate, define the number of decimals, add a prefix/suffix, etc...

[lolottetheclash]

I don't know in which case it can require so much precision, I haven't seen this property on other libraries but maybe it can be useful?
I am not against it ;)

[ccamel]

Well, in fact the idea of a formatting function is to be able to display another representation than the classic "percentage", like for example the strings: 12 / 32, '25.67 MB of 55 MB` and so on... But, ok, maybe it's a little bit overkill.

[JoeyDjr]

Maybe we can add one or two optional formatting functions (one for the current value, another for the current progress). If they are not provided, the component is able to display default information

[JoeyDjr]

⏱ At the moment, here is what I have done taking into account your suggestions :

• a label prop ('okp4.png') on the screenshoot
• minValue, maxValue props used to calculate the scale and to fill the progress bar according to the currentValue prop
• icon that will be the OKP4 Icon component when ready (readonly icon?: any for he moment)
• formatCurrentValue function that allows to display the currentValue as the user want (0,99 Mo below the label on the screenshoot). By default it displays the currentValue number
• formatProgress function that allows to display the progress as the user want depending on minValue, maxValue and currentValue props (71,80% on the screenshoot). By default it displays the current progress in percentage according to the last 3 props.

📌 Note that all the props are optional.

💡 Please let me know if I misunderstand some point and do not hesitate to give suggestions and feedback.🙏

[JoeyDjr]

I'm implementing this behavior based on @ccamel suggestions about the flowing motion animation.
If a useful value (but optional) is not provided, such as minValue maxValue currentValue or if there is an inconsistency between these values (for example currentValue out of range minValue maxValue or minValue greather than maxValue, then the progressBar are displayed in a indeterminate state (with the flowing animation).

[ccamel]

In my sense, the minValue should have 0 as default value, maxValue should have 100 as default value, to have a default 0-100 progress bar.

[ccamel]

@JoeyDjr You make a good point. We need to decide how to handle inconsistencies. For example, if the currentValue is above the max bound, we constrain it to that value, and the same for the lower bound...

[JoeyDjr]

@ccamel I think set maValue to 100 is too subjective while 0 is more neutral.
Unless we consider that the user can provide currentValue only and expect to have a percentage scale.
Forcing currentValue be in the range by constraining it to be one of the bound sounds good to me.

[JoeyDjr]

Concerning inconsistencies, in my pont of view there are two options to manage min and max if min > max.

1. The component is a little bit smart and switch the values (min = max, and max = min)
2. It still dumb and display the progress bar in indeterminate mode

[fredericvilcot]

Thanks all, I lock this discussion as the component has been implemented.