feat(VProgressLinear): add support for content inside progress bar (#…

…6126) resolves #3768
vuetifyjs · Jan 13, 2019 · 7d357e8 · 7d357e8
1 parent 70f0d16
commit 7d357e8
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.ts b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.ts
@@ -152,11 +152,16 @@ export default mixins(Colorable).extend({
       staticClass: 'v-progress-linear__bar',
       style: this.styles
     }, [fade, slide])
+
     const background = h('div', this.setBackgroundColor(this.backgroundColor || this.color, {
       staticClass: 'v-progress-linear__background',
       style: this.backgroundStyle
     }))
 
+    const content = this.$slots.default && h('div', {
+      staticClass: 'v-progress-linear__content'
+    }, this.$slots.default)
+
     return h('div', {
       staticClass: 'v-progress-linear',
       attrs: {
@@ -174,7 +179,8 @@ export default mixins(Colorable).extend({
       on: this.$listeners
     }, [
       background,
-      bar
+      bar,
+      content
     ])
   }
 })
diff --git a/packages/vuetify/src/stylus/components/_progress-linear.styl b/packages/vuetify/src/stylus/components/_progress-linear.styl
@@ -46,6 +46,13 @@
     bottom: 0
     transition: .3s ease-in
 
+  &__content
+    width: 100%
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 2
+
   &--query
     .v-progress-linear__bar__indeterminate
       &--active .long

diff --git a/packages/vuetify/test/unit/components/VProgressLinear/VProgressLinear.spec.js b/packages/vuetify/test/unit/components/VProgressLinear/VProgressLinear.spec.js
@@ -1,7 +1,7 @@
 import { test } from '@/test'
 import VProgressLinear from '@/components/VProgressLinear'
 
-test('VProgressLinear.js', ({ mount }) => {
+test('VProgressLinear.js', ({ mount, compileToFunctions }) => {
   it('should render component and match snapshot', () => {
     const wrapper = mount(VProgressLinear, {
       propsData: {
@@ -162,4 +162,18 @@ test('VProgressLinear.js', ({ mount }) => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  it('should render default slot content', () => {
+    const wrapper = mount(VProgressLinear, {
+      propsData: {
+        value: 90,
+        bufferValue: 80
+      },
+      slots: {
+        default: [compileToFunctions('<div class="foobar">content</div>')]
+      }
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.find('.foobar').length).toBe(1)
+  })
 })
diff --git a/...s/vuetify/test/unit/components/VProgressLinear/__snapshots__/VProgressLinear.spec.js.snap b/...s/vuetify/test/unit/components/VProgressLinear/__snapshots__/VProgressLinear.spec.js.snap
@@ -213,6 +213,36 @@ exports[`VProgressLinear.js should render component with css color and match sna
 
 `;
 
+exports[`VProgressLinear.js should render default slot content 1`] = `
+
+<div role="progressbar"
+     aria-valuemin="0"
+     aria-valuemax="80"
+     aria-valuenow="90"
+     class="v-progress-linear"
+     style="height: 7px;"
+>
+  <div class="v-progress-linear__background primary"
+       style="height: 7px; opacity: 0.3; width: 80%;"
+  >
+  </div>
+  <div class="v-progress-linear__bar"
+       style="width: 80%;"
+  >
+    <div class="v-progress-linear__bar__determinate primary"
+         style="width: 112.5%;"
+    >
+    </div>
+  </div>
+  <div class="v-progress-linear__content">
+    <div class="foobar">
+      content
+    </div>
+  </div>
+</div>
+
+`;
+
 exports[`VProgressLinear.js should render inactive component and match snapshot 1`] = `
 
 <div role="progressbar"