add cancel button option to snackbar (buefy#3066)

REInVent650 · Nov 29, 2020 · f38adc2 · f38adc2
1 parent 2418bb7
commit f38adc2
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 0 deletions.
diff --git a/docs/pages/components/snackbar/api/snackbar.js b/docs/pages/components/snackbar/api/snackbar.js
@@ -66,6 +66,13 @@ export default [
                 type: 'Function',
                 values: '—',
                 default: '—'
+            },
+            {
+                name: '<code>cancelText</code>',
+                description: `Snackbar's cancel button text. Default is no cancel button`,
+                type: 'String',
+                values: '—',
+                default: '—'
             }
         ],
         methods: [

diff --git a/docs/pages/components/snackbar/examples/ExSimple.vue b/docs/pages/components/snackbar/examples/ExSimple.vue
@@ -15,6 +15,10 @@
                 type="is-danger"
                 size="is-medium"
                 @click="danger" />
+            <b-button
+                label="Launch snackbar (with cancel)"
+                size="is-medium"
+                @click="hasCancel" />
         </div>
     </section>
 </template>
@@ -55,6 +59,13 @@
                         })
                     }
                 })
+            },
+            hasCancel() {
+                this.$buefy.snackbar.open({
+                    indefinite: true,
+                    message: 'Snackbar with a cancel button.',
+                    cancelText: 'Cancel',
+                })
             }
         }
     }

diff --git a/src/components/snackbar/Snackbar.vue b/src/components/snackbar/Snackbar.vue
@@ -13,6 +13,12 @@
             <template v-else>
                 <div class="text" v-html="message" />
             </template>
+            <div
+                v-if="cancelText"
+                class="action is-light is-cancel"
+                @click="close">
+                <button class="button">{{ cancelText }}</button>
+            </div>
             <div
                 v-if="actionText"
                 class="action"
@@ -40,6 +46,10 @@ export default {
             type: Function,
             default: () => {}
         },
+        cancelText: {
+            type: String | null,
+            default: null
+        },
         indefinite: {
             type: Boolean,
             default: false

diff --git a/src/components/snackbar/__snapshots__/Snackbar.spec.js.snap b/src/components/snackbar/__snapshots__/Snackbar.spec.js.snap
@@ -3,6 +3,7 @@
 exports[`BSnackbar render correctly 1`] = `
 <div role="alertdialog" class="snackbar is-dark is-top" style="" enter-active-class="fadeInDown" leave-active-class="fadeOut">
     <div class="text"></div>
+    <!---->
     <div class="action is-dark"><button class="button">OK</button></div>
 </div>
 `;
diff --git a/src/scss/components/_notices.scss b/src/scss/components/_notices.scss
@@ -80,6 +80,9 @@ $snackbar-box-shadow: $notices-box-shadow !default;
                 }
             }
         }
+        .action.is-cancel {
+            padding-right: 0;
+        }
         @include mobile {
             width: 100%;
             margin: 0;

diff --git a/types/components.d.ts b/types/components.d.ts
@@ -355,6 +355,11 @@ export declare type BSnackbarConfig = BNoticeConfig & {
      */
     actionText?: string | null;
 
+    /**
+     * Snackbar's cancel button text
+     */
+    cancelText?: string | null;
+
     /**
      * Show the Snackbar indefinitely until it is dismissed
      */