restrict changes only to backdrop.js, add test

js/src/modal.js

@@ -61,7 +61,6 @@ 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'
@@ -203,8 +202,7 @@ 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

@@ -46,7 +46,6 @@ const DefaultType = {
 
 const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_BACKDROP = 'offcanvas-backdrop'
-
 const OPEN_SELECTOR = '.offcanvas.show'
 
 const EVENT_SHOW = `show${EVENT_KEY}`
@@ -179,10 +178,10 @@ class Offcanvas extends BaseComponent {
 
   _initializeBackDrop() {
     return new Backdrop({
+      className: CLASS_NAME_BACKDROP,
       isVisible: this._config.backdrop,
       isAnimated: true,
       rootElement: this._element.parentNode,
-      backdropClassName: CLASS_NAME_BACKDROP,
       clickCallback: () => this.hide()
     })
   }

js/src/util/backdrop.js

@@ -9,6 +9,7 @@ import EventHandler from '../dom/event-handler'
 import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index'
 
 const Default = {
+  className: 'modal-backdrop',
   isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
   isAnimated: false,
   rootElement: 'body', // give the choice to place backdrop under different elements
@@ -16,6 +17,7 @@ const Default = {
 }
 
 const DefaultType = {
+  className: 'string',
   isVisible: 'boolean',
   isAnimated: 'boolean',
   rootElement: '(element|string)',
@@ -72,7 +74,7 @@ class Backdrop {
   _getElement() {
     if (!this._element) {
       const backdrop = document.createElement('div')
-      backdrop.className = this._config.backdropClassName
+      backdrop.className = this._config.className
       if (this._config.isAnimated) {
         backdrop.classList.add(CLASS_NAME_FADE)
       }

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

@@ -3,7 +3,6 @@ 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'
 
@@ -27,8 +26,7 @@ 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)
 
@@ -47,8 +45,7 @@ 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)
 
@@ -62,8 +59,7 @@ 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)
 
@@ -83,8 +79,7 @@ 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)
@@ -102,8 +97,7 @@ 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()
 
@@ -117,8 +111,7 @@ 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()
@@ -142,8 +135,7 @@ describe('Backdrop', () => {
       const instance = new Backdrop({
         isVisible: true,
         isAnimated: true,
-        rootElement: wrapper,
+        rootElement: wrapper
-        backdropClassName: CLASS_NAME_BACKDROP
       })
 
       const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
@@ -165,7 +157,6 @@ describe('Backdrop', () => {
       const instance = new Backdrop({
         isVisible: true,
         isAnimated: false,
-        backdropClassName: CLASS_NAME_BACKDROP,
         clickCallback: () => spy()
       })
       const endTest = () => {
@@ -188,8 +179,7 @@ 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')
 
@@ -212,8 +202,7 @@ 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')
 
@@ -230,8 +219,7 @@ 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)
 
@@ -242,49 +230,62 @@ describe('Backdrop', () => {
       })
     })
   })
-
+  describe('Config', () => {
-  describe('rootElement initialization', () => {
+    describe('rootElement initialization', () => {
-    it('Should be appended on "document.body" by default', done => {
+      it('Should be appended on "document.body" by default', done => {
-      const instance = new Backdrop({
+        const instance = new Backdrop({
-        isVisible: true,
+          isVisible: true
-        backdropClassName: CLASS_NAME_BACKDROP
+        })
+        const getElement = () => document.querySelector(CLASS_BACKDROP)
+        instance.show(() => {
+          expect(getElement().parentElement).toEqual(document.body)
+          done()
+        })
       })
-      const getElement = () => document.querySelector(CLASS_BACKDROP)
+
-      instance.show(() => {
+      it('Should find the rootElement if passed as a string', done => {
-        expect(getElement().parentElement).toEqual(document.body)
+        const instance = new Backdrop({
-        done()
+          isVisible: true,
+          rootElement: 'body'
+        })
+        const getElement = () => document.querySelector(CLASS_BACKDROP)
+        instance.show(() => {
+          expect(getElement().parentElement).toEqual(document.body)
+          done()
+        })
+      })
+
+      it('Should appended on any element given by the proper config', done => {
+        fixtureEl.innerHTML = [
+          '<div id="wrapper">',
+          '</div>'
+        ].join('')
+
+        const wrapper = fixtureEl.querySelector('#wrapper')
+        const instance = new Backdrop({
+          isVisible: true,
+          rootElement: wrapper
+        })
+        const getElement = () => document.querySelector(CLASS_BACKDROP)
+        instance.show(() => {
+          expect(getElement().parentElement).toEqual(wrapper)
+          done()
+        })
       })
     })
 
-    it('Should find the rootElement if passed as a string', done => {
+    describe('ClassName', () => {
-      const instance = new Backdrop({
+      it('Should be able to have different classNames than default', done => {
-        isVisible: true,
+        const instance = new Backdrop({
-        rootElement: 'body',
+          isVisible: true,
-        backdropClassName: CLASS_NAME_BACKDROP
+          className: 'foo'
-      })
+        })
-      const getElement = () => document.querySelector(CLASS_BACKDROP)
+        const getElement = () => document.querySelector('.foo')
-      instance.show(() => {
+        instance.show(() => {
-        expect(getElement().parentElement).toEqual(document.body)
+          expect(getElement()).toEqual(instance._getElement())
-        done()
+          instance.dispose()
-      })
+          done()
-    })
+        })
-
-    it('Should appended on any element given by the proper config', done => {
-      fixtureEl.innerHTML = [
-        '<div id="wrapper">',
-        '</div>'
-      ].join('')
-
-      const wrapper = fixtureEl.querySelector('#wrapper')
-      const instance = new Backdrop({
-        isVisible: true,
-        rootElement: wrapper,
-        backdropClassName: CLASS_NAME_BACKDROP
-      })
-      const getElement = () => document.querySelector(CLASS_BACKDROP)
-      instance.show(() => {
-        expect(getElement().parentElement).toEqual(wrapper)
-        done()
       })
     })
   })

scss/_offcanvas.scss

@@ -14,10 +14,6 @@
   @include transition(transform $offcanvas-transition-duration ease-in-out);
 }
 
-.offcanvas-backdrop {
-  @extend .modal-backdrop;
-}
-
 .offcanvas-header {
   display: flex;
   align-items: center;