From f13ec430591743632e4aa6d60b2221e2851197a5 Mon Sep 17 00:00:00 2001
From: Rasmus Nielsen <rni@nova-c.dk>
Date: Wed, 20 May 2020 14:51:30 +0200
Subject: [PATCH 1/9] initial take

---
 src/components/sidebar/README.md       |  3 ++
 src/components/sidebar/package.json    |  5 +++
 src/components/sidebar/sidebar.js      |  6 ++++
 src/components/sidebar/sidebar.spec.js | 46 ++++++++++++++++++++++++++
 4 files changed, 60 insertions(+)

diff --git a/src/components/sidebar/README.md b/src/components/sidebar/README.md
index 7b07ec1970b..587903b830d 100644
--- a/src/components/sidebar/README.md
+++ b/src/components/sidebar/README.md
@@ -270,6 +270,9 @@ Add a basic backdrop when the side bar is open via the `backdrop` prop. When set
 sidebar will show an opaque backdrop. Clicking on the backdrop will close the sidebar, unless the
 `no-close-on-backdrop` prop is set to `true`.
 
+Optionally you can add the `backdrop-transparent` prop. When added the backdrop will be transparent,
+but remain clickable. Allowing the user to still close the sidebar by clicking outside of it.
+
 ```html
 <template>
   <div>
diff --git a/src/components/sidebar/package.json b/src/components/sidebar/package.json
index 4bed7399a3d..dd8d293fe03 100644
--- a/src/components/sidebar/package.json
+++ b/src/components/sidebar/package.json
@@ -76,6 +76,11 @@
             "version": "2.12.0",
             "description": "When `true`, shows a backdrop when the sidebar is open"
           },
+          {
+            "prop": "backdropTransparent",
+            "version": "2.15.0",
+            "description": "When `true`, and the prop `backdrop` is true. Makes the backdrop transparent, but remains clickable"
+          },
           {
             "prop": "lazy",
             "description": "When set to `true`, the content of the sidebar will only be rendered while the sidebar is open"
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index ebf2db0a6dd..676e5b43fc2 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -118,6 +118,7 @@ const renderBackdrop = (h, ctx) => {
   return h('div', {
     directives: [{ name: 'show', value: ctx.localShow }],
     staticClass: 'b-sidebar-backdrop',
+    class: { 'bg-transparent': ctx.backdropTransparent },
     on: { click: ctx.onBackdropClick }
   })
 }
@@ -201,6 +202,11 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
       type: Boolean,
       default: false
     },
+    backdropTransparent: {
+      // If true, makes the backdrop transparent
+      type: Boolean,
+      default: false
+    },
     noSlide: {
       type: Boolean,
       default: false
diff --git a/src/components/sidebar/sidebar.spec.js b/src/components/sidebar/sidebar.spec.js
index 448872c6463..f29652aaec0 100644
--- a/src/components/sidebar/sidebar.spec.js
+++ b/src/components/sidebar/sidebar.spec.js
@@ -116,6 +116,52 @@ describe('sidebar', () => {
     wrapper.destroy()
   })
 
+  it('applies bg-transpanret to backdrop when prop `backdrop-transparent` is true', async () => {
+    const wrapper = mount(BSidebar, {
+      attachTo: createContainer(),
+      propsData: {
+        id: 'test-backdrop',
+        noCloseOnBackdrop: true,
+        visible: true,
+        backdrop: true,
+        backdropTransparent: true
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    const $sidebar = wrapper.find('.b-sidebar')
+    expect($sidebar.exists()).toBe(true)
+    const $backdrop = wrapper.find('.b-sidebar-backdrop')
+    expect($backdrop.exists()).toBe(true)
+
+    expect($backdrop.classes()).toContain('bg-transparent')
+
+    await $backdrop.trigger('click')
+    await waitRAF()
+    await waitRAF()
+    expect($sidebar.element).toBeVisible()
+    expect($backdrop.element).toBeVisible()
+
+    await wrapper.setProps({ noCloseOnBackdrop: false })
+    await waitRAF()
+    await waitRAF()
+    expect($sidebar.element).toBeVisible()
+    expect($backdrop.element).toBeVisible()
+
+    await $backdrop.trigger('click')
+    await waitRAF()
+    await waitRAF()
+    expect($sidebar.element).not.toBeVisible()
+    expect($backdrop.element).not.toBeVisible()
+
+    wrapper.destroy()
+  })
+
   it('shows and hides in response to v-b-toggle events', async () => {
     const wrapper = mount(BSidebar, {
       attachTo: createContainer(),

From f2f0f9748c4a7a7d94f433a0683c9f8c253336fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 20 May 2020 15:40:29 +0200
Subject: [PATCH 2/9] Update sidebar.js

---
 src/components/sidebar/sidebar.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index 676e5b43fc2..511032ae2b9 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -198,12 +198,12 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
       // default: null
     },
     backdrop: {
-      // If true, shows a basic backdrop
+      // If `true`, shows a basic backdrop
       type: Boolean,
       default: false
     },
     backdropTransparent: {
-      // If true, makes the backdrop transparent
+      // If `true`, makes the backdrop transparent
       type: Boolean,
       default: false
     },

From a6a0781e34a05975e54352f24a735698b3cf383d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 20 May 2020 15:42:41 +0200
Subject: [PATCH 3/9] Update package.json

---
 src/components/sidebar/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar/package.json b/src/components/sidebar/package.json
index dd8d293fe03..4f16ce84ce4 100644
--- a/src/components/sidebar/package.json
+++ b/src/components/sidebar/package.json
@@ -79,7 +79,7 @@
           {
             "prop": "backdropTransparent",
             "version": "2.15.0",
-            "description": "When `true`, and the prop `backdrop` is true. Makes the backdrop transparent, but remains clickable"
+            "description": "When `true`, makes the backdrop transparent, but remains clickable"
           },
           {
             "prop": "lazy",

From cc7cafff76238f98de10d656c02c315030a41058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 20 May 2020 15:45:04 +0200
Subject: [PATCH 4/9] Update sidebar.spec.js

---
 src/components/sidebar/sidebar.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/sidebar.spec.js b/src/components/sidebar/sidebar.spec.js
index f29652aaec0..7d7bdfe767b 100644
--- a/src/components/sidebar/sidebar.spec.js
+++ b/src/components/sidebar/sidebar.spec.js
@@ -73,7 +73,7 @@ describe('sidebar', () => {
     wrapper.destroy()
   })
 
-  it('shows backdrop when prop `backdrop` is true', async () => {
+  it('shows backdrop when prop `backdrop` is `true`', async () => {
     const wrapper = mount(BSidebar, {
       attachTo: createContainer(),
       propsData: {
@@ -116,7 +116,7 @@ describe('sidebar', () => {
     wrapper.destroy()
   })
 
-  it('applies bg-transpanret to backdrop when prop `backdrop-transparent` is true', async () => {
+  it('applies "bg-transparent" class to backdrop when prop `backdrop-transparent` is `true`', async () => {
     const wrapper = mount(BSidebar, {
       attachTo: createContainer(),
       propsData: {

From e2b7dce17d70d59fe9387417cdabfaad27f58298 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 20 May 2020 15:53:54 +0200
Subject: [PATCH 5/9] Update sidebar.spec.js

---
 src/components/sidebar/sidebar.spec.js | 91 +++++---------------------
 1 file changed, 16 insertions(+), 75 deletions(-)

diff --git a/src/components/sidebar/sidebar.spec.js b/src/components/sidebar/sidebar.spec.js
index 7d7bdfe767b..d7ee8282e1a 100644
--- a/src/components/sidebar/sidebar.spec.js
+++ b/src/components/sidebar/sidebar.spec.js
@@ -16,11 +16,8 @@ describe('sidebar', () => {
         visible: true
       }
     })
+
     expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
     const $sidebar = wrapper.find('.b-sidebar')
     expect($sidebar.exists()).toBe(true)
@@ -44,28 +41,17 @@ describe('sidebar', () => {
     expect($sidebar.find('.b-sidebar-body').exists()).toBe(true)
     expect($sidebar.find('.b-sidebar-footer').exists()).toBe(false)
 
-    await wrapper.setProps({
-      visible: false
-    })
-    await waitNT(wrapper.vm)
+    await wrapper.setProps({ visible: false })
     await waitRAF()
-    await waitNT(wrapper.vm)
     await waitRAF()
-
     expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('DIV')
-
     // Check for no presence of `display: none' from `v-show` directive
     expect($sidebar.element).not.toBeVisible()
 
