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

[johnleider]

added support for elevation, rounded, and theme

Description

Changed the default value for timeout from 6000 to 5000 to match specification. Changed the value to disable the timeout from 0 to -1. The timeout property now accepts strings and is converted using Number.

Added new scoped slot that provides attributes for v-btn styling.

<template>
  <v-snackbar>
      This item already has the label "travel". You can add a new label. You can add a new label.

      <template v-slot:action="{ attrs }">
        <v-btn
          v-bind="attrs"
          text
        >
          Add a new label
        </v-btn>
      </template>
    </v-snackbar>
</template>

Added and deprecated multiple SASS variables.

• $snackbar-font-size
• $snackbar-btn-margin-left
• $snackbar-btn-margin-right
• $snackbar-content-first-btn-margin
• $snackbar-corner-offset
• $snackbar-wrapper-max-width
• $snackbar-wrapper-min-width

Added the following new props:

• centered - centers the snackbar on the x and y axis
• content-class
• dark
• elevation
• light
• outlined
• shaped
• rounded
• text
• transition

Also refactored all tests.

Motivation and Context

Improve v-snackbar heading into LTS.

fixes #10935
fixes #5865

How Has This Been Tested?

Markup:

// Paste your FULL Playground.vue here
<template>
  <div class="ma-12 pa-12">
    <v-btn @click="value = !value">Click me</v-btn>

    <v-snackbar
      :value="value"
      timeout="-1"
      shaped
      top
      multi-line
      left
    >
      This item already has the label "travel". You can add a new label. You can add a new label.

      <template v-slot:action="{ attrs }">
        <v-btn
          v-bind="attrs"
          text
        >
          Add a new label
        </v-btn>

        <v-btn
          class="ml-2"
          icon
        >
          <v-icon>$close</v-icon>
        </v-btn>
      </template>
    </v-snackbar>

    <v-snackbar
      :value="value"
      timeout="-1"
      color="error"
      vertical
      centered
      outlined
    >
      This item already has the label.

      <template v-slot:action="{ attrs }">
        <v-btn
          v-bind="attrs"
          text
        >
          Add a new label
        </v-btn>

        <v-btn
          class="ml-2"
          icon
        >
          <v-icon>$close</v-icon>
        </v-btn>
      </template>
    </v-snackbar>

    <v-snackbar
      :value="value"
      timeout="-1"
      color="primary"
      vertical
      text
    >
      This item already has the label "travel". You can add a new label.

      <template v-slot:action="{ attrs, on }">
        <v-btn
          v-bind="attrs"
          text
        >
          Add a new label
        </v-btn>

        <v-btn
          class="ml-2"
          icon
          v-on="on"
        >
          <v-icon>$close</v-icon>
        </v-btn>
      </template>
    </v-snackbar>

    <!-- <v-navigation-drawer
      :value="value"
      app
    ></v-navigation-drawer> -->
  </div>
</template>

<script>
  export default {
    data: () => ({
      value: true,
    }),

    mounted () {
      // setInterval(() => {
      //   this.value = !this.value
      // }, 3000)
    },
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[johnleider]

Requesting Initial comments from @vuetifyjs/contributors @vuetifyjs/core-team

[TravisBuddy]

Hey @johnleider,
Your changes look good to me!

View build log

TravisBuddy Request Identifier: 13c9d410-a5b1-11ea-84d7-9d6761bd5292

[johnleider]

Requesting Final comments from @vuetifyjs/contributors @vuetifyjs/core-team