Merge branch 'main' into side-modals

scss/_modal.scss

@@ -233,3 +233,50 @@
     }
   }
 }
+
+.modal-left,
+.modal-right {
+  .modal-dialog {
+    width: $modal-sidebar-width;
+    max-width: $modal-sidebar-max-width;
+    height: 100%;
+    margin: 0;
+    transform: translate(0);
+    @include transition(transform .2s);
+  }
+
+  .modal-content {
+    height: inherit;
+    border: 0;
+    @include border-radius(0);
+  }
+
+  .modal-body {
+    overflow-y: auto;
+  }
+
+  &.modal.fade {
+    .modal-dialog {
+      transform: translateX(0);
+    }
+  }
+  &.modal.show {
+    .modal-dialog {
+      transform: none;
+    }
+  }
+}
+
+.modal.modal-left {
+  .modal-dialog {
+    margin-right: auto;
+    transform: translateX(-100%);
+  }
+}
+
+.modal.modal-right {
+  .modal-dialog {
+    margin-left: auto;
+    transform: translateX(100%);
+  }
+}

scss/_variables.scss

@@ -1162,6 +1162,9 @@ $modal-md:                          500px !default;
 $modal-lg:                          800px !default;
 $modal-xl:                          1140px !default;
 
+$modal-sidebar-width:               350px !default;
+$modal-sidebar-max-width:           80% !default;
+
 $modal-fade-transform:              translate(0, -50px) !default;
 $modal-show-transform:              none !default;
 $modal-transition:                  transform .3s ease-out !default;

site/content/docs/5.0/components/modal.md

@@ -186,7 +186,6 @@ When backdrop is set to static, the modal will not close when clicking outside i
 </div>
 ```
 
-
 ### Scrolling long content
 
 When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
@@ -347,6 +346,166 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 </div>
 ```
 
+## Sidebar modals
+
+Convert modals into offcanvas sidebar components with the addition of `.modal-left` or `.modal-right`. These classes override the modal's default position, sizing, and transitions to make them appear as offcanvas drawers for content, shopping carts, navigation, and more.
+
+With these two demos, we've removed our optional `.modal-footer`s, but you can add them back. You can also add any custom content within the modal, or change the default appearance, as you need.
+
+### Left modal
+
+Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` component in it. If you include `.fade` on the `.modal`, the modal and backdrop will slowly fade into view instead of sliding into the viewport from offscreen.
+
+<div class="modal modal-left" id="modalLeft" tabindex="-1" aria-labelledby="modalLeftLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="modalLeftLabel">Modal left</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <ul class="nav nav-pills flex-column">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Active</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal modal-left fade" id="modalLeftFade" tabindex="-1" aria-labelledby="modalLeftFadeLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="modalLeftFadeLabel">Modal left</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <ul class="nav nav-pills flex-column">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Active</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="bd-example">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalLeft">
+    Launch left modal
+  </button>
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalLeftFade">
+    Launch left modal with fade
+  </button>
+</div>
+
+```html
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalLeft">
+  Launch left modal
+</button>
+<div class="modal modal-left" id="modalLeftFade" tabindex="-1" aria-labelledby="modalLeftFadeLabel" aria-hidden="true">
+  ...
+</div>
+
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalLeftFadeFade">
+  Launch left modal with fade
+</button>
+<div class="modal modal-left fade" id="modalLeftFadeFade" tabindex="-1" aria-labelledby="modalLeftFadeFadeLabel" aria-hidden="true">
+  ...
+</div>
+```
+
+### Right modal
+
+In this `.modal-right` example, we've removed the default `.modal-body` padding with `.p-0` and added a linked list group within. Just like the left modal, add `.fade` to fade in the modal and backdrop instead of sliding into the viewport from offscreen.
+
+<div class="modal modal-right" id="modalRight" tabindex="-1" aria-labelledby="modalRightLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="modalRightLabel">Modal right</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body p-0">
+        <div class="list-group list-group-flush">
+          <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Cras justo odio</a>
+          <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
+          <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
+          <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
+          <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal modal-right fade" id="modalRightFade" tabindex="-1" aria-labelledby="modalRightFadeLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="modalRightFadeLabel">Modal right</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body p-0">
+        <div class="list-group list-group-flush">
+          <a href="#" class="list-group-item list-group-item-action active" aria-current="true">Cras justo odio</a>
+          <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
+          <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
+          <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
+          <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="bd-example">
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRight">
+    Launch right modal
+  </button>
+  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRightFade">
+    Launch right modal with fade
+  </button>
+</div>
+
+```html
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRight">
+  Launch right modal
+</button>
+<div class="modal modal-right" id="modalRight" tabindex="-1" aria-labelledby="modalRightLabel" aria-hidden="true">
+  ...
+</div>
+
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRightFade">
+  Launch right modal with fade
+</button>
+<div class="modal modal-right fade" id="modalRightFade" tabindex="-1" aria-labelledby="modalRightFadeLabel" aria-hidden="true">
+  ...
+</div>
+```
+
+## Working with modals
+
 ### Tooltips and popovers
 
 [Tooltips]({{< docsref "/components/tooltips" >}}) and [popovers]({{< docsref "/components/popovers" >}}) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.