-    await wrapper.setProps({
-      visible: true
-    })
-    await waitNT(wrapper.vm)
+    await wrapper.setProps({ visible: true })
     await waitRAF()
-    await waitNT(wrapper.vm)
     await waitRAF()
-
     expect(wrapper.element.tagName).toBe('DIV')
     // Check for no presence of `display: none' from `v-show` directive
     expect($sidebar.element).toBeVisible()
@@ -85,13 +71,10 @@ describe('sidebar', () => {
     })
 
     expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
     const $sidebar = wrapper.find('.b-sidebar')
     expect($sidebar.exists()).toBe(true)
+
     const $backdrop = wrapper.find('.b-sidebar-backdrop')
     expect($backdrop.exists()).toBe(true)
 
@@ -129,16 +112,12 @@ describe('sidebar', () => {
     })
 
     expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
     const $sidebar = wrapper.find('.b-sidebar')
     expect($sidebar.exists()).toBe(true)
+
     const $backdrop = wrapper.find('.b-sidebar-backdrop')
     expect($backdrop.exists()).toBe(true)
-
     expect($backdrop.classes()).toContain('bg-transparent')
 
     await $backdrop.trigger('click')
@@ -169,42 +148,32 @@ describe('sidebar', () => {
         id: 'test-toggle'
       }
     })
