refactor(VBtn): clean-up component styling and internal functionality

process was overly complex with depressed, flat, outlined, etc. attempted
to clean-up the code flow.

packages/vuetify/src/components/VBottomNavigation/__tests__/__snapshots__/VBottomNavigation.spec.ts.snap

@@ -12,13 +12,13 @@ exports[`VBottomNavigation.ts should be visible with a true value 2`] = `
      style="height: 56px; transform: none;"
 >
   <button type="button"
-          class="v-btn v-btn--contained theme--light v-size--default"
+          class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
   >
     <span class="v-btn__content">
     </span>
   </button>
   <button type="button"
-          class="v-btn v-btn--contained theme--light v-size--default"
+          class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
   >
     <span class="v-btn__content">
     </span>
@@ -38,13 +38,13 @@ exports[`VBottomNavigation.ts should be visible with a true value 4`] = `
      style="height: 56px; transform: translateY(100%);"
 >
   <button type="button"
-          class="v-btn v-btn--contained theme--light v-size--default"
+          class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
   >
     <span class="v-btn__content">
     </span>
   </button>
   <button type="button"
-          class="v-btn v-btn--contained theme--light v-size--default"
+          class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
   >
     <span class="v-btn__content">
     </span>

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -16,16 +16,14 @@
   color: map-deep-get($material, 'text', 'primary')
 
   &.v-btn--disabled
+    background-color: map-deep-get($material, 'buttons', 'focused') !important
     color: map-deep-get($material, 'buttons', 'disabled') !important
 
     .v-icon,
     .v-btn__loading
       color: map-deep-get($material, 'buttons', 'disabled') !important
 
-    &:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
-      background-color: map-deep-get($material, 'buttons', 'focused') !important
-
-  &:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
+  &.v-btn--has-bg
     background-color: map-get($material, 'app-bar')
 
   &.v-btn--outlined.v-btn--text
@@ -34,7 +32,7 @@
   &.v-btn--icon
     color: map-deep-get($material, 'icons', 'active')
 
-  +states($material)
+  +states(map-deep-merge($material, $btn-states))
 
 // Block
 .v-btn
@@ -62,6 +60,7 @@
       font-size: $size
 
   &:before
+    background-color: currentColor
     border-radius: inherit
     bottom: 0
     color: inherit
@@ -74,9 +73,6 @@
     top: 0
     transition: $btn-transition
 
-  &:before
-    background-color: currentColor
-
   &:not(.v-btn--disabled)
     will-change: box-shadow
 
@@ -103,6 +99,7 @@
   // button content when clicked
   // https://stackoverflow.com/questions/10305658/prevent-button-from-shifting-during-click-in-ie
   position: relative
+  transition: inherit
 
   .v-icon--left,
   .v-icon--right
@@ -139,20 +136,8 @@
   width: 100%
 
 // Modifiers
-.v-btn:not(.v-btn--text):not(.v-btn--outlined)
-  &.v-btn--active:before
-    opacity: $btn-active-opacity
-
-  &:hover:before
-    opacity: $btn-hover-opacity
-
-  &:focus:before
-    opacity: $btn-focus-opacity
-
 .v-btn--absolute,
 .v-btn--fixed
-  position: absolute
-
   &.v-btn--right
     right: map-get($grid-gutters, 'lg')
 
@@ -165,13 +150,19 @@
   &.v-btn--bottom
     bottom: map-get($grid-gutters, 'lg')
 
+.v-btn--absolute
+  position: absolute
+
+.v-btn--fixed
+  position: fixed
+
 .v-btn--block
   display: flex
   flex: 1 0 auto
   min-width: 100% !important
   max-width: auto
 
-.v-btn--contained
+.v-btn--is-elevated
   +elevation(2)
 
   &:after
@@ -180,11 +171,16 @@
   &:active
     +elevation(8)
 
-.v-btn--depressed
-  box-shadow: none !important
+  &.v-btn--fab
+    +elevation(6)
+
+    &:after
+      +elevation(8)
+
+    &:active
+      +elevation(12)
 
 .v-btn--disabled
