Variabilize backdrop class name (#34094)

js/src/modal.js

@@ -61,6 +61,7 @@ const CLASS_NAME_OPEN = 'modal-open'
 const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_STATIC = 'modal-static'
+const CLASS_NAME_BACKDROP = 'modal-backdrop'
 
 const SELECTOR_DIALOG = '.modal-dialog'
 const SELECTOR_MODAL_BODY = '.modal-body'
@@ -202,7 +203,8 @@ class Modal extends BaseComponent {
   _initializeBackDrop() {
     return new Backdrop({
       isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value
-      isAnimated: this._isAnimated()
+      isAnimated: this._isAnimated(),
+      backdropClassName: CLASS_NAME_BACKDROP
     })
   }
 

js/src/offcanvas.js

@@ -45,6 +45,8 @@ const DefaultType = {
 }
 
 const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_BACKDROP = 'offcanvas-backdrop'
+
 const OPEN_SELECTOR = '.offcanvas.show'
 
 const EVENT_SHOW = `show${EVENT_KEY}`
@@ -180,6 +182,7 @@ class Offcanvas extends BaseComponent {
       isVisible: this._config.backdrop,
       isAnimated: true,
       rootElement: this._element.parentNode,
+      backdropClassName: CLASS_NAME_BACKDROP,
       clickCallback: () => this.hide()
     })
   }

js/src/util/backdrop.js

@@ -22,7 +22,6 @@ const DefaultType = {
   clickCallback: '(function|null)'
 }
 const NAME = 'backdrop'
-const CLASS_NAME_BACKDROP = 'modal-backdrop'
 const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
 
@@ -73,7 +72,7 @@ class Backdrop {
   _getElement() {
     if (!this._element) {
       const backdrop = document.createElement('div')
-      backdrop.className = CLASS_NAME_BACKDROP
+      backdrop.className = this._config.backdropClassName
       if (this._config.isAnimated) {
         backdrop.classList.add(CLASS_NAME_FADE)
       }

js/tests/unit/util/backdrop.spec.js

@@ -3,6 +3,7 @@ import { getTransitionDurationFromElement } from '../../../src/util/index'
 import { clearFixture, getFixture } from '../../helpers/fixture'
 
 const CLASS_BACKDROP = '.modal-backdrop'
+const CLASS_NAME_BACKDROP = 'modal-backdrop'
 const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
 
@@ -26,7 +27,8 @@ describe('Backdrop', () => {
     it('if it is "shown", should append the backdrop html once, on show, and contain "show" class', done => {
       const instance = new Backdrop({
         isVisible: true,
-        isAnimated: false
+        isAnimated: false,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
 
@@ -45,7 +47,8 @@ describe('Backdrop', () => {
     it('if it is not "shown", should not append the backdrop html', done => {
       const instance = new Backdrop({
         isVisible: false,
-        isAnimated: true
+        isAnimated: true,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
 
@@ -59,7 +62,8 @@ describe('Backdrop', () => {
     it('if it is "shown" and "animated", should append the backdrop html once, and contain "fade" class', done => {
       const instance = new Backdrop({
         isVisible: true,
-        isAnimated: true
+        isAnimated: true,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
 
@@ -79,7 +83,8 @@ describe('Backdrop', () => {
     it('should remove the backdrop html', done => {
       const instance = new Backdrop({
         isVisible: true,
-        isAnimated: true
+        isAnimated: true,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
 
       const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
@@ -97,7 +102,8 @@ describe('Backdrop', () => {
     it('should remove "show" class', done => {
       const instance = new Backdrop({
         isVisible: true,
-        isAnimated: true
+        isAnimated: true,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const elem = instance._getElement()
 
@@ -111,7 +117,8 @@ describe('Backdrop', () => {
     it('if it is not "shown", should not try to remove Node on remove method', done => {
       const instance = new Backdrop({
         isVisible: false,
-        isAnimated: true
+        isAnimated: true,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
       const spy = spyOn(instance, 'dispose').and.callThrough()
@@ -135,7 +142,8 @@ describe('Backdrop', () => {
       const instance = new Backdrop({
         isVisible: true,
         isAnimated: true,
-        rootElement: wrapper
+        rootElement: wrapper,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
 
       const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
@@ -157,6 +165,7 @@ describe('Backdrop', () => {
       const instance = new Backdrop({
         isVisible: true,
         isAnimated: false,
+        backdropClassName: CLASS_NAME_BACKDROP,
         clickCallback: () => spy()
       })
       const endTest = () => {
@@ -179,7 +188,8 @@ describe('Backdrop', () => {
     it('if it is animated, should show and hide backdrop after counting transition duration', done => {
       const instance = new Backdrop({
         isVisible: true,
-        isAnimated: true
+        isAnimated: true,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const spy2 = jasmine.createSpy('spy2')
 
@@ -202,7 +212,8 @@ describe('Backdrop', () => {
       const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
       const instance = new Backdrop({
         isVisible: true,
-        isAnimated: false
+        isAnimated: false,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const spy2 = jasmine.createSpy('spy2')
 
@@ -219,7 +230,8 @@ describe('Backdrop', () => {
     it('if it is not "shown", should not call delay callbacks', done => {
       const instance = new Backdrop({
         isVisible: false,
-        isAnimated: true
+        isAnimated: true,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
 
@@ -234,7 +246,8 @@ describe('Backdrop', () => {
   describe('rootElement initialization', () => {
     it('Should be appended on "document.body" by default', done => {
       const instance = new Backdrop({
-        isVisible: true
+        isVisible: true,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const getElement = () => document.querySelector(CLASS_BACKDROP)
       instance.show(() => {
@@ -246,7 +259,8 @@ describe('Backdrop', () => {
     it('Should find the rootElement if passed as a string', done => {
       const instance = new Backdrop({
         isVisible: true,
-        rootElement: 'body'
+        rootElement: 'body',
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const getElement = () => document.querySelector(CLASS_BACKDROP)
       instance.show(() => {
@@ -264,7 +278,8 @@ describe('Backdrop', () => {
       const wrapper = fixtureEl.querySelector('#wrapper')
       const instance = new Backdrop({
         isVisible: true,
-        rootElement: wrapper
+        rootElement: wrapper,
+        backdropClassName: CLASS_NAME_BACKDROP
       })
       const getElement = () => document.querySelector(CLASS_BACKDROP)
       instance.show(() => {

scss/_modal.scss

@@ -98,6 +98,10 @@
   &.show { opacity: $modal-backdrop-opacity; }
 }
 
+.offcanvas-backdrop {
+  @extend .modal-backdrop;
+}
+
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {