fix(VLinearProgress): invalid class applied when using css color

vuetifyjs · Oct 8, 2018 · 1f56645 · 1f56645
1 parent 5b1f3b4
commit 1f56645
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/src/components/VProgressLinear/VProgressLinear.ts b/src/components/VProgressLinear/VProgressLinear.ts
@@ -126,11 +126,10 @@ export default mixins(Colorable).extend({
       staticClass: 'v-progress-linear__bar',
       style: this.styles
     }, [fade, slide])
-    const background = h('div', {
+    const background = h('div', this.setBackgroundColor(this.backgroundColor || this.color, {
       staticClass: 'v-progress-linear__background',
-      class: [this.backgroundColor || this.color],
       style: this.backgroundStyle
-    })
+    }))
 
     return h('div', {
       staticClass: 'v-progress-linear',

diff --git a/test/unit/components/VProgressLinear/VProgressLinear.spec.js b/test/unit/components/VProgressLinear/VProgressLinear.spec.js
@@ -34,6 +34,17 @@ test('VProgressLinear.js', ({ mount }) => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  it('should render component with css color and match snapshot', () => {
+    const wrapper = mount(VProgressLinear, {
+      propsData: {
+        value: 33,
+        color: '#336699'
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
   it('should render component with color and background opacity and match snapshot', () => {
     const wrapper = mount(VProgressLinear, {
       propsData: {

diff --git a/test/unit/components/VProgressLinear/__snapshots__/VProgressLinear.spec.js.snap b/test/unit/components/VProgressLinear/__snapshots__/VProgressLinear.spec.js.snap
@@ -158,6 +158,25 @@ exports[`VProgressLinear.js should render component with color and match snapsho
 
 `;
 
+exports[`VProgressLinear.js should render component with css color and match snapshot 1`] = `
+
+<div class="v-progress-linear"
+     style="height: 7px;"
+>
+  <div class="v-progress-linear__background"
+       style="height: 7px; opacity: 0.3; width: 100%; background-color: rgb(51, 102, 153); border-color: #336699;"
+  >
+  </div>
+  <div class="v-progress-linear__bar">
+    <div class="v-progress-linear__bar__determinate"
+         style="width: 33%; background-color: rgb(51, 102, 153); border-color: #336699;"
+    >
+    </div>
+  </div>
+</div>
+
+`;
+
 exports[`VProgressLinear.js should render inactive component and match snapshot 1`] = `
 
 <div class="v-progress-linear"