feat(modal): new props for adding classes to header, body and footer (bootstrap-vue#1462)

tmorehouse · web-flow · commit bc67a2d7f3cb · 2017-12-14T03:40:46.000-04:00
* feat(modal): new props for adding classes to header, body and footer

* Update README.md
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
@@ -172,7 +172,7 @@ methods: {
 ```
 
 
-## Prevent Closing
+### Prevent Closing
 
 To prevent `<b-modal>` from closing (for example when validation fails). you can call
 the `preventDefault()` method of the event object passed to your `ok` (**OK** button),
@@ -407,6 +407,9 @@ export default {
 <!-- modal-variant-1.vue -->
 ```
 
+You can also apply abritrary classes to the modal header, body and footer via the
+`header-class`, `body-class` and `footer-class` props, respectively. The props
+accept either a string or array of strings.
 
 ## Lazy loading
 Modal will always render its HTML markup in the document at the location that
diff --git a/src/components/modal/_modal.js b/src/components/modal/_modal.js
@@ -267,6 +267,10 @@ export default {
       type: String,
       default: null
     },
+    headerClass: {
+      type: [String, Array],
+      default: null
+    },
     bodyBgVariant: {
       type: String,
       default: null
@@ -275,6 +279,10 @@ export default {
       type: String,
       default: null
     },
+    bodyClass: {
+      type: [String, Array],
+      default: null
+    },
     footerBgVariant: {
       type: String,
       default: null
@@ -287,6 +295,10 @@ export default {
       type: String,
       default: null
     },
+    footerClass: {
+      type: [String, Array],
+      default: null
+    },
     hideHeader: {
       type: Boolean,
       default: false
@@ -387,7 +399,8 @@ export default {
           [`bg-${this.headerBgVariant}`]: Boolean(this.headerBgVariant),
           [`text-${this.headerTextVariant}`]: Boolean(this.headerTextVariant),
           [`border-${this.headerBorderVariant}`]: Boolean(this.headerBorderVariant)
-        }
+        },
+        this.headerClass
       ]
     },
     bodyClasses () {
@@ -396,7 +409,8 @@ export default {
         {
           [`bg-${this.bodyBgVariant}`]: Boolean(this.bodyBgVariant),
           [`text-${this.bodyTextVariant}`]: Boolean(this.bodyTextVariant)
-        }
+        },
+        this.bodyClass
       ]
     },
     footerClasses () {
@@ -406,7 +420,8 @@ export default {
           [`bg-${this.footerBgVariant}`]: Boolean(this.footerBgVariant),
           [`text-${this.footerTextVariant}`]: Boolean(this.footerTextVariant),
           [`border-${this.footerBorderVariant}`]: Boolean(this.footerBorderVariant)
-        }
+        },
+        this.footerClass
       ]
     }
   },