+
     expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
     const $sidebar = wrapper.find('.b-sidebar')
     expect($sidebar.exists()).toBe(true)
-
     expect($sidebar.element.tagName).toBe('DIV')
     expect($sidebar.element).not.toBeVisible()
 
     wrapper.vm.$root.$emit(EVENT_TOGGLE, 'test-toggle')
     await waitNT(wrapper.vm)
     await waitRAF()
-    await waitNT(wrapper.vm)
     await waitRAF()
-
     expect($sidebar.element.tagName).toBe('DIV')
     expect($sidebar.element).toBeVisible()
 
     wrapper.vm.$root.$emit(EVENT_TOGGLE, 'test-toggle')
     await waitNT(wrapper.vm)
     await waitRAF()
-    await waitNT(wrapper.vm)
     await waitRAF()
-
     expect($sidebar.element.tagName).toBe('DIV')
     expect($sidebar.element).not.toBeVisible()
 
     wrapper.vm.$root.$emit(EVENT_TOGGLE, 'foobar')
     await waitNT(wrapper.vm)
     await waitRAF()
-    await waitNT(wrapper.vm)
     await waitRAF()
-
     expect($sidebar.element.tagName).toBe('DIV')
     expect($sidebar.element).not.toBeVisible()
 
@@ -218,24 +187,18 @@ describe('sidebar', () => {
         id: 'test-esc'
       }
     })
+
     expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
     const $sidebar = wrapper.find('.b-sidebar')
     expect($sidebar.exists()).toBe(true)
-
     expect($sidebar.element.tagName).toBe('DIV')
     expect($sidebar.element).not.toBeVisible()
 
     wrapper.vm.$root.$emit(EVENT_TOGGLE, 'test-esc')
     await waitNT(wrapper.vm)
     await waitRAF()
-    await waitNT(wrapper.vm)
     await waitRAF()
-
     expect($sidebar.element.tagName).toBe('DIV')
     expect($sidebar.element).toBeVisible()
 
