feat: Add progress bar to toast component

js/src/toast.js

@@ -9,6 +9,7 @@ import { defineJQueryPlugin, reflow } from './util/index.js'
 import EventHandler from './dom/event-handler.js'
 import BaseComponent from './base-component.js'
 import { enableDismissTrigger } from './util/component-functions.js'
+import SelectorEngine from './dom/selector-engine.js'
 
 /**
  * Constants
@@ -18,6 +19,8 @@ const NAME = 'toast'
 const DATA_KEY = 'bs.toast'
 const EVENT_KEY = `.${DATA_KEY}`
 
+const CLASS_PROGRESS_BAR = '.toast-progress'
+
 const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`
 const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`
 const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
@@ -145,6 +148,7 @@ class Toast extends BaseComponent {
       return
     }
 
+    this._toggleProgressBar(this._config.delay)
     this._timeout = setTimeout(() => {
       this.hide()
     }, this._config.delay)
@@ -191,6 +195,7 @@ class Toast extends BaseComponent {
 
   _clearTimeout() {
     clearTimeout(this._timeout)
+    this._toggleProgressBar(null)
     this._timeout = null
   }
 
@@ -208,6 +213,23 @@ class Toast extends BaseComponent {
       }
     })
   }
+
+  _toggleProgressBar(time) {
+    const progressBarElement = SelectorEngine.findOne(CLASS_PROGRESS_BAR, this._element)
+    if (!progressBarElement) {
+      return
+    }
+
+    if (time) {
+      progressBarElement.classList.add('animated')
+      progressBarElement.style.animationDuration = `${time}ms`
+      // reflow(progressBarElement)
+      return
+    }
+
+    progressBarElement.classList.remove('animated')
+    reflow(progressBarElement)
+  }
 }
 
 /**

scss/_toasts.scss

@@ -1,3 +1,12 @@
+@keyframes scale-x-frames {
+  0% {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
 .toast {
   // scss-docs-start toast-css-vars
   --#{$prefix}toast-zindex: #{$zindex-toast};
@@ -35,6 +44,29 @@
   &:not(.show) {
     display: none;
   }
+
+  $toast-progress-height: 5px;
+  $toast-progress-bg-color: #add555;
+  $toast-progress-elapsed-bg-color: rgba(255, 255, 255, .7);
+  $toast-progress-transform-origin: right;
+  .toast-progress {
+    position: relative;
+    height: $toast-progress-height;
+    background-color: $toast-progress-bg-color;
+
+    &.animated::after {
+      position: absolute;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      content: "";
+      background-color: $toast-progress-elapsed-bg-color;
+      transform-origin: $toast-progress-transform-origin;
+      animation: scale-x-frames linear 1 forwards;
+      animation-duration: inherit;
+    }
+  }
+
 }
 
 .toast-container {

site/content/docs/5.2/components/toasts.md

@@ -60,6 +60,7 @@ Click the button below to show a toast (positioned with our utilities in the low
     <div class="toast-body">
       Hello, world! This is a toast message.
     </div>
+  <div class="toast-progress"></div>
   </div>
 </div>