-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
3.9.0 undocument breaking change Progressbar DOM order changed #1783
Comments
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. IMHO the complete changes of #1752 should be reverted. |
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 |
@NeluQi If you think about statistics, 300% can be a very normal value. |
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. |
as in my issue post written the text position should be an option (prop) because there are valid use cases for all of them
|
No progress on this issue? |
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. |
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. |
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
The text was updated successfully, but these errors were encountered: