feat(VBtn): add new styling property plain (#12814)

resolves #3026 

Co-authored-by: John Leider <john.j.leider@gmail.com>

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

@@ -8,6 +8,7 @@
     "left": "Aligns the component towards the left. This should be used with the **absolute** or **fixed** props.",
     "loading": "Adds a loading icon animation",
     "outlined": "Makes the background transparent and applies a thin border.",
+    "plain": "Removes the default background change applied when hovering over the button.",
     "right": "Aligns the component towards the right. This should be used with the **absolute** or **fixed** props.",
     "rounded": "Applies a large border radius on the button.",
     "text": "Makes the background transparent.",

packages/docs/src/examples/v-btn/prop-plain.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="text-center">
+    <v-sheet
+      class="px-7 pt-7 pb-4 mx-auto text-center d-inline-block"
+      color="blue-grey darken-3"
+      dark
+    >
+      <div class="grey--text text--lighten-1 text-body-2 mb-4">
+        Are you sure you want to delete this album?
+      </div>
+
+      <v-btn
+        :disabled="loading"
+        class="ma-1"
+        color="grey"
+        plain
+      >
+        Cancel
+      </v-btn>
+
+      <v-btn
+        :loading="loading"
+        class="ma-1"
+        color="error"
+        plain
+        @click="remove"
+      >
+        Delete
+      </v-btn>
+    </v-sheet>
+  </div>
+</template>
+
+<script>
+  export default {
+    data: () => ({ loading: false }),
+
+    methods: {
+      async remove () {
+        this.loading = true
+
+        await new Promise(resolve => setTimeout(resolve, 3000))
+
+        this.loading = false
+      },
+    },
+  }
+</script>

packages/docs/src/examples/v-btn/usage.vue

@@ -35,6 +35,7 @@
         loading: false,
         medium: false,
         outlined: false,
+        plain: false,
         raised: false,
         rounded: false,
         small: false,
@@ -69,6 +70,7 @@
         'depressed',
         'icon',
         'outlined',
+        'plain',
         'raised',
         'rounded',
         'fab',

packages/docs/src/pages/en/components/buttons.md

@@ -76,6 +76,12 @@ Outlined buttons inherit their borders from the current color applied.
 
 <example file="v-btn/prop-outlined" />
 
+#### Plain
+
+Plain buttons have a lower baseline opacity that reacts to **hover** and **focus**.
+
+<example file="v-btn/prop-plain" />
+
 #### Rounded
 
 Rounded buttons behave the same as regular buttons but have rounded edges.

packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.sass

@@ -8,7 +8,6 @@
   .v-btn:not(.v-btn--active)
     color: map-deep-get($material, 'text', 'secondary') !important
 
-
 // Block
 .v-item-group.v-bottom-navigation
   bottom: 0
@@ -18,10 +17,8 @@
   width: 100%
   +elevation(4)
 
-  .v-btn:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
-    background-color: transparent
-
   .v-btn
+    background-color: transparent
     border-radius: 0
     box-shadow: none
     flex: 0 1 auto

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

@@ -22,10 +22,10 @@
     .v-btn__loading
       color: map-deep-get($material, 'buttons', 'disabled') !important
 
-    &:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined)
+    &.v-btn--has-bg
       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 +34,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 +62,7 @@
       font-size: $size
 
   &:before
+    background-color: currentColor
     border-radius: inherit
     bottom: 0
     color: inherit
@@ -74,9 +75,6 @@
     top: 0
     transition: $btn-transition
 
-  &:before
-    background-color: currentColor
-
   &:not(.v-btn--disabled)
     will-change: box-shadow
 
@@ -103,6 +101,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 +138,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 +152,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 +173,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 +205,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 +221,6 @@
         &.v-btn--top
           top: -#{$size / 2}px
 
-.v-btn--fixed
-  position: fixed
-
 .v-btn--loading
   pointer-events: none
   transition: none
@@ -245,28 +231,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--plain
+  &::before
+    display: none
 
-.v-btn--outlined,
-.v-btn--round,
-.v-btn--rounded
-  &:before
-    border-radius: inherit
+  &:not(.v-btn--active):not(.v-btn--loading):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

@@ -54,6 +54,7 @@ export default baseMixins.extend<options>().extend({
     icon: Boolean,
     loading: Boolean,
     outlined: Boolean,
+    plain: Boolean,
     retainFocusOnClick: Boolean,
     rounded: Boolean,
     tag: {
@@ -81,16 +82,19 @@ 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,
         'v-btn--outlined': this.outlined,
+        'v-btn--plain': this.plain,
         'v-btn--right': this.right,
         'v-btn--round': this.isRound,
         'v-btn--rounded': this.rounded,
@@ -104,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(
@@ -182,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