Toasts: Change showing timings and classes to keep toast `display:none` by default...

diff --git a/js/src/toast.js b/js/src/toast.js
index b6c9bdd792ab4ad21602ef10b22de4f7fb690285..9b3c0f7c8bfabe1522af5246fd0eadc28f4b112b 100644 (file)
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -35,7 +35,7 @@ const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 
 const CLASS_NAME_FADE = 'fade'
-const CLASS_NAME_HIDE = 'hide'
+const CLASS_NAME_HIDE = 'hide' // @deprecated - kept here only for backwards compatibility
 const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_SHOWING = 'showing'
 
@@ -101,15 +101,14 @@ class Toast extends BaseComponent {
 
     const complete = () => {
       this._element.classList.remove(CLASS_NAME_SHOWING)
-      this._element.classList.add(CLASS_NAME_SHOW)
-
       EventHandler.trigger(this._element, EVENT_SHOWN)
 
       this._maybeScheduleHide()
     }
 
-    this._element.classList.remove(CLASS_NAME_HIDE)
+    this._element.classList.remove(CLASS_NAME_HIDE) // @deprecated
     reflow(this._element)
+    this._element.classList.add(CLASS_NAME_SHOW)
     this._element.classList.add(CLASS_NAME_SHOWING)
 
     this._queueCallback(complete, this._element, this._config.animation)
@@ -127,11 +126,13 @@ class Toast extends BaseComponent {
     }
 
     const complete = () => {
-      this._element.classList.add(CLASS_NAME_HIDE)
+      this._element.classList.add(CLASS_NAME_HIDE) // @deprecated
+      this._element.classList.remove(CLASS_NAME_SHOWING)
+      this._element.classList.remove(CLASS_NAME_SHOW)
       EventHandler.trigger(this._element, EVENT_HIDDEN)
     }
 
-    this._element.classList.remove(CLASS_NAME_SHOW)
+    this._element.classList.add(CLASS_NAME_SHOWING)
     this._queueCallback(complete, this._element, this._config.animation)
   }
 

diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 717aae576e9b834bda91b1930b05ed7e33d021f9..0a2d6ec875c8f7e29295ae388077625576b84198 100644 (file)
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -10,11 +10,11 @@
   box-shadow: $toast-box-shadow;
   @include border-radius($toast-border-radius);
 
-  &:not(.showing):not(.show) {
+  &.showing {
     opacity: 0;
   }
 
-  &.hide {
+  &:not(.show) {
     display: none;
   }
 }

diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index 8017ecdcd4a1524635def2dbdcae7f43831c1745..609a887496ab8d97f3acacacbd5e560dcb52ae2b 100644 (file)
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -41,12 +41,16 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 </div>
 {{< /example >}}
 
+{{< callout warning >}}
+Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
+{{< /callout >}}
+
 ### Live example
 
-Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default with `.hide`.
+Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
 
 <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
-  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
+  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
       <strong class="me-auto">Bootstrap</strong>
@@ -67,7 +71,7 @@ Click the button below to show a toast (positioned with our utilities in the low
 <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
 
 <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
-  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
+  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       <img src="..." class="rounded me-2" alt="...">
       <strong class="me-auto">Bootstrap</strong>