fix(VSnackbar): update to better match md2 spec

fixes #7772
vuetifyjs · Jul 20, 2019 · 9f12df7 · 9f12df7
1 parent b81ddf9
commit 9f12df7
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 31 deletions.
diff --git a/packages/docs/src/data/pages/components/Snackbars.json b/packages/docs/src/data/pages/components/Snackbars.json
@@ -40,7 +40,6 @@
         {
           "type": "examples",
           "value": [
-            "simple/auto-height",
             "simple/multi-line",
             "simple/timeout",
             "simple/vertical"

diff --git a/packages/docs/src/examples/snackbars/playground.vue b/packages/docs/src/examples/snackbars/playground.vue
@@ -46,13 +46,6 @@
             ></v-checkbox>
           </v-flex>
 
-          <v-flex xs12 sm3>
-            <v-checkbox
-              v-model="autoHeight"
-              label="Auto Height"
-            ></v-checkbox>
-          </v-flex>
-
           <v-flex xs12 sm3>
             <v-checkbox
               v-model="mode"
@@ -101,7 +94,6 @@
 
     <v-snackbar
       v-model="snackbar"
-      :auto-height="autoHeight"
       :bottom="y === 'bottom'"
       :color="color"
       :left="x === 'left'"
@@ -127,7 +119,6 @@
   export default {
     data () {
       return {
-        autoHeight: false,
         color: '',
         mode: '',
         snackbar: false,

diff --git a/packages/docs/src/examples/snackbars/simple/auto-height.vue b/packages/docs/src/examples/snackbars/simple/auto-height.vue
@@ -8,10 +8,7 @@
       Open Snackbar
     </v-btn>
 
-    <v-snackbar
-      v-model="snackbar"
-      :auto-height="autoHeight"
-    >
+    <v-snackbar v-model="snackbar">
       {{ text }}
       <v-btn
         color="cyan"
@@ -27,7 +24,6 @@
 <script>
   export default {
     data: () => ({
-      autoHeight: true,
       snackbar: false,
       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     }),

diff --git a/packages/docs/src/lang/en/components/Snackbars.json b/packages/docs/src/lang/en/components/Snackbars.json
@@ -5,10 +5,6 @@
     "usage": {
       "desc": "`v-snackbar`'s in their simplest form display a temporary and closable notification for the user."
     },
-    "auto-height": {
-      "header": "### Auto Height",
-      "desc": "The `auto-height` property gives `v-snackbar` the option for dynamic height based on it's content."
-    },
     "multi-line": {
       "header": "### Multi Line",
       "desc": "The `multi-line` property extends the height of the `v-snackbar` to give you a little more room for content."
@@ -27,9 +23,8 @@
     }
   },
   "props": {
-    "autoHeight": "Makes snackbar height dynamic",
-    "multiLine": "Makes the snackbar higher (mobile)",
+    "multiLine": "Gives the snack a larger minimum height.",
     "timeout": "Time (in milliseconds) to wait until snackbar is automatically hidden.  Use 0 to keep open indefinitely.",
-    "vertical": "Stacks snackbar content vertically (mobile)"
+    "vertical": "Stacks snackbar content on top of the actions (button)."
   }
 }
diff --git a/packages/docs/src/lang/eo-UY/components/Snackbars.json b/packages/docs/src/lang/eo-UY/components/Snackbars.json
@@ -11,9 +11,8 @@
     }
   },
   "props": {
-    "autoHeight": "crwdns26384:0crwdne26384:0",
     "multiLine": "crwdns26386:0crwdne26386:0",
     "timeout": "crwdns26388:0crwdne26388:0",
     "vertical": "crwdns26390:0crwdne26390:0"
   }
-}
+}
diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
@@ -10,6 +10,7 @@
   pointer-events: none
   position: fixed
   right: 8px
+  text-align: left
   z-index: 1000
 
   &--absolute
@@ -38,10 +39,10 @@
   &__content
     align-items: center
     display: flex
-    height: 48px
+    min-height: 48px
     justify-content: space-between
     overflow: hidden
-    padding: 0 16px
+    padding: 8px 16px
     width: 100%
 
     .v-btn.v-btn
@@ -84,9 +85,6 @@
         flex: 0 0 auto
         margin: 0
 
-  &--auto-height &__content
-    height: auto
-
 @media #{map-get($display-breakpoints, 'sm-and-up')}
   .v-snack
     &__wrapper

diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.ts b/packages/vuetify/src/components/VSnackbar/VSnackbar.ts
@@ -9,6 +9,7 @@ import { factory as PositionableFactory } from '../../mixins/positionable'
 // Types
 import mixins from '../../util/mixins'
 import { VNode } from 'vue'
+import { removed } from '../../util/console'
 
 export default mixins(
   Colorable,
@@ -19,7 +20,6 @@ export default mixins(
   name: 'v-snackbar',
 
   props: {
-    autoHeight: Boolean,
     multiLine: Boolean,
     // TODO: change this to closeDelay to match other API in delayable.js
     timeout: {
@@ -38,7 +38,6 @@ export default mixins(
       return {
         'v-snack--active': this.isActive,
         'v-snack--absolute': this.absolute,
-        'v-snack--auto-height': this.autoHeight,
         'v-snack--bottom': this.bottom || !this.top,
         'v-snack--left': this.left,
         'v-snack--multi-line': this.multiLine && !this.vertical,
@@ -55,6 +54,12 @@ export default mixins(
     },
   },
 
+  created () {
+    if (this.$attrs.hasOwnProperty('auto-height')) {
+      removed('auto-height', this)
+    }
+  },
+
   mounted () {
     this.setTimeout()
   },