Add toast positioning

diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index e2b98e6008e9262024d94254a557f980153d542c..7a1cf7354852369f1308303db95c6bbf35eaf9c9 100644 (file)
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,29 +1,31 @@
 .toast {
-  max-width: $toast-max-width;
+  width: $toast-max-width;
+  max-width: 100%;
   @include font-size($toast-font-size);
   color: $toast-color;
+  pointer-events: auto;
   background-color: $toast-background-color;
   background-clip: padding-box;
   border: $toast-border-width solid $toast-border-color;
   box-shadow: $toast-box-shadow;
-  opacity: 0;
   @include border-radius($toast-border-radius);
 
-  &:not(:last-child) {
-    margin-bottom: $toast-padding-x;
+  &:not(.showing):not(.show) {
+    opacity: 0;
   }
 
-  &.showing {
-    opacity: 1;
+  &.hide {
+    display: none;
   }
+}
 
-  &.show {
-    display: block;
-    opacity: 1;
-  }
+.toast-container {
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
 
-  &.hide {
-    display: none;
+  > :not(:last-child) {
+    margin-bottom: $toast-spacing;
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index b97e520d7c034904a1721d6e4bc112a8e8917c11..d9acaca980a30dddba1dac0a3f1829f11817b159 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1108,6 +1108,7 @@ $toast-border-width:                1px !default;
 $toast-border-color:                rgba(0, 0, 0, .1) !default;
 $toast-border-radius:               $border-radius !default;
 $toast-box-shadow:                  $box-shadow !default;
+$toast-spacing:                     $container-padding-x !default;
 
 $toast-header-color:                $gray-600 !default;
 $toast-header-background-color:     rgba($white, .85) !default;

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index b29635500b7b8668d73fcb3cdea2abcbf071b3e6..ce7ea7539935a23944fac0b9f20197bd54ab9411 100644 (file)
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -265,6 +265,11 @@
   }
 }
 
+// Toasts
+.bd-example-toasts {
+  min-height: 240px;
+}
+
 //
 // Code snippets
 //

diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index be368c76e48a6f3532401cd9f35d0a8a9c991d77..ecee0ecdf4e8a68e3fcaac6d9dfa9cba6e80a478 100644 (file)
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -13,7 +13,6 @@ Toasts are lightweight notifications designed to mimic the push notifications th
 Things to know when using the toast plugin:
 
 - Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
-- **Please note that you are responsible for positioning toasts.**
 - Toasts will automatically hide if you do not specify `autohide: false`.
 
 {{< callout info >}}
@@ -62,30 +61,32 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
 
 ### Stacking
 
-When you have multiple toasts, we default to vertically stacking them in a readable manner.
+You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
 
 {{< example class="bg-light" >}}
-<div 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>
-    <small class="text-muted">just now</small>
-    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-  </div>
-  <div class="toast-body">
-    See? Just like this.
+<div class="toast-container">
+  <div 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>
+      <small class="text-muted">just now</small>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+      See? Just like this.
+    </div>
   </div>
-</div>
 
-<div 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>
-    <small class="text-muted">2 seconds ago</small>
-    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-  </div>
-  <div class="toast-body">
-    Heads up, toasts will stack automatically
+  <div 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>
+      <small class="text-muted">2 seconds ago</small>
+      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+      Heads up, toasts will stack automatically
+    </div>
   </div>
 </div>
 {{< /example >}}
@@ -134,9 +135,9 @@ Building on the above example, you can create different toast color schemes with
 
 Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
 
-{{< example class="bg-dark" >}}
-<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
-  <div class="toast" style="position: absolute; top: 0; right: 0;">
+{{< example class="bg-dark bd-example-toasts p-0">}}
+<div aria-live="polite" aria-atomic="true" class="position-relative">
+  <div class="toast position-absolute top-0 end-0 m-3">
     <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>
@@ -152,10 +153,13 @@ Place toasts with custom CSS as you need them. The top right is often used for n
 
 For systems that generate more notifications, consider using a wrapping element so they can easily stack.
 
-{{< example class="bg-dark" >}}
-<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
-  <!-- Position it -->
-  <div style="position: absolute; top: 0; right: 0;">
+{{< example class="bg-dark bd-example-toasts p-0" >}}
+<div aria-live="polite" aria-atomic="true" class="position-relative">
+  <!-- Position it: -->
+  <!-- - `.toast-container` for spacing between toasts -->
+  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
+  <!-- - `.m-3` to prevent the toasts from sticking to the edge of the container  -->
+  <div class="toast-container position-absolute top-0 end-0 m-3">
 
     <!-- Then put toasts within -->
     <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
@@ -187,9 +191,9 @@ For systems that generate more notifications, consider using a wrapping element
 
 You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
 
-{{< example class="bg-dark" >}}
+{{< example class="bg-dark bd-example-toasts d-flex" >}}
 <!-- Flexbox container for aligning the toasts -->
-<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
+<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
 
   <!-- Then put toasts within -->
   <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">