@@ -269,11 +232,12 @@ describe('sidebar', () => {
         visible: true
       }
     })
+
     expect(wrapper.vm).toBeDefined()
+
     const rootWrapper = createWrapper(wrapper.vm.$root)
     await waitNT(wrapper.vm)
     await waitRAF()
-    await waitNT(wrapper.vm)
     await waitRAF()
     expect(rootWrapper.emitted(EVENT_STATE)).toBeDefined()
     expect(rootWrapper.emitted(EVENT_STATE).length).toBe(1)
@@ -284,6 +248,7 @@ describe('sidebar', () => {
     rootWrapper.vm.$root.$emit(EVENT_STATE_REQUEST, 'test-sync')
     await waitNT(wrapper.vm)
     await waitRAF()
+    await waitRAF()
     expect(rootWrapper.emitted(EVENT_STATE_SYNC)).toBeDefined()
     expect(rootWrapper.emitted(EVENT_STATE_SYNC).length).toBe(1)
     expect(rootWrapper.emitted(EVENT_STATE_SYNC)[0][0]).toBe('test-sync') // ID
@@ -301,12 +266,8 @@ describe('sidebar', () => {
         noHeader: true
       }
     })
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
+    expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.find('.b-sidebar-header').exists()).toBe(false)
     expect(wrapper.find('.b-sidebar-body').exists()).toBe(true)
@@ -324,12 +285,8 @@ describe('sidebar', () => {
         noHeaderClose: true
       }
     })
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
+    expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
     expect(wrapper.find('.b-sidebar-header .close').exists()).toBe(false)
@@ -348,23 +305,15 @@ describe('sidebar', () => {
         lazy: true
       }
     })
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
+    expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
     expect(wrapper.find('.b-sidebar-body').exists()).toBe(false)
     expect(wrapper.find('.b-sidebar-footer').exists()).toBe(false)
 
-    await wrapper.setProps({
-      visible: true
-    })
-    await waitNT(wrapper.vm)
+    await wrapper.setProps({ visible: true })
     await waitRAF()
-    await waitNT(wrapper.vm)
     await waitRAF()
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
@@ -385,12 +334,8 @@ describe('sidebar', () => {
         footer: '<span>FOOTER</span>'
       }
     })
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
+    expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
     expect(wrapper.find('.b-sidebar-body').exists()).toBe(true)
@@ -409,12 +354,8 @@ describe('sidebar', () => {
         title: 'TITLE'
       }
     })
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
+    expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
     expect(wrapper.find('.b-sidebar-header > strong').text()).toEqual('TITLE')

From 3cbc42c23cdcd7dc5efdeb58a55ca50a5deb8469 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 20 May 2020 22:31:32 +0200
Subject: [PATCH 6/9] Migrate to `backdrop-variant` prop

---
 src/components/sidebar/README.md       | 36 +++++++++++++++++++++-----
 src/components/sidebar/_sidebar.scss   |  1 -
 src/components/sidebar/package.json    |  4 +--
 src/components/sidebar/sidebar.js      | 13 ++++++----
 src/components/sidebar/sidebar.spec.js |  5 ++--
 src/utils/config-defaults.js           |  3 ++-
 6 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/src/components/sidebar/README.md b/src/components/sidebar/README.md
index 587903b830d..c874d665103 100644
--- a/src/components/sidebar/README.md
+++ b/src/components/sidebar/README.md
@@ -270,30 +270,52 @@ Add a basic backdrop when the side bar is open via the `backdrop` prop. When set
 sidebar will show an opaque backdrop. Clicking on the backdrop will close the sidebar, unless the
 `no-close-on-backdrop` prop is set to `true`.
 
