feat(VSnackbar): add applicationable support (#11448)

fixes #4468

* fix(vsnackbar): make snackbar account for app-level padding

* refactor(vsnackbar): put behavior behind app prop

* refactor: remove unnecessary default

* refactor: clean up

Co-authored-by: Lee Marlow <lee@yuzu.systems>

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

@@ -23,6 +23,7 @@
     }
   },
   "props": {
+    "app": "Respects boundaries of—and will not overlap with—other `app` components like `v-app-bar`, `v-navigation-drawer`, and `v-footer`.",
     "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.",
     "vertical": "Stacks snackbar content on top of the actions (button)."

packages/vuetify/src/components/VSnackbar/VSnackbar.ts

@@ -20,6 +20,7 @@ export default mixins(
   name: 'v-snackbar',
 
   props: {
+    app: Boolean,
     multiLine: Boolean,
     // TODO: change this to closeDelay to match other API in delayable.js
     timeout: {
@@ -46,6 +47,26 @@ export default mixins(
         'v-snack--vertical': this.vertical,
       }
     },
+    styles (): object {
+      if (!this.app) return {}
+
+      const {
+        bar,
+        bottom,
+        footer,
+        insetFooter,
+        left,
+        right,
+        top,
+      } = this.$vuetify.application
+
+      return {
+        paddingBottom: `${bottom + footer + insetFooter}px`,
+        paddingLeft: `${left}px`,
+        paddingRight: `${right}px`,
+        paddingTop: `${bar + top}px`,
+      }
+    },
   },
 
   watch: {
@@ -84,6 +105,7 @@ export default mixins(
         staticClass: 'v-snack',
         class: this.classes,
         on: this.$listeners,
+        style: this.styles,
       }, [
         h('div', this.setBackgroundColor(this.color, {
           staticClass: 'v-snack__wrapper',

packages/vuetify/src/components/VSnackbar/__tests__/VSnackbar.spec.ts

@@ -14,7 +14,22 @@ describe('VSnackbar.ts', () => {
 
   beforeEach(() => {
     mountFunction = (options = {} as MountOptions<Instance>) => {
-      return mount(VSnackbar, options)
+      return mount(VSnackbar, {
+        mocks: {
+          $vuetify: {
+            application: {
+              bar: 24,
+              bottom: 56,
+              footer: 48,
+              insetFooter: 32,
+              left: 256,
+              right: 256,
+              top: 64,
+            },
+          },
+        },
+        ...options,
+      })
     }
   })
 
@@ -110,4 +125,23 @@ describe('VSnackbar.ts', () => {
     expect(wrapper.vm.isActive).toBe(false)
     expect(value).toHaveBeenCalledWith(false)
   })
+
+  it('should be the same without app prop', () => {
+    const wrapper = mountFunction({
+      propsData: { value: true },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should be the same with app prop', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        app: true,
+        value: true,
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

packages/vuetify/src/components/VSnackbar/__tests__/__snapshots__/VSnackbar.spec.ts.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VSnackbar.ts should be the same with app prop 1`] = `
+<div class="v-snack v-snack--active v-snack--bottom"
+     style="padding: 88px 256px 136px 256px;"
+     name="v-snack-transition"
+>
+  <div role="alert"
+       class="v-snack__wrapper"
+  >
+    <div class="v-snack__content">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VSnackbar.ts should be the same without app prop 1`] = `
+<div class="v-snack v-snack--active v-snack--bottom"
+     name="v-snack-transition"
+>
+  <div role="alert"
+       class="v-snack__wrapper"
+  >
+    <div class="v-snack__content">
+    </div>
+  </div>
+</div>
+`;