feat(modal): Add props to change the variant of the default modal buttons (bootstrap-vue#1004)

zagto · tmorehouse · commit 36acf4e64d85 · 2017-09-06T16:45:46.000-03:00
* Add props to set variant of modal footer buttons

* update docs
diff --git a/docs/components/modal/README.md b/docs/components/modal/README.md
@@ -61,7 +61,8 @@ They support a number of use cases from user notification to completely custom c
 
 `<b-modal>`, by default, has an **OK** and a **Close** button in the footer. These buttons can
 be customized by setting various props on the component. You can customize the size of the buttons,
-disable the **OK** button, hide the **Close** button (i.e. OK Only), and provide custom
+disable the **OK** button, hide the **Close** button (i.e. OK Only), choose a variant (e.g. `danger`
+for a red OK button) using the `ok-variant` and `close-variant` props, and provide custom
 button content using the `ok-title` and `close-title` props, or using the named
 slots `modal-ok` and `modal-cancel`.
 
diff --git a/lib/components/modal.vue b/lib/components/modal.vue
@@ -55,11 +55,11 @@
                         <footer class="modal-footer" ref="footer" v-if="!hideFooter">
                             <slot name="modal-footer">
                                 <b-btn v-if="!okOnly"
-                                       variant="secondary"
+                                       :variant="closeVariant"
                                        :size="buttonSize"
                                        @click="hide(false)"
                                 ><slot name="modal-cancel">{{ closeTitle }}</slot></b-btn>
-                                <b-btn variant="primary"
+                                <b-btn :variant="okVariant"
                                        :size="buttonSize"
                                        :disabled="okDisabled"
                                        @click="hide(true)"
@@ -239,6 +239,14 @@
             okTitle: {
                 type: String,
                 default: 'OK'
+            },
+            closeVariant: {
+                type: String,
+                default: 'secondary'
+            },
+            okVariant: {
+                type: String,
+                default: 'primary'
             }
         },
         methods: {
