feat(snackbar): add dismiss button and make dismiss button and action…

… button optional (#214)
matsp · Apr 4, 2019 · a90038e · a90038e
1 parent 8447712
commit a90038e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/components/snackbar/Snackbar.vue b/components/snackbar/Snackbar.vue
@@ -15,11 +15,22 @@
       >
         <slot />
       </div>
-      <div class="mdc-snackbar__actions">
+      <div
+        v-if="hasDismiss || actionButtonText !== ''"
+        class="mdc-snackbar__actions"
+      >
         <button
+          v-if="actionButtonText !== ''"
           class="mdc-button mdc-snackbar__action"
           type="button"
         />
+        <button
+          v-if="hasDismiss"
+          class="mdc-icon-button mdc-snackbar__dismiss material-icons"
+          title="Dismiss"
+        >
+          close
+        </button>
       </div>
     </div>
   </div>
@@ -64,6 +75,10 @@ export default {
     stacked: {
       type: Boolean,
       default: false
+    },
+    hasDismiss: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

diff --git a/components/snackbar/styles.scss b/components/snackbar/styles.scss
@@ -1,2 +1,4 @@
 @import "@material/snackbar/mdc-snackbar";
 @import "@material/button/mdc-button";
+@import "@material/icon-button/mdc-icon-button";
+
diff --git a/docs/.vuepress/components/SnackbarDemo.vue b/docs/.vuepress/components/SnackbarDemo.vue
@@ -3,7 +3,7 @@
         <ComponentSection>
             <m-button :disabled="disabled" @click="onClick" raised>Open Snackbar</m-button>
             <m-snackbar :leading="radioProps[1].value" :stacked="radioProps[2].value" @closed="disabled = false"
-                        action-button-text="Retry"
+                        action-button-text="Retry" has-dismiss
                         label-text="Can't send photo. Retry in 5 seconds." style="z-index: 30" v-model="value"/>
         </ComponentSection>
         <ComponentProps