feat(b-sidebar): add prop backdrop-variant (#5411)

Hiws · jacobmllr95 · tmorehouse · web-flow · commit 4b0c163156b6 · 2020-05-20T23:49:42.000+02:00
* initial take

* Update sidebar.js

* Update package.json

* Update sidebar.spec.js

* Update sidebar.spec.js

* Migrate to `backdrop-variant` prop

* Update _sidebar.scss

* Update README.md

* Update README.md

Co-authored-by: Rasmus Nielsen &lt;rni@nova-c.dk&gt;
Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
Co-authored-by: Troy Morehouse &lt;troymore@nbnet.nb.ca&gt;
diff --git a/src/components/sidebar/README.md b/src/components/sidebar/README.md
@@ -270,27 +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 (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>
   <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
@@ -15,8 +15,7 @@
   z-index: -1;
   width: 100vw;
   height: 100vh;
-  background-color: #000;
-  opacity: 0.5;
+  opacity: 0.6;
 }
 
 .b-sidebar {
diff --git 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": "backdropVariant",
+            "version": "2.15.0",
+            "description": "Theme variant color for the backdrop of the sidebar. Defaults to 'dark'"
+          },
           {
             "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
@@ -108,16 +108,21 @@ const renderContent = (h, ctx) => {
   if (ctx.lazy && !ctx.isOpen) {
     return $header
   }
+
   return [$header, renderBody(h, ctx), renderFooter(h, ctx)]
 }
 
 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-${backdropVariant}`]: !!backdropVariant },
     on: { click: ctx.onBackdropClick }
   })
 }
@@ -197,10 +202,14 @@ 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
     },
+    backdropVariant: {
+      type: String,
+      default: () => getComponentConfig(NAME, 'backdropVariant')
+    },
     noSlide: {
       type: Boolean,
       default: false
diff --git a/src/components/sidebar/sidebar.spec.js b/src/components/sidebar/sidebar.spec.js
diff --git a/src/utils/config-defaults.js b/src/utils/config-defaults.js

Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,7 @@`
`15`	`15`	`z-index: -1;`
`16`	`16`	`width: 100vw;`
`17`	`17`	`height: 100vh;`
`18`		`- background-color: #000;`
`19`		`- opacity: 0.5;`
	`18`	`+ opacity: 0.6;`
`20`	`19`	`}`
`21`	`20`
`22`	`21`	`.b-sidebar {`