feat(VStepper): extend VSheet functionality

resolves #4076

Author: johnleider

packages/api-generator/src/locale/en/v-stepper.json

@@ -1,6 +1,7 @@
 {
   "props": {
     "altLabels": "Places the labels beneath the step",
+    "flat": "Removes the stepper's elevation.",
     "nonLinear": "Allow user to jump to any step",
     "vertical": "Display steps vertically"
   },

packages/vuetify/src/components/VStepper/VStepper.sass

@@ -58,11 +58,12 @@
       +rtl()
         border-right: 1px solid rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
 
++sheet(v-stepper, $stepper-elevation, $stepper-border-radius, $stepper-shaped-border-radius)
+
 .v-stepper
   border-radius: $stepper-border-radius
   overflow: hidden
   position: relative
-  +elevation($stepper-elevation)
 
   &__header
     height: $stepper-header-height
@@ -170,6 +171,9 @@
     > .v-btn
       margin: $stepper-content-btn-margin
 
+  &--flat
+    +elevation(0, true)
+
   &--is-booted
     .v-stepper__content, .v-stepper__wrapper
       transition: .3s map-get($transition, 'swing')

packages/vuetify/src/components/VStepper/VStepper.ts

@@ -1,14 +1,16 @@
 // Styles
 import './VStepper.sass'
 
+// Extensions
+import VSheet from '../VSheet'
+
 // Components
 import VStepperStep from './VStepperStep'
 import VStepperContent from './VStepperContent'
 
 // Mixins
 import { provide as RegistrableProvide } from '../../mixins/registrable'
 import Proxyable from '../../mixins/proxyable'
-import Themeable from '../../mixins/themeable'
 
 // Utilities
 import mixins from '../../util/mixins'
@@ -18,9 +20,9 @@ import { breaking } from '../../util/console'
 import { VNode } from 'vue'
 
 const baseMixins = mixins(
+  VSheet,
   RegistrableProvide('stepper'),
   Proxyable,
-  Themeable
 )
 
 type VStepperStepInstance = InstanceType<typeof VStepperStep>
@@ -40,6 +42,7 @@ export default baseMixins.extend({
   props: {
     altLabels: Boolean,
     nonLinear: Boolean,
+    flat: Boolean,
     vertical: Boolean,
   },
 
@@ -61,11 +64,17 @@ export default baseMixins.extend({
   computed: {
     classes (): object {
       return {
+        'v-stepper--flat': this.flat,
         'v-stepper--is-booted': this.isBooted,
         'v-stepper--vertical': this.vertical,
         'v-stepper--alt-labels': this.altLabels,
         'v-stepper--non-linear': this.nonLinear,
-        ...this.themeClasses,
+        ...VSheet.options.computed.classes.call(this),
+      }
+    },
+    styles (): object {
+      return {
+        ...VSheet.options.computed.styles.call(this),
       }
     },
   },
@@ -122,9 +131,10 @@ export default baseMixins.extend({
   },
 
   render (h): VNode {
-    return h('div', {
+    return h(this.tag, {
       staticClass: 'v-stepper',
       class: this.classes,
+      style: this.styles,
     }, this.$slots.default)
   },
 })

packages/vuetify/src/components/VStepper/_variables.scss

@@ -13,6 +13,7 @@ $stepper-header-height: 72px !default;
 $stepper-label-line-height: 1 !default;
 $stepper-label-small-font-size: map-deep-get($headings, 'caption', 'size') !default;
 $stepper-label-small-font-weight: 300 !default;
+$stepper-shaped-border-radius: map-get($rounded, 'xl') $stepper-border-radius !default;
 $stepper-step-error-icon-font-size: map-deep-get($headings, 'h5', 'size')  !default;
 $stepper-step-padding: 24px !default;
 $stepper-step-step-font-size: map-deep-get($headings, 'caption', 'size') !default;