-  box-shadow: none
   pointer-events: none
 
 .v-btn--icon,
@@ -207,17 +203,8 @@
       width: #{$size}px
 
 .v-btn--fab
-  &.v-btn--contained
-    +elevation(6)
-
-    &:after
-      +elevation(8)
-
-    &:active
-      +elevation(12)
-
-  &.v-btn--fixed,
-  &.v-btn--absolute
+  &.v-btn--absolute,
+  &.v-btn--fixed
     z-index: 4
 
   @each $name, $size in $fab-sizes
@@ -232,9 +219,6 @@
         &.v-btn--top
           top: -#{$size / 2}px
 
-.v-btn--fixed
-  position: fixed
-
 .v-btn--loading
   pointer-events: none
   transition: none
@@ -245,33 +229,24 @@
 .v-btn--outlined
   border: $btn-outline-border-width solid currentColor
 
-.v-btn--outlined,
-.v-btn--round
+.v-btn:not(.v-btn--has-bg)
   .v-btn__content
     .v-icon
       color: currentColor
 
-.v-btn--outlined,
-.v-btn--flat,
-.v-btn--text
-  background-color: transparent
-
-.v-btn--outlined,
-.v-btn--round,
-.v-btn--rounded
-  &:before
-    border-radius: inherit
-
 .v-btn--plain
-  &:before
-    background-color: inherit
-    transition: none
+  &::before
+    display: none
+
+  &:not(.v-btn--active):not(:focus):not(:hover)
+    .v-btn__content
+      opacity: .62
 
 .v-btn--round
-  border-radius: 50%
+  +radius($btn-round-border-radius)
 
 .v-btn--rounded
-  border-radius: $btn-rounded-border-radius
+  +radius($btn-rounded-border-radius)
 
 .v-btn--tile
-  border-radius: 0
+  +radius($btn-tile-border-radius)

packages/vuetify/src/components/VBtn/VBtn.ts

