Offcanvas as component (#29017)

* Add a new offcanvas component

* offcanvas.js: switch to string constants and `event.key`

* Remove unneeded code

* Sass optimizations

* Fixes

Make sure the element is hidden and not offscreen when inactive
fix close icon negative margins
Add content in right & bottom examples
Re-fix bottom offcanvas height not to cover all viewport

* Wording tweaks

* update tests and offcanvas class

* separate scrollbar functionality and use it in offcanvas

* Update .bundlewatch.config.json

* fix focus

* update btn-close / fix focus on close

* add aria-modal and role
return focus on trigger when offcanvas is closed
change body scrolling timings

* move common code to reusable functions

* add aria-labelledby

* Replace lorem ipsum text

* fix focus when offcanvas is closed

* updates

* revert modal, add tests for scrollbar

* show backdrop by default

* Update offcanvas.md

* Update offcanvas CSS to better match modals

- Add background-clip for borders
- Move from outline to border (less clever, more consistent)
- Add scss-docs in vars

* Revamp offcanvas docs

- Add static example to show and explain the components
- Split live examples and rename them
- Simplify example content
- Expand docs notes elsewhere
- Add sass docs

* Add .offcanvas-title instead of .modal-title

* Rename offcanvas example to offcanvas-navbar to reflect it's purpose

* labelledby references title and not header

* Add default shadow to offcanvas

* enable offcanvas-body to fill all the remaining wrapper area

* Be more descriptive, on Accessibility area

* remove redundant classes

* ensure in case of an already open offcanvas, not to open another one

* bring back backdrop|scroll combinations

* bring back toggling class

* refactor scrollbar method, plus tests

* add check if element is not full-width, according to #30621

* revert all in modal

* use documentElement innerWidth

* Rename classes to -start and -end

Also copyedit some docs wording

* omit some things on scrollbar

* PASS BrowserStack tests

-- IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling.

* Rename '_handleClosing' to '_addEventListeners'

* change pipe usage to comma

* change Data.getData to Data.get

Co-authored-by: XhmikosR <[email protected]>
Co-authored-by: Martijn Cuppens <[email protected]>
Co-authored-by: Mark Otto <[email protected]>

3 files changed, 0 insertions, 213 deletions

diff --git a/site/content/docs/5.0/examples/offcanvas/index.html b/site/content/docs/5.0/examples/offcanvas/index.html
deleted file mode 100644
index 9aed0aed7..000000000
--- a/site/content/docs/5.0/examples/offcanvas/index.html
+++ /dev/null
@@ -1,139 +0,0 @@
----
-layout: examples
-title: Offcanvas template
-extra_css:
-  - "offcanvas.css"
-extra_js:
-  - src: "offcanvas.js"
-body_class: "bg-light"
----
-
-<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
-  <div class="container-fluid">
-    <a class="navbar-brand" href="#">Offcanvas navbar</a>
-    <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Notifications</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Profile</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Switch account</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
-          <ul class="dropdown-menu" aria-labelledby="dropdown01">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </li>
-      </ul>
-      <form class="d-flex">
-        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
-      </form>
-    </div>
-  </div>
-</nav>
-
-<div class="nav-scroller bg-body shadow-sm">
-  <nav class="nav nav-underline" aria-label="Secondary navigation">
-    <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
-    <a class="nav-link" href="#">
-      Friends
-      <span class="badge bg-light text-dark rounded-pill align-text-bottom">27</span>
-    </a>
-    <a class="nav-link" href="#">Explore</a>
-    <a class="nav-link" href="#">Suggestions</a>
-    <a class="nav-link" href="#">Link</a>
-    <a class="nav-link" href="#">Link</a>
-    <a class="nav-link" href="#">Link</a>
-    <a class="nav-link" href="#">Link</a>
-    <a class="nav-link" href="#">Link</a>
-  </nav>
-</div>
-
-<main class="container">
-  <div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
-    <img class="me-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38">
-    <div class="lh-1">
-      <h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1>
-      <small>Since 2011</small>
-    </div>
-  </div>
-
-  <div class="my-3 p-3 bg-body rounded shadow-sm">
-    <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
-    <div class="d-flex text-muted pt-3">
-      {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
-      <p class="pb-3 mb-0 small lh-sm border-bottom">
-        <strong class="d-block text-gray-dark">@username</strong>
-        Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
-      </p>
-    </div>
-    <div class="d-flex text-muted pt-3">
-      {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}}
-      <p class="pb-3 mb-0 small lh-sm border-bottom">
-        <strong class="d-block text-gray-dark">@username</strong>
-        Some more representative placeholder content, related to this other user. Another status update, perhaps.
-      </p>
-    </div>
-    <div class="d-flex text-muted pt-3">
-      {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}}
-      <p class="pb-3 mb-0 small lh-sm border-bottom">
-        <strong class="d-block text-gray-dark">@username</strong>
-        This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates.
-      </p>
-    </div>
-    <small class="d-block text-end mt-3">
-      <a href="#">All updates</a>
-    </small>
-  </div>
-
-  <div class="my-3 p-3 bg-body rounded shadow-sm">
-    <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
-    <div class="d-flex text-muted pt-3">
-      {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
-      <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
-        <div class="d-flex justify-content-between">
-          <strong class="text-gray-dark">Full Name</strong>
-          <a href="#">Follow</a>
-        </div>
-        <span class="d-block">@username</span>
-      </div>
-    </div>
-    <div class="d-flex text-muted pt-3">
-      {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
-      <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
-        <div class="d-flex justify-content-between">
-          <strong class="text-gray-dark">Full Name</strong>
-          <a href="#">Follow</a>
-        </div>
-        <span class="d-block">@username</span>
-      </div>
-    </div>
-    <div class="d-flex text-muted pt-3">
-      {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
-      <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
-        <div class="d-flex justify-content-between">
-          <strong class="text-gray-dark">Full Name</strong>
-          <a href="#">Follow</a>
-        </div>
-        <span class="d-block">@username</span>
-      </div>
-    </div>
-    <small class="d-block text-end mt-3">
-      <a href="#">All suggestions</a>
-    </small>
-  </div>
-</main>
diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.css b/site/content/docs/5.0/examples/offcanvas/offcanvas.css
deleted file mode 100644
index 29e26b11b..000000000
--- a/site/content/docs/5.0/examples/offcanvas/offcanvas.css
+++ /dev/null
@@ -1,67 +0,0 @@
-html,
-body {
-  overflow-x: hidden; /* Prevent scroll on narrow devices */
-}
-
-body {
-  padding-top: 56px;
-}
-
-@media (max-width: 991.98px) {
-  .offcanvas-collapse {
-    position: fixed;
-    top: 56px; /* Height of navbar */
-    bottom: 0;
-    left: 100%;
-    width: 100%;
-    padding-right: 1rem;
-    padding-left: 1rem;
-    overflow-y: auto;
-    visibility: hidden;
-    background-color: #343a40;
-    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
-  }
-  .offcanvas-collapse.open {
-    visibility: visible;
-    transform: translateX(-100%);
-  }
-}
-
-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
-  color: rgba(255, 255, 255, .75);
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.nav-underline .nav-link {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: .875rem;
-  color: #6c757d;
-}
-
-.nav-underline .nav-link:hover {
-  color: #007bff;
-}
-
-.nav-underline .active {
-  font-weight: 500;
-  color: #343a40;
-}
-
-.text-white-50 { color: rgba(255, 255, 255, .5); }
-
-.bg-purple { background-color: #6f42c1; }
diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.js b/site/content/docs/5.0/examples/offcanvas/offcanvas.js
deleted file mode 100644
index 793ea86cd..000000000
--- a/site/content/docs/5.0/examples/offcanvas/offcanvas.js
+++ /dev/null
@@ -1,7 +0,0 @@
-(function () {
-  'use strict'
-
-  document.querySelector('[data-bs-toggle="offcanvas"]').addEventListener('click', function () {
-    document.querySelector('.offcanvas-collapse').classList.toggle('open')
-  })
-})()