feat(VSnackbar): add new properties and improve md2 spec

packages/api-generator/src/maps/v-snackbar.js

@@ -6,5 +6,9 @@ module.exports = {
         value: 'boolean',
       },
     ],
+    slots: [{
+      name: 'action',
+      props: { attrs: 'object' },
+    }],
   },
 }

packages/docs/src/components/core/Snackbar.vue

@@ -1,56 +1,44 @@
 <template>
-  <v-theme-provider dark>
-    <v-snackbar
-      v-model="snack"
-      :color="snackbar.color"
-      :style="styles"
-      :timeout="0"
-      top
-    >
-      <v-row
-        align="center"
-        class="mx-0 flex-wrap flex-md-nowrap"
-      >
-        <div class="d-flex align-center">
-          <span
-            v-if="snackbar.emoji"
-            class="mr-2"
-            v-text="snackbar.emoji"
-          />
-
-          <base-markdown
-            :code="snackbar.text"
-            class="snack-markdown"
-          />
-        </div>
+  <v-snackbar
+    v-model="snack"
+    :color="snackbar.color"
+    :timeout="-1"
+    vertical
+  >
+    <div class="d-flex">
+      <span
+        v-if="snackbar.emoji"
+        class="mr-2"
+        v-text="snackbar.emoji"
+      />
 
-        <v-btn
-          :ripple="false"
-          class="black--text mt-3 mt-sm-0 ml-auto ml-sm-4"
-          color="white"
-          depressed
-          v-bind="bind"
-          @click="snack = false"
-        >
-          {{ snackbar.action_text }}
+      <base-markdown
+        :code="snackbar.text"
+        class="snack-markdown"
+      />
+    </div>
 
-          <v-icon right>mdi-open-in-new</v-icon>
-        </v-btn>
+    <template v-slot:action="{ attrs }">
+      <v-btn
+        class="mr-2"
+        color="pink lighten-3"
+        text
+        v-bind="{ ...bind, ...attrs }"
+        @click="snack = false"
+      >
+        {{ snackbar.action_text }}
+      </v-btn>
 
-        <v-btn
-          :aria-label="$t('Vuetify.Snackbar.close')"
-          :ripple="false"
-          class="ml-8 mt-3 mt-sm-0"
-          color="white"
-          icon
-          x-small
-          @click="snack = false"
-        >
-          <v-icon>$vuetify.cancel</v-icon>
-        </v-btn>
-      </v-row>
-    </v-snackbar>
-  </v-theme-provider>
+      <v-btn
+        :aria-label="$t('Vuetify.Snackbar.close')"
+        color="white"
+        icon
+        @click="snack = false"
+      >
+        <v-icon small>$vuetify.close</v-icon>
+      </v-btn>
+    </template>
+  </v-snackbar>
 </template>
 
 <script>
@@ -74,11 +62,6 @@
           target: '_blank',
         }
       },