-Optionally you can add the `backdrop-transparent` prop. When added the backdrop will be transparent,
-but remain clickable. Allowing the user to still close the sidebar by clicking outside of it.
+Optionally you can use the `backdrop-variant` prop to control the theme color variant of the
+backdrop.
 
 ```html
 <template>
   <div>
     <b-button v-b-toggle.sidebar-backdrop>Toggle Sidebar</b-button>
+
     <b-sidebar
       id="sidebar-backdrop"
       title="Sidebar with backdrop"
+      :backdrop-variant="variant"
       backdrop
       shadow
     >
       <div class="px-3 py-2">
-        <p>
-          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-        </p>
-        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
+        <b-form-group label="Backdrop variant" label-for="backdrop-variant">
+          <b-form-select id="backdrop-variant" v-model="variant" :options="variants"></b-form-select>
+        </b-form-group>
       </div>
     </b-sidebar>
   </div>
 </template>
 
+<script>
+  export default {
+    data() {
+      return {
+        variant: 'dark',
+        variants: [
+          'transparent',
+          'white',
+          'light',
+          'dark',
+          'primary',
+          'secondary',
+          'success',
+          'danger',
+          'warning',
+          'info',
+        ]
+      }
+    }
+  }
+</script>
+
 <!-- b-sidebar-backdrop.vue -->
 ```
 
diff --git a/src/components/sidebar/_sidebar.scss b/src/components/sidebar/_sidebar.scss
index 607971cc239..8e4f31fe1a9 100644
--- a/src/components/sidebar/_sidebar.scss
+++ b/src/components/sidebar/_sidebar.scss
@@ -15,7 +15,6 @@
   z-index: -1;
   width: 100vw;
   height: 100vh;
-  background-color: #000;
   opacity: 0.5;
 }
 
diff --git a/src/components/sidebar/package.json b/src/components/sidebar/package.json
index 4f16ce84ce4..8117d7b1b63 100644
--- a/src/components/sidebar/package.json
+++ b/src/components/sidebar/package.json
@@ -77,9 +77,9 @@
             "description": "When `true`, shows a backdrop when the sidebar is open"
           },
           {
-            "prop": "backdropTransparent",
+            "prop": "backdropVariant",
             "version": "2.15.0",
-            "description": "When `true`, makes the backdrop transparent, but remains clickable"
+            "description": "Theme variant color for the backdrop of the sidebar. Defaults to 'dark'"
           },
           {
             "prop": "lazy",
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index 511032ae2b9..911089d1729 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -108,6 +108,7 @@ const renderContent = (h, ctx) => {
   if (ctx.lazy && !ctx.isOpen) {
     return $header
   }
+
   return [$header, renderBody(h, ctx), renderFooter(h, ctx)]
 }
 
@@ -115,10 +116,13 @@ const renderBackdrop = (h, ctx) => {
   if (!ctx.backdrop) {
     return h()
   }
+
+  const { backdropVariant } = ctx
+
   return h('div', {
     directives: [{ name: 'show', value: ctx.localShow }],
     staticClass: 'b-sidebar-backdrop',
-    class: { 'bg-transparent': ctx.backdropTransparent },
+    class: { [`bg-${backdropVariant}`]: !!backdropVariant },
     on: { click: ctx.onBackdropClick }
   })
 }
@@ -202,10 +206,9 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
       type: Boolean,
       default: false
     },
