Clay: ClayProgressBar takes dynamic space for the progress value

[dgarciasarai]

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Is there an example you can provide via codesandbox.com?

• ClayProgressBar demo: https://codesandbox.io/s/clayprogressbar-demo-z6x24

What are the steps to reproduce?

Use the default API to create a progress bar with the Clay component ClayProgressBar (out-of-the-box behavior).

What is the expected result?

The bar takes more or less space depending on the number/s or image in the right side (see attached screenshot). This means that if we have a progress that continuously change (because it's updating the progress value), the user experience is that the component has a glitch.

Environment

| Tech | Version |
| ----- | ------- |
| Clay | v3.x |
| React | 16.12.0 |

[matuzalemsteles]

Makes sense, @pat270 could you take a look at this?

[jbalsas]

@drakonux, @hold-shift could you provide guidance on UX expectations for the observed behaviour?

[drakonux]

Sure @jbalsas

• The bar must remain fixed with the same size, thus the set (bar + text/icon) too.
• The check-circle-icon and the text percentages have to be left-aligned.
• For percentages smaller than 10%, the little shifting while the percentage goes from 0 to 10 is something bearable as long as it doesn't push adyacent components (a possible solution to avoid the shift it's to have always the second digit).

[pat270]

Sorry I missed this one. I'll send a fix today.

[github-actions[bot]]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-130562