chore(merge main) patched commit → e8f4cba (#1024)

js/src/offcanvas.js

@@ -31,6 +31,8 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
 const ESCAPE_KEY = 'Escape'
 
 const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_SHOWING = 'showing'
+const CLASS_NAME_HIDING = 'hiding'
 const CLASS_NAME_BACKDROP = 'offcanvas-backdrop'
 const OPEN_SELECTOR = '.offcanvas.show'
 
@@ -99,24 +101,23 @@ class Offcanvas extends BaseComponent {
     }
 
     this._isShown = true
-    this._element.style.visibility = 'visible'
-
     this._backdrop.show()
 
     if (!this._config.scroll) {
       new ScrollBarHelper().hide()
     }
 
-    this._element.removeAttribute('aria-hidden')
     this._element.setAttribute('aria-modal', true)
     this._element.setAttribute('role', 'dialog')
-    this._element.classList.add(CLASS_NAME_SHOW)
+    this._element.classList.add(CLASS_NAME_SHOWING)
 
     const completeCallBack = () => {
       if (!this._config.scroll) {
         this._focustrap.activate()
       }
 
+      this._element.classList.add(CLASS_NAME_SHOW)
+      this._element.classList.remove(CLASS_NAME_SHOWING)
       EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget })
     }
 
@@ -137,14 +138,13 @@ class Offcanvas extends BaseComponent {
     this._focustrap.deactivate()
     this._element.blur()
     this._isShown = false
-    this._element.classList.remove(CLASS_NAME_SHOW)
+    this._element.classList.add(CLASS_NAME_HIDING)
     this._backdrop.hide()
 
     const completeCallback = () => {
-      this._element.setAttribute('aria-hidden', true)
+      this._element.classList.remove(CLASS_NAME_SHOW, CLASS_NAME_HIDING)
       this._element.removeAttribute('aria-modal')
       this._element.removeAttribute('role')
-      this._element.style.visibility = 'hidden'
 
       if (!this._config.scroll) {
         new ScrollBarHelper().reset()

js/tests/unit/offcanvas.spec.js

@@ -242,23 +242,46 @@ describe('Offcanvas', () => {
       expect(offCanvas.show).toHaveBeenCalled()
     })
 
-    it('should call hide method if show class is present', () => {
+    it('should call hide method if show class is present', done => {
       fixtureEl.innerHTML = '<div class="offcanvas"></div>'
 
       const offCanvasEl = fixtureEl.querySelector('.offcanvas')
       const offCanvas = new Offcanvas(offCanvasEl)
-      offCanvas.show()
-      expect(offCanvasEl).toHaveClass('show')
 
-      spyOn(offCanvas, 'hide')
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(offCanvasEl).toHaveClass('show')
+        spyOn(offCanvas, 'hide')
 
-      offCanvas.toggle()
+        offCanvas.toggle()
 
-      expect(offCanvas.hide).toHaveBeenCalled()
+        expect(offCanvas.hide).toHaveBeenCalled()
+        done()
+      })
+
+      offCanvas.show()
     })
   })
 
   describe('show', () => {
+    it('should add `showing` class during opening and `show` class on end', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl)
+
+      offCanvasEl.addEventListener('show.bs.offcanvas', () => {
+        expect(offCanvasEl).not.toHaveClass('show')
+      })
+
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        expect(offCanvasEl).not.toHaveClass('showing')
+        expect(offCanvasEl).toHaveClass('show')
+        done()
+      })
+
+      offCanvas.show()
+      expect(offCanvasEl).toHaveClass('showing')
+    })
+
     it('should do nothing if already shown', () => {
       fixtureEl.innerHTML = '<div class="offcanvas show"></div>'
 
@@ -353,6 +376,30 @@ describe('Offcanvas', () => {
   })
 
   describe('hide', () => {
+    it('should add `hiding` class during closing and remover `show` & `hiding` classes on end', done => {
+      fixtureEl.innerHTML = '<div class="offcanvas"></div>'
+      const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+      const offCanvas = new Offcanvas(offCanvasEl)
+
+      offCanvasEl.addEventListener('hide.bs.offcanvas', () => {
+        expect(offCanvasEl).not.toHaveClass('showing')
+        expect(offCanvasEl).toHaveClass('show')
+      })
+
+      offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+        expect(offCanvasEl).not.toHaveClass('hiding')
+        expect(offCanvasEl).not.toHaveClass('show')
+        done()
+      })
+
+      offCanvas.show()
+      offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+        offCanvas.hide()
+        expect(offCanvasEl).not.toHaveClass('showing')
+        expect(offCanvasEl).toHaveClass('hiding')
+      })
+    })
+
     it('should do nothing if already shown', () => {
       fixtureEl.innerHTML = '<div class="offcanvas"></div>'
 

scss/_offcanvas.scss

@@ -12,6 +12,17 @@
   outline: 0;
   @include box-shadow($offcanvas-box-shadow);
   @include transition(transform $offcanvas-transition-duration ease-in-out);
+
+  &.showing,
+  &.show:not(.hiding) {
+    transform: none;
+  }
+
+  &.showing,
+  &.hiding,
+  &.show {
+    visibility: visible;
+  }
 }
 
 .offcanvas-backdrop {
@@ -79,7 +90,3 @@
   border-top: $offcanvas-border-width solid $offcanvas-border-color;
   transform: translateY(100%);
 }
-
-.offcanvas.show {
-  transform: none;
-}

site/content/docs/5.1/components/list-group.md

@@ -73,7 +73,7 @@ With `<button>`s, you can also make use of the `disabled` attribute instead of t
   <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
     The current button
   </button>
-  <button type="button" class="list-group-item list-group-item-action">A second item</button>
+  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
   <button type="button" class="list-group-item list-group-item-action">A third button item</button>
   <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
   <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>

site/content/docs/5.1/components/offcanvas.md

@@ -32,7 +32,7 @@ Below is an offcanvas example that is shown by default (via `.show` on `.offcanv
 <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body">
     Content for the offcanvas goes here. You can place just about any Boosted component or custom elements here.
@@ -61,7 +61,7 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
 <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body">
     <div class="">
@@ -99,7 +99,7 @@ Try the top, right, and bottom examples out below.
 <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body">
     ...
@@ -114,7 +114,7 @@ Try the top, right, and bottom examples out below.
 <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body">
     ...
@@ -129,7 +129,7 @@ Try the top, right, and bottom examples out below.
 <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body small">
     ...
@@ -149,8 +149,8 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
 
 <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
   <div class="offcanvas-header">
-    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
+    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body">
     <p>Try scrolling the rest of the page to see this option in action.</p>
@@ -159,7 +159,7 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
 <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body">
     <p>.....</p>
@@ -168,7 +168,7 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
 <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
-    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
+    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body">
     <p>Try scrolling the rest of the page to see this option in action.</p>

site/content/docs/5.1/migration.md

@@ -203,8 +203,9 @@ Your custom Boosted CSS builds should now look something like this with a separa
 <!-- Boosted mod : no floating labels -->
 
 - <span class="badge bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
-  - `.custom-check` is now `.form-check`.
-  - `.custom-check.custom-switch` is now `.form-check.form-switch`.
+  - `.custom-control.custom-checkbox` is now `.form-check`.
+  - `.custom-control.custom-custom-radio` is now `.form-check`.
+  - `.custom-control.custom-switch` is now `.form-check.form-switch`.
   - `.custom-select` is now `.form-select`.
   - `.custom-file` and `.form-file` have been replaced by custom styles on top of `.form-control`.
   - `.custom-range` is now `.form-range`.