-    backdropTransparent: {
-      // If `true`, makes the backdrop transparent
-      type: Boolean,
-      default: false
+    backdropVariant: {
+      type: String,
+      default: () => getComponentConfig(NAME, 'backdropVariant')
     },
     noSlide: {
       type: Boolean,
diff --git a/src/components/sidebar/sidebar.spec.js b/src/components/sidebar/sidebar.spec.js
index d7ee8282e1a..fb2ef04409f 100644
--- a/src/components/sidebar/sidebar.spec.js
+++ b/src/components/sidebar/sidebar.spec.js
@@ -77,6 +77,7 @@ describe('sidebar', () => {
 
     const $backdrop = wrapper.find('.b-sidebar-backdrop')
     expect($backdrop.exists()).toBe(true)
+    expect($backdrop.classes()).toContain('bg-dark')
 
     await $backdrop.trigger('click')
     await waitRAF()
@@ -99,7 +100,7 @@ describe('sidebar', () => {
     wrapper.destroy()
   })
 
-  it('applies "bg-transparent" class to backdrop when prop `backdrop-transparent` is `true`', async () => {
+  it('applies "bg-*" class to backdrop based on `backdrop-variant` prop', async () => {
     const wrapper = mount(BSidebar, {
       attachTo: createContainer(),
       propsData: {
@@ -107,7 +108,7 @@ describe('sidebar', () => {
         noCloseOnBackdrop: true,
         visible: true,
         backdrop: true,
-        backdropTransparent: true
+        backdropVariant: 'transparent'
       }
     })
 
diff --git a/src/utils/config-defaults.js b/src/utils/config-defaults.js
index e896f67248c..cca20f4328c 100644
--- a/src/utils/config-defaults.js
+++ b/src/utils/config-defaults.js
@@ -241,7 +241,8 @@ export default deepFreeze({
     textVariant: 'dark',
     shadow: false,
     width: undefined,
-    tag: 'div'
+    tag: 'div',
+    backdropVariant: 'dark'
   },
   BTable: {
     selectedVariant: 'active',

From ad088eb44c29b75f4ba46ba9f09c77d772cf5c23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 20 May 2020 22:44:03 +0200
Subject: [PATCH 7/9] Update _sidebar.scss

---
 src/components/sidebar/_sidebar.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar/_sidebar.scss b/src/components/sidebar/_sidebar.scss
index 8e4f31fe1a9..52fe74bb625 100644
--- a/src/components/sidebar/_sidebar.scss
+++ b/src/components/sidebar/_sidebar.scss
@@ -15,7 +15,7 @@
   z-index: -1;
   width: 100vw;
   height: 100vh;
-  opacity: 0.5;
+  opacity: 0.6;
 }
 
 .b-sidebar {

From 05b25b7c1bf1e6d9f0e4198f5a6c5983713187c4 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Wed, 20 May 2020 18:09:08 -0300
Subject: [PATCH 8/9] Update README.md

---
 src/components/sidebar/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/README.md b/src/components/sidebar/README.md
index c874d665103..0b568f4113f 100644
--- a/src/components/sidebar/README.md
+++ b/src/components/sidebar/README.md
@@ -270,8 +270,8 @@ Add a basic backdrop when the side bar is open via the `backdrop` prop. When set
 sidebar will show an opaque backdrop. Clicking on the backdrop will close the sidebar, unless the
 `no-close-on-backdrop` prop is set to `true`.
 
-Optionally you can use the `backdrop-variant` prop to control the theme color variant of the
-backdrop.
+Optionally (as of BootstrapVue v2.15.0+) you can use the `backdrop-variant` prop to control the theme
+color variant of the backdrop. The default backdrop variant is `dark`.
 
 ```html
 <template>

From 4f739e34cb232b9c8129dd88467ee2769cd24df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Wed, 20 May 2020 23:43:50 +0200
Subject: [PATCH 9/9] Update README.md

---
 src/components/sidebar/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sidebar/README.md b/src/components/sidebar/README.md
index 0b568f4113f..df61be29cde 100644
--- a/src/components/sidebar/README.md
+++ b/src/components/sidebar/README.md
@@ -270,8 +270,8 @@ Add a basic backdrop when the side bar is open via the `backdrop` prop. When set
 sidebar will show an opaque backdrop. Clicking on the backdrop will close the sidebar, unless the
 `no-close-on-backdrop` prop is set to `true`.
 
-Optionally (as of BootstrapVue v2.15.0+) you can use the `backdrop-variant` prop to control the theme
-color variant of the backdrop. The default backdrop variant is `dark`.
+Optionally (as of BootstrapVue v2.15.0+) you can use the `backdrop-variant` prop to control the
+theme color variant of the backdrop. The default backdrop variant is `dark`.
 
 ```html
 <template>