Refactored progressbar to align with Vue-NG

primefaces · Oct 7, 2022 · 7b36280 · 7b36280
1 parent cfa58db
commit 7b36280
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/components/lib/progressbar/ProgressBar.css b/components/lib/progressbar/ProgressBar.css
@@ -15,16 +15,12 @@
     overflow: hidden;
 }
 
-.p-progressbar-determinate .p-progressbar-value-animate {
-    transition: width 1s ease-in-out;
+.p-progressbar-determinate .p-progressbar-label {
+    display: inline-flex;
 }
 
-.p-progressbar-determinate .p-progressbar-label {
-    text-align: center;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    font-weight: bold;
+.p-progressbar-determinate .p-progressbar-value-animate {
+    transition: width 1s ease-in-out;
 }
 
 .p-progressbar-indeterminate .p-progressbar-value::before {

diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
@@ -9,7 +9,7 @@ export const ProgressBar = React.memo(
             if (props.showValue && props.value != null) {
                 const label = props.displayValueTemplate ? props.displayValueTemplate(props.value) : props.value + props.unit;
 
-                return <div className="p-progressbar-label">{label}</div>;
+                return label;
             }
 
             return null;
@@ -22,10 +22,9 @@ export const ProgressBar = React.memo(
 
             return (
                 <div role="progressbar" id={props.id} ref={elementRef} className={className} style={props.style} aria-valuemin="0" aria-valuenow={props.value} aria-valuemax="100" {...otherProps}>
-                    <div className="p-progressbar-value p-progressbar-value-animate" style={{ width: props.value + '%', display: 'block', backgroundColor: props.color }}>
-                        {props.showValue && (
-                            <div className={`p-progressbar-label`} style={{ display: props.value != null && props.value !== 0 ? 'flex' : 'none' }}>
-                                {' '}
+                    <div className="p-progressbar-value p-progressbar-value-animate" style={{ width: props.value + '%', display: 'flex', backgroundColor: props.color }}>
+                        {props.value != null && props.value !== 0 && props.showValue && (
+                            <div className={`p-progressbar-label`} >
                                 {label}
                             </div>
                         )}