3.9.0 undocument breaking change Progressbar DOM order changed

[maidzen]

With 3.9.0 progressbar got updated

#1752

This change moved progress-label inside progress-value which changes the DOM
Custom CSS is now broken.

The Label position should be a propertie option

[Rakasch]

Position of the text changed, due to the different dom.
Before update to 3.9, text was centered in main bar.

After update, text is centered in value bar.
Text is not visible, when value is close to zero.
Text is misplaced, if value is bigger 100%.

[rweisse]

In #1752 it was said that the old colors were not perfect for every background. In my opinion these changes fb7b2b2 do not have a positive impact. In the old version, colors with transparencies were used. That was much better.
2. As @maidzen said the div of class .p-progressbar-label moved inside of the div of class p-progressbar-value (see: fb7b2b2#diff-e40752689771020ea1d5b3b63d5314a649830fe7adf3f91df20e031c909b729f). This results in a (partially) invisible progress label with small progresses because the label is listed inside of the progress bar now. And even when it is visibile it looks a little bit weird now.
4. As @maidzen said this is a breaking and undocumented change.

IMHO the complete changes of #1752 should be reverted.

[NeluQi]

If you use normal text percentages from 0 to 100, the problem does not occur (сhanged: I was wrong, there is a problem with small values).

I think we need to find some kind of compromise, or make a setting in the component (disable or enable centering). I still think if the text is centered, then it reads poorly

Or fix the problem with "a (partially) invisible progress label with small progresses"

For example, you can center the maximum progress (or when it is more than 50%), and with minimum progress, if there is not enough space for the text, display it with a tooltip.

Ideally, I think to make a setting in the component, which will center or not

[Rakasch]

@NeluQi If you think about statistics, 300% can be a very normal value.

[rweisse]

Hi @NeluQi,

this is how my ProgressBars looking right now :)

As you can see small values are a big issue. Placing the label inside the bar is much more complicated than just placing it in the center of the whole component because handling potentially inappropriate colors with some css is much easier than handling dynamic width of a component and reacting on its current progress and displaying tooltips.

Please don't get me wrong. I can understand the desire to provide other layout options here. And I would be very happy if there were more layout options. I think it's great! But that should not prevent the standard layout of progress bars that we have known for decades from being supported. And as long as this new layout cannot be displayed without errors, it should not be available. Especially not as a default layout and even not if this change is not documented.

[NeluQi]

You need to think about how best to do it. There is a problem with small values.

Now in my project it looks like this

I propose to think about the location of the text.
And it seems that a setting is needed about where to place the text about the progress

Maybe render the text behind the progress bar? Top or bottom, and make the progress bar smaller?

Below I will attach several options for the location of the progress text.

[maidzen]

as in my issue post written the text position should be an option (prop) because there are valid use cases for all of them
Something like that
<ProgressBar valuePosition="center" /> (Old style)

<ProgressBar valuePosition="inside" /> (new Style)

<ProgressBar valuePosition="outside" /> (Post above)

[riskysciolism]

As stated by @rweisse the changes indeed should be reverted.
Regarding @NeluQi suggestions, I think it is also important to note the need for rather narrow presentation in tables:

[JoseGoncalves]

No progress on this issue?
No known workaround?

[JoseGoncalves]

As this is a deal-breaker for me, I've patched the ProgressBar component to restore the original behaviour:

--- ProgressBar.vue.original	2023-07-13 17:21:42.606137490 +0100
+++ ProgressBar.vue	2023-07-13 17:20:52.314009171 +0100
@@ -1,9 +1,8 @@
 <template>
     <div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')">
-        <div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="ptm('value')">
-            <div v-if="value != null && value !== 0 && showValue" :class="cx('label')" v-bind="ptm('label')">
-                <slot>{{ value + '%' }}</slot>
-            </div>
+        <div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="ptm('value')" />
+        <div v-if="determinate && value != null && value !== 0 && showValue" class="value-center-bar">
+            <slot>{{ value + '%' }}</slot>
         </div>
         <div v-if="indeterminate" :class="cx('container')" v-bind="ptm('container')">
             <div :class="cx('value')" v-bind="ptm('value')"></div>
@@ -33,3 +32,13 @@
     }
 };
 </script>
+
+<style scoped>
+.value-center-bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: inherit;
+    height: 100%;
+}
+</style>

Maybe a better option, that would suit all needs, would be to add some prop that selects the desired position for the progress bar value.

[tugcekucukoglu]

Issue tracker is used for defects only as part of our commitment to quality and continuous improvement in all areas. Enhancements are collected as valuable community feedback and managed internally so moving this enhancement ticket to our internal project management backlog.