@@ -82,12 +82,14 @@ export default baseMixins.extend<options>().extend({
         'v-btn--absolute': this.absolute,
         'v-btn--block': this.block,
         'v-btn--bottom': this.bottom,
-        'v-btn--contained': this.contained,
-        'v-btn--depressed': (this.depressed) || this.outlined,
+        'v-btn--contained': this.isElevated, // TODO: remove v3
+        'v-btn--depressed': (this.depressed) || this.outlined, // TODO: remove v3
         'v-btn--disabled': this.disabled,
+        'v-btn--is-elevated': this.isElevated,
         'v-btn--fab': this.fab,
         'v-btn--fixed': this.fixed,
-        'v-btn--flat': this.isFlat,
+        'v-btn--flat': !this.isElevated, // TODO: remove v3,
+        'v-btn--has-bg': this.hasBg,
         'v-btn--icon': this.icon,
         'v-btn--left': this.left,
         'v-btn--loading': this.loading,
@@ -106,26 +108,23 @@ export default baseMixins.extend<options>().extend({
         ...this.sizeableClasses,
       }
     },
-    contained (): boolean {
-      return Boolean(
-        !this.isFlat &&
-        !this.depressed &&
-        // Contained class only adds elevation
-        // is not needed if user provides value
-        !this.elevation
-      )
-    },
     computedRipple (): RippleOptions | boolean {
       const defaultRipple = this.icon || this.fab ? { circle: true } : true
       if (this.disabled) return false
       else return this.ripple ?? defaultRipple
     },
-    isFlat (): boolean {
+    hasBg (): boolean {
+      return this.isElevated || this.depressed
+    },
+    isElevated (): boolean {
       return Boolean(
-        this.icon ||
-        this.text ||
-        this.outlined
-      )
+        !this.icon &&
+        !this.text &&
+        !this.outlined &&
+        !this.depressed &&
+        !this.disabled &&
+        !this.plain
+      ) || Number(this.elevation) > 0
     },
     isRound (): boolean {
       return Boolean(
@@ -184,8 +183,10 @@ export default baseMixins.extend<options>().extend({
       this.genContent(),
       this.loading && this.genLoader(),
     ]
-    const setColor = !this.isFlat ? this.setBackgroundColor : this.setTextColor
     const { tag, data } = this.generateRouteLink()
+    const setColor = (this.isElevated || this.depressed)
+      ? this.setBackgroundColor
+      : this.setTextColor
 
     if (tag === 'button') {
       data.attrs!.type = this.type

packages/vuetify/src/components/VBtn/__tests__/__snapshots__/VBtn.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`VBtn.ts should not add color classes if disabled 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained theme--light v-size--default primary--text text--darken-2"
+        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default primary--text text--darken-2"
 >
   <span class="v-btn__content">
   </span>
@@ -11,7 +11,7 @@ exports[`VBtn.ts should not add color classes if disabled 1`] = `
 
 exports[`VBtn.ts should not add color classes if disabled 2`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--disabled theme--light v-size--default"
+        class="v-btn v-btn--disabled v-btn--flat theme--light v-size--default"
         disabled="disabled"
 >
   <span class="v-btn__content">
@@ -21,7 +21,7 @@ exports[`VBtn.ts should not add color classes if disabled 2`] = `
 
 exports[`VBtn.ts should render an <a> tag when using href prop 1`] = `
 <a href="http://www.google.com"
-   class="v-btn v-btn--contained theme--light v-size--default"
+   class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>
@@ -30,7 +30,7 @@ exports[`VBtn.ts should render an <a> tag when using href prop 1`] = `
 
 exports[`VBtn.ts should render component and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained theme--light v-size--default"
+        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>
@@ -39,7 +39,7 @@ exports[`VBtn.ts should render component and match snapshot 1`] = `
 
 exports[`VBtn.ts should render component with color prop and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained theme--light v-size--default green darken-1"
+        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default green darken-1"
 >
   <span class="v-btn__content">
   </span>
@@ -57,7 +57,7 @@ exports[`VBtn.ts should render component with color prop and match snapshot 2`]
 
 exports[`VBtn.ts should render component with loader and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--loading theme--light v-size--default"
+        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>
@@ -92,7 +92,7 @@ exports[`VBtn.ts should render component with loader and match snapshot 1`] = `
 
 exports[`VBtn.ts should render component with loader slot and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--loading theme--light v-size--default"
+        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg v-btn--loading theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>
@@ -105,15 +105,15 @@ exports[`VBtn.ts should render component with loader slot and match snapshot 1`]
 `;
 
 exports[`VBtn.ts should render specified tag when using tag prop 1`] = `
-<a class="v-btn v-btn--contained theme--light v-size--default">
+<a class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg theme--light v-size--default">
   <span class="v-btn__content">
   </span>
 </a>
 `;
 
 exports[`VBtn.ts should render tile button and match snapshot 1`] = `
 <button type="button"
-        class="v-btn v-btn--contained v-btn--tile theme--light v-size--default"
+        class="v-btn v-btn--contained v-btn--is-elevated v-btn--has-bg v-btn--tile theme--light v-size--default"
 >
   <span class="v-btn__content">
   </span>

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

@@ -10,12 +10,20 @@ $btn-icon-font-size: 18px !default;
 $btn-icon-padding: 12px !default;
 $btn-letter-spacing: .0892857143em !default;
 $btn-outline-border-width: thin !default;
+$btn-round-border-radius: 50% !default;
 $btn-rounded-border-radius: 28px !default;
 $btn-text-transform: uppercase !default;
+$btn-tile-border-radius: 0 !default;
 $btn-transition-duration: 0.28s !default;
 $btn-transition-fn: map-get($transition, 'fast-out-slow-in') !default;
 $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
-
+$btn-states: (
+  'states': (
+    'active': $btn-active-opacity,
+    'focus': $btn-focus-opacity,
+    'hover': $btn-hover-opacity
+  )
+);
 $btn-sizes: () !default;
 $btn-sizes: map-deep-merge(
   (