feat(modal): Add Bootstrap V4 anticipated verticaly centered modal (#…

…1246) * feat(modal): Add Bootstrap V4 anticipated verticaly centered modal Vertically centered modals will be coming in Bootstrap V4.beta.3 This adds a new prop `centered` which renders the modal centered vertically. twbs/bootstrap#24510 Note vertically centered modals are **not** suited for tall content modals, as there is a potential for the header (or top part of the modal) to become inaccessible). They are better suited to one or two line content (i.e. confirmation dialogs). The custom CSS in modal.vue can be removed once V4.beta.3 (or later) arrives * update modal docs * SpellCheck :scroll:
bootstrap-vue · Oct 26, 2017 · 4a8ce2c · 4a8ce2c
1 parent a3a9aa5
commit 4a8ce2c
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 3 deletions.
diff --git a/docs/components/modal/README.md b/docs/components/modal/README.md
@@ -270,10 +270,36 @@ breakpoints to avoid horizontal scrollbars on narrower viewports. Valid optional
 
 <!-- modal-sizes.vue -->
 ```
+
+
+## Vertically centering
+Vertically center your modal in the viewport by setting the `center` prop.
+
+```html
+<div>
+  <b-btn v-b-modal.modal-center>Launch centered modal</b-btn>
+
+  <!-- Modal Component -->
+  <b-modal id="modal-center" center title="Bootstrap-Vue">
+    <p class="my-4">Vertically centered modal!</p>
+  </b-modal>
+</div>
+
+<!-- modal-center-v.vue -->
+```
+
+**Warning:** Vertically centered modals are not suited for when the content is tall.
+They are best suited when the content is only one or two lines, such as Yes/No or
+OK/Cancel confirmation dialogs. When the resultant modal is taller than the viewport,
+the modal header (and parts of the top of the modal content) will become inaccessible.
+This issue becomes more prevalent on smaller screens.
+
+
 ## Using the grid
 Utilize the Bootstrap grid system within a modal by nesting `<b-container fluid>` within
-the modal-body. Then, use the normal grid system `<b-row>` and `<b-col>` as you would
-anywhere else.
+the modal-body. Then, use the normal grid system `<b-row>` (or `<b-form-row>`) and `<b-col>`
+as you would anywhere else.
+
 
 ## Tooltips and popovers
 Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips
@@ -302,6 +328,7 @@ they are appended by specifying a container ID (refer to tooltip and popover doc
 <!-- modal-popover.vue -->
 ```
 
+
 ## Variants
 Control the header, footer, and body background and text variants by setting the
 `header-bg-variant`, `header-text-variant`, `body-bg-variant`, `body-text-variant`,
@@ -375,6 +402,7 @@ export default {
 <!-- modal-variant-1.vue -->
 ```
 
+
 ## Lazy loading
 Modal will always render its HTML markup in the document at the location that
 the `<b-modal>` component is placed (even if it is not shown). You can hide
@@ -475,6 +503,7 @@ event's `target` property:
 **Note:** If the `<b-modal>` has the `return-focus` prop set, then the element specified
 via the event will be ignored.
 
+
 ## Keyboard Navigation
 
 When tabbing through elements within a `<b-modal>`, if focus attempts to leave the modal into the document,
@@ -483,4 +512,5 @@ it  will be brought back into the modal.
 In some circumstances, you may need to disable the enforce focus feature. You can do this
 by setting the prop `no-enforce-focus`.
 
+
 ## Component Reference
diff --git a/lib/components/modal.vue b/lib/components/modal.vue
@@ -82,6 +82,24 @@
     </div>
 </template>
 
+<style>
+    /*
+      This can be removed once Bootstrap V4.beta.3 is released
+      https://github.com/twbs/bootstrap/pull/24510
+      Vertically centered modals are not suited to tall content (the header gets cut off)
+    */
+    .modal-dialog-centered {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+    }
+    .modal-dialog-centered .modal-content {
+        width: 100%;
+    }
+</style>
+
 <script>
     import bBtn from './button';
     import bBtnClose from './button-close';
@@ -136,6 +154,10 @@
                 type: String,
                 default: 'md'
             },
+            centered: {
+                type: Boolean,
+                default: false
+            },
             buttonSize: {
                 type: String,
                 default: ''
@@ -267,7 +289,8 @@
                 return [
                     'modal-dialog',
                     {
-                        [`modal-${this.size}`]: Boolean(this.size)
+                        [`modal-${this.size}`]: Boolean(this.size),
+                        'modal-dialog-centered': this.centered
                     }
                 ];
             },