fix(VCard): remove computedElevation usage

derive elevation from css class, allow elevatable to simply overwrite fixes #6098
vuetifyjs · Jan 22, 2019 · cfcff04 · cfcff04
1 parent 458d6ba
commit cfcff04
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 17 deletions.
diff --git a/packages/vuetify/src/components/VCard/VCard.ts b/packages/vuetify/src/components/VCard/VCard.ts
@@ -21,10 +21,6 @@ export default mixins(
   name: 'v-card',
 
   props: {
-    elevation: {
-      type: [Number, String],
-      default: 2
-    },
     flat: Boolean,
     hover: Boolean,
     img: String,
@@ -35,16 +31,11 @@ export default mixins(
     classes (): object {
       return {
         'v-card': true,
+        'v-card--flat': this.flat,
         'v-card--hover': this.hover,
         ...VSheet.options.computed.classes.call(this)
       }
     },
-    computedElevation (): number | string {
-      if (this.flat) return 0
-      if (this.raised) return 3
-
-      return (VSheet.options.computed as any).computedElevation.call(this)
-    },
     styles (): object {
       const style = {
         ...VSheet.options.computed.styles.call(this)

diff --git a/packages/vuetify/src/stylus/components/_cards.styl b/packages/vuetify/src/stylus/components/_cards.styl
@@ -10,6 +10,7 @@ v-card($material)
 theme(v-card, "v-card")
 
 .v-card
+  elevation(2)
   text-decoration: none
 
   > *:first-child:not(.v-btn):not(.v-chip)
@@ -20,13 +21,16 @@ theme(v-card, "v-card")
     border-bottom-left-radius: inherit
     border-bottom-right-radius: inherit
 
+  &--flat
+    elevation(0)
+
   &--hover
     cursor: pointer
     transition: all .4s cubic-bezier(.25, .8, .25, 1)
     transition-property: box-shadow
 
     &:hover
-      elevation(8, true)
+      elevation(8)
 
   &__title
     align-items: center

diff --git a/packages/vuetify/test/unit/components/VCard/__snapshots__/VCard.spec.js.snap b/packages/vuetify/test/unit/components/VCard/__snapshots__/VCard.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`VCard.vue should render a card with custom height 1`] = `
 
-<div class="v-card v-sheet theme--light elevation-2"
+<div class="v-card v-sheet theme--light"
      style="height: 400px;"
 >
 </div>
@@ -11,28 +11,28 @@ exports[`VCard.vue should render a card with custom height 1`] = `
 
 exports[`VCard.vue should render a flat card 1`] = `
 
-<div class="v-card v-sheet theme--light">
+<div class="v-card v-card--flat v-sheet theme--light">
 </div>
 
 `;
 
 exports[`VCard.vue should render a raised card 1`] = `
 
-<div class="v-card v-sheet theme--light elevation-3">
+<div class="v-card v-sheet theme--light">
 </div>
 
 `;
 
 exports[`VCard.vue should render card with img 1`] = `
 
-<div class="v-card v-sheet theme--light elevation-2">
+<div class="v-card v-sheet theme--light">
 </div>
 
 `;
 
 exports[`VCard.vue should render component and match snapshot 1`] = `
 
-<div class="v-card v-sheet theme--light elevation-2">
+<div class="v-card v-sheet theme--light">
 </div>
 
 `;
diff --git a/packages/vuetify/test/unit/components/VMenu/__snapshots__/VMenu.spec.js.snap b/packages/vuetify/test/unit/components/VMenu/__snapshots__/VMenu.spec.js.snap
@@ -324,7 +324,7 @@ exports[`VMenu.js should work 1`] = `
   <div class="v-menu__content theme--light menuable__content__active "
        style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; z-index: 8; display: none; z-index: 8;"
   >
-    <div class="v-card v-sheet theme--light elevation-2">
+    <div class="v-card v-sheet theme--light">
     </div>
   </div>
 </div>