-      styles () {
-        const { top, bar } = this.$vuetify.application
-
-        return { top: `${top + bar + 16}px` }
-      },
     },
 
     watch: {

packages/docs/src/data/pages/components/Snackbars.pug

@@ -6,7 +6,11 @@ playground(value="playground")
 examples(:value=`[
   'simple/multi-line',
   'simple/timeout',
-  'simple/vertical'
+  'simple/vertical',
+  {
+    file: 'simple/variants',
+    newIn: 'v2.3'
+  }
 ]`)
 
 up-next(:value=`[

packages/docs/src/examples/data-tables/complex/edit-dialog.vue

@@ -53,7 +53,10 @@
 
     <v-snackbar v-model="snack" :timeout="3000" :color="snackColor">
       {{ snackText }}
-      <v-btn text @click="snack = false">Close</v-btn>
+
+      <template v-slot:action="{ attrs }">
+        <v-btn v-bind="attrs" text @click="snack = false">Close</v-btn>
+      </template>
     </v-snackbar>
   </div>
 </template>

packages/docs/src/examples/snackbars/playground.vue

@@ -104,13 +104,17 @@
       :vertical="mode === 'vertical'"
     >
       {{ text }}
-      <v-btn
-        dark
-        text
-        @click="snackbar = false"
-      >
-        Close
-      </v-btn>
+
+      <template v-slot:action="{ attrs }">
+        <v-btn
+          dark
+          text
+          v-bind="attrs"
+          @click="snackbar = false"
+        >
+          Close
+        </v-btn>
+      </template>
     </v-snackbar>
   </v-card>
 </template>

packages/docs/src/examples/snackbars/simple/auto-height.vue

@@ -10,13 +10,17 @@
 
     <v-snackbar v-model="snackbar">
       {{ text }}
-      <v-btn
-        color="cyan"
-        text
-        @click="snackbar = false"
-      >
-        Close
-      </v-btn>
+
+      <template v-slot:action="{ attrs }">
+        <v-btn
+          color="cyan"
+          text
+          v-bind="attrs"
+          @click="snackbar = false"
+        >
+          Close
+        </v-btn>
+      </template>
     </v-snackbar>
   </div>
 </template>

packages/docs/src/examples/snackbars/simple/multi-line.vue

@@ -13,13 +13,17 @@
       :multi-line="multiLine"
     >
       {{ text }}
-      <v-btn
-        color="red"
-        text
-        @click="snackbar = false"
-      >
-        Close
-      </v-btn>
+
+      <template v-slot:action="{ attrs }">
+        <v-btn
+          color="red"
+          text
+          v-bind="attrs"
+          @click="snackbar = false"
+        >
+          Close
+        </v-btn>
+      </template>
     </v-snackbar>
   </div>
 </template>

packages/docs/src/examples/snackbars/simple/timeout.vue

@@ -13,13 +13,17 @@
       :timeout="timeout"
     >
       {{ text }}
-      <v-btn
-        color="blue"
-        text
-        @click="snackbar = false"
-      >
-        Close
-      </v-btn>
+
+      <template v-slot:action="{ attrs }">
+        <v-btn
+          color="blue"
+          text
+          v-bind="attrs"
+          @click="snackbar = false"
+        >
+          Close
+        </v-btn>
+      </template>
     </v-snackbar>
   </div>
 </template>

packages/docs/src/examples/snackbars/simple/variants.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-card
+    height="300"
+    flat
+  >
+    <v-snackbar
+      :timeout="-1"
+      :value="true"
+      absolute
+      left
+      shaped
+      top
+    >
+      Lorem ipsum dolor sit amet consectetur.
+    </v-snackbar>
+
+    <v-snackbar
+      :timeout="-1"
+      :value="true"
+      color="blue-grey"
+      absolute
+      right
+      rounded="pill"
+      top
+    >
+      Lorem ipsum dolor sit amet consectetur.
+    </v-snackbar>
+
+    <v-snackbar
+      :timeout="-1"
+      :value="true"
+      absolute
+      centered
+      color="deep-purple accent-4"
+      elevation="24"
+    >
+      Lorem ipsum dolor sit amet consectetur.
+    </v-snackbar>
+
+    <v-snackbar
+      :timeout="-1"
+      :value="true"
+      absolute
+      bottom
+      color="primary"
+      left
+      text
+    >
+      Lorem ipsum dolor sit amet consectetur.
+    </v-snackbar>
+
+    <v-snackbar
+      :timeout="-1"
+      :value="true"
+      absolute
+      bottom
+      color="success"
+      outlined
+      right
+    >
+      Lorem ipsum dolor sit amet consectetur.
+    </v-snackbar>
+  </v-card>
+</template>

packages/docs/src/examples/snackbars/simple/vertical.vue

@@ -13,13 +13,17 @@
       :vertical="vertical"
     >
       {{ text }}
-      <v-btn
-        color="indigo"
-        text
-        @click="snackbar = false"
-      >
-        Close
-      </v-btn>
+
+      <template v-slot:action="{ attrs }">
+        <v-btn
+          color="indigo"
+          text
+          v-bind="attrs"
+          @click="snackbar = false"
+        >
+          Close
+        </v-btn>
+      </template>
     </v-snackbar>
   </div>
 </template>

packages/docs/src/examples/snackbars/usage.vue

@@ -5,13 +5,17 @@
       v-model="snackbar"
     >
       {{ text }}
-      <v-btn
-        color="pink"
-        text
-        @click="snackbar = false"
-      >
-        Close
-      </v-btn>
+
+      <template v-slot:action="{ attrs }">
+        <v-btn
+          color="pink"
+          text
+          v-bind="attrs"
+          @click="snackbar = false"
+        >
+          Close
+        </v-btn>
+      </template>
     </v-snackbar>
   </div>
 </template>

packages/docs/src/lang/en/components/Snackbars.json

@@ -20,12 +20,23 @@
     "contextual": {
       "heading": "### Contextual",
       "desc": "You can also apply a color to the snackbar to better fit your implementation."
+    },
+    "variants": {
+      "heading": "### Variants",
+      "desc": "Apply different styles to the snackbar using props such as `text`, `shaped`, `outlined`, and more."
     }
   },
   "props": {
     "app": "Respects boundaries of—and will not overlap with—other `app` components like `v-app-bar`, `v-navigation-drawer`, and `v-footer`.",
+    "centered": "Positions the snackbar in the center of the screen, (x and y axis).",
+    "contentClass": "Apply a custom class to the snackbar content",
     "multiLine": "Gives the snackbar a larger minimum height.",
-    "timeout": "Time (in milliseconds) to wait until snackbar is automatically hidden.  Use 0 to keep open indefinitely.",
+    "text": "Components.VAlert.props.text",
+    "transition": "Mixins.Transitionable.props.transition",
+    "timeout": "Time (in milliseconds) to wait until snackbar is automatically hidden.  Use -1 to keep open indefinitely. It is recommended for this number to be between `4000` and `10000`. Changes to this property will reset the timeout.",
     "vertical": "Stacks snackbar content on top of the actions (button)."
+  },
+  "slots": {
+    "action": "Used to bind styles to [v-btn](/components/buttons) to match MD2 specification."
   }
 }