Merge branch 'dev' into chore-docs-simplify-form-group-validation-messages

jacobmllr95 · web-flow · commit af16536507fa · 2020-10-07T13:55:07.000+02:00
diff --git a/src/components/skeleton/_skeleton.scss b/src/components/skeleton/_skeleton.scss
@@ -9,6 +9,8 @@
   overflow: hidden;
   background-color: $b-skeleton-background-color;
   cursor: $b-skeleton-loading-cursor;
+  // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
+  mask-image: radial-gradient(white, black);
 
   // Use `::before` since `::after` is used for the wave-animation
   &::before {
diff --git a/src/components/toast/README.md b/src/components/toast/README.md
@@ -272,6 +272,58 @@ When auto-hide is enabled, hovering over the toast will pause the auto-hide time
 the toast, the auto-hide timer will be resumed. You can disable this feature by setting the
 `no-hover-pause` prop to `true`.
 
+### Close button
+
+Toasts have a close button to hide them on use click by default. Setting the `no-close-button` prop
+to `true` will prevent this and creates a toast without the default close button.
+
+It is still possible to create a custom close button for the toast by providing a unique ID and use
+the `this.$bvToast.hide(id)` method to hide the specific toast:
+
+```html
+<template>
+  <div>
+    <b-button @click="showToast">Show Toast</b-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      showToast() {
+        // Use a shorter name for `this.$createElement`
+        const h = this.$createElement
+        // Create a ID with a incremented count
+        const id = `my-toast-${this.count++}`
+
+        // Create the custom close button
+        const $closeButton = h(
+          'b-button',
+          {
+            on: { click: () => this.$bvToast.hide(id) }
+          },
+          'Close'
+        )
+
+        // Create the toast
+        this.$bvToast.toast([$closeButton], {
+          id: id,
+          title: `Toast ${this.count}`,
+          noCloseButton: true
+        })
+      }
+    }
+ }
+</script>
+
+<!-- toasts-advanced.vue -->
+```
+
 ### Toast roles
 
 Toasts are rendered with a default `role` attribute of `'alert'` and `aria-live` attribute of
@@ -428,7 +480,7 @@ for generating more complex toast content:
 ```html
 <template>
   <div>
-    <b-button @click="popToast">Show Toast with custom content</b-button>
+    <b-button @click="showToast">Show Toast with custom content</b-button>
   </div>
 </template>
 
@@ -440,7 +492,7 @@ for generating more complex toast content:
       }
     },
     methods: {
-      popToast() {
+      showToast() {
         // Use a shorter name for this.$createElement
         const h = this.$createElement
         // Increment the toast count
