Merge branch 'main' into main-xmr-docs-mv-migration

twbs · Dec 6, 2020 · 52efef6 · 52efef6
2 parents 1c9b06f + 5f89ea3
commit 52efef6
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 53 deletions.
diff --git 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/_utilities.scss b/scss/_utilities.scss
@@ -65,7 +65,9 @@ $utilities: map-merge(
       property: transform,
       class: translate-middle,
       values: (
-        null: (translateX(-50%) translateY(-50%))
+        null: translate(-50%, -50%),
+        x: translateX(-50%),
+        y: translateY(-50%),
       )
     ),
     "border": (

diff --git 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/js/application.js b/site/assets/js/application.js
@@ -28,6 +28,17 @@
       new bootstrap.Popover(popover)
     })
 
+  var toastPlacement = document.getElementById('toastPlacement')
+  if (toastPlacement) {
+    document.getElementById('selectToastPlacement').addEventListener('change', function () {
+      if (!toastPlacement.dataset.originalClass) {
+        toastPlacement.dataset.originalClass = toastPlacement.className
+      }
+
+      toastPlacement.className = toastPlacement.dataset.originalClass + ' ' + this.value
+    })
+  }
+
   document.querySelectorAll('.toast')
     .forEach(function (toastNode) {
       var toast = new bootstrap.Toast(toastNode, {

diff --git 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
@@ -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,28 +135,49 @@ 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;">
-    <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>11 mins ago</small>
-      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
-    </div>
-    <div class="toast-body">
-      Hello, world! This is a toast message.
+{{< example >}}
+<form>
+  <div class="form-group mb-3">
+    <label for="selectToastPlacement">Toast placement</label>
+    <select class="form-select mt-2" id="selectToastPlacement">
+      <option value="" selected>Select a position...</option>
+      <option value="top-0 start-0">Top left</option>
+      <option value="top-0 start-50 translate-middle-x">Top center</option>
+      <option value="top-0 end-0">Top right</option>
+      <option value="top-50 start-0 translate-middle-y">Middle left</option>
+      <option value="top-50 start-50 translate-middle">Middle center</option>
+      <option value="top-50 end-0 translate-middle-y">Middle right</option>
+      <option value="bottom-0 start-0">Bottom left</option>
+      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
+      <option value="bottom-0 end-0">Bottom right</option>
+    </select>
+  </div>
+</form>
+<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
+  <div class="toast-container position-absolute p-3" id="toastPlacement">
+    <div class="toast">
+      <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>11 mins ago</small>
+      </div>
+      <div class="toast-body">
+        Hello, world! This is a toast message.
+      </div>
     </div>
   </div>
 </div>
 {{< /example >}}
 
 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 -->
+  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
+  <div class="toast-container position-absolute top-0 end-0 p-3">
 
     <!-- Then put toasts within -->
     <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
@@ -187,9 +209,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">

diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js
@@ -28,8 +28,8 @@
   // Disable empty links
   document.querySelectorAll('[href="#"]')
     .forEach(function (link) {
-      link.addEventListener('click', function (e) {
-        e.preventDefault()
+      link.addEventListener('click', function (event) {
+        event.preventDefault()
       })
     })
 

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
@@ -61,13 +61,21 @@ Breakpoints specific variants are consequently renamed too (eg. `.text-md-start`
 
 - Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function.
 
+### Utilities
+
+- Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements.
+
 ### Components
 
 #### Breadcrumbs
 
 - Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`.
 - Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS.
 
+#### Toasts
+
+- Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}).
+
 ## v5.0.0-alpha3
 
 ### Browser support

diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md
@@ -68,6 +68,22 @@ This class applies the transformations `translateX(-50%)` and `translateY(-50%)`
 </div>
 {{< /example >}}
 
+By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can be positioned only in horizontal or vertical direction.
+
+{{< example class="bd-example-position-utils" >}}
+<div class="position-relative">
+  <div class="position-absolute top-0 start-0"></div>
+  <div class="position-absolute top-0 start-50 translate-middle-x"></div>
+  <div class="position-absolute top-0 end-0"></div>
+  <div class="position-absolute top-50 start-0 translate-middle-y"></div>
+  <div class="position-absolute top-50 start-50 translate-middle"></div>
+  <div class="position-absolute top-50 end-0 translate-middle-y"></div>
+  <div class="position-absolute bottom-0 start-0"></div>
+  <div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
+  <div class="position-absolute bottom-0 end-0"></div>
+</div>
+{{< /example >}}
+
 ## Examples
 
 Here are some real life examples of these classes: