fix(VProgressLinear): make progress not overlapped by buffer

fixes #8114
vuetifyjs · Aug 6, 2019 · b36e27f · b36e27f
1 parent 3e206f5
commit b36e27f
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 18 deletions.
diff --git a/packages/vuetify/src/components/VCard/__tests__/__snapshots__/VCard.spec.ts.snap b/packages/vuetify/src/components/VCard/__tests__/__snapshots__/VCard.spec.ts.snap
@@ -44,7 +44,7 @@ exports[`VCard.vue should render loading card 1`] = `
          style="height: 4px;"
     >
       <div class="v-progress-linear__background primary"
-           style="opacity: 0.3; width: 100%;"
+           style="opacity: 0.3; left: 0%; width: 100%;"
       >
       </div>
       <div class="v-progress-linear__buffer">

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
@@ -121,7 +121,7 @@ exports[`VDataTable.ts should render loading state 1`] = `
                  style="height: 2px;"
             >
               <div class="v-progress-linear__background primary"
-                   style="opacity: 0.3; width: 100%;"
+                   style="opacity: 0.3; left: 0%; width: 100%;"
               >
               </div>
               <div class="v-progress-linear__buffer">

diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.ts b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.ts
@@ -128,7 +128,8 @@ export default baseMixins.extend({
 
       return {
         opacity: backgroundOpacity,
-        width: convertToUnit(this.normalizedBuffer, '%'),
+        left: convertToUnit(this.normalizedValue, '%'),
+        width: convertToUnit(this.normalizedBuffer - this.normalizedValue, '%'),
       }
     },
     classes (): object {

diff --git a/...etify/src/components/VProgressLinear/__tests__/__snapshots__/VProgressLinear.spec.ts.snap b/...etify/src/components/VProgressLinear/__tests__/__snapshots__/VProgressLinear.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`VProgressLinear.ts should render component and match snapshot 1`] = `
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; width: 100%;"
+       style="opacity: 0.3; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
@@ -30,7 +30,7 @@ exports[`VProgressLinear.ts should render component with buffer value and match
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; width: 80%;"
+       style="opacity: 0.3; left: 33%; width: 47%;"
   >
   </div>
   <div class="v-progress-linear__buffer"
@@ -53,7 +53,7 @@ exports[`VProgressLinear.ts should render component with buffer value and match
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; width: 0%;"
+       style="opacity: 0.3; left: 33%; width: -33%;"
   >
   </div>
   <div class="v-progress-linear__buffer"
@@ -76,7 +76,7 @@ exports[`VProgressLinear.ts should render component with buffer value and value
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; width: 80%;"
+       style="opacity: 0.3; left: 90%; width: -10%;"
   >
   </div>
   <div class="v-progress-linear__buffer"
@@ -99,7 +99,7 @@ exports[`VProgressLinear.ts should render component with color and background co
      style="height: 4px;"
 >
   <div class="v-progress-linear__background blue"
-       style="opacity: 1; width: 100%;"
+       style="opacity: 1; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
@@ -120,7 +120,7 @@ exports[`VProgressLinear.ts should render component with color and background co
      style="height: 4px;"
 >
   <div class="v-progress-linear__background blue"
-       style="opacity: 0.5; width: 100%;"
+       style="opacity: 0.5; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
@@ -141,7 +141,7 @@ exports[`VProgressLinear.ts should render component with color and background op
      style="height: 4px;"
 >
   <div class="v-progress-linear__background orange"
-       style="opacity: 0.5; width: 100%;"
+       style="opacity: 0.5; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
@@ -162,7 +162,7 @@ exports[`VProgressLinear.ts should render component with color and match snapsho
      style="height: 4px;"
 >
   <div class="v-progress-linear__background orange"
-       style="opacity: 0.3; width: 100%;"
+       style="opacity: 0.3; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
@@ -183,7 +183,7 @@ exports[`VProgressLinear.ts should render component with css color and match sna
      style="height: 4px;"
 >
   <div class="v-progress-linear__background"
-       style="opacity: 0.3; width: 100%; background-color: rgb(51, 102, 153); border-color: #336699;"
+       style="opacity: 0.3; left: 33%; width: 67%; background-color: rgb(51, 102, 153); border-color: #336699;"
   >
   </div>
   <div class="v-progress-linear__buffer">
@@ -204,7 +204,7 @@ exports[`VProgressLinear.ts should render default slot content 1`] = `
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; width: 80%;"
+       style="opacity: 0.3; left: 90%; width: -10%;"
   >
   </div>
   <div class="v-progress-linear__buffer"
@@ -232,7 +232,7 @@ exports[`VProgressLinear.ts should render inactive component and match snapshot
      style="height: 0px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; width: 100%;"
+       style="opacity: 0.3; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer"
@@ -254,7 +254,7 @@ exports[`VProgressLinear.ts should render indeterminate progress and match snaps
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; width: 100%;"
+       style="opacity: 0.3; left: 0%; width: 100%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
@@ -276,7 +276,7 @@ exports[`VProgressLinear.ts should render indeterminate progress with query prop
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; width: 100%;"
+       style="opacity: 0.3; left: 0%; width: 100%;"
   >
   </div>
   <div class="v-progress-linear__buffer">

diff --git a/packages/vuetify/src/components/VTextField/__tests__/__snapshots__/VTextField.spec.ts.snap b/packages/vuetify/src/components/VTextField/__tests__/__snapshots__/VTextField.spec.ts.snap
@@ -188,7 +188,7 @@ exports[`VTextField.ts should render component with async loading and custom pro
            style="height: 7px;"
       >
         <div class="v-progress-linear__background orange"
-             style="opacity: 0.3; width: 100%;"
+             style="opacity: 0.3; left: 0%; width: 100%;"
         >
         </div>
         <div class="v-progress-linear__buffer">
@@ -230,7 +230,7 @@ exports[`VTextField.ts should render component with async loading and match snap
            style="height: 2px;"
       >
         <div class="v-progress-linear__background primary"
-             style="opacity: 0.3; width: 100%;"
+             style="opacity: 0.3; left: 0%; width: 100%;"
         >
         </div>
         <div class="v-progress-linear__buffer">