feat(dropfoen): Add dropright and dropleft direction support (#2117)

This commit adds support for the dropright` and `dropleft` directions for the dropdown component. Closes #2108.
bootstrap-vue · Oct 29, 2018 · e186639 · e186639
1 parent e39a855
commit e186639
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 14 deletions.
diff --git a/src/components/dropdown/README.md b/src/components/dropdown/README.md
@@ -136,7 +136,7 @@ Turn your dropdown menu into a drop-up menu by setting the `dropup` prop.
 
 ```html
 <div>
-  <b-dropdown id="ddown-dropup" dropup text="Drop-Up" variant="info" class="m-2">
+  <b-dropdown id="ddown-dropup" dropup text="Drop-Up" variant="primary" class="m-2">
     <b-dropdown-item href="#">Action</b-dropdown-item>
     <b-dropdown-item href="#">Another action</b-dropdown-item>
     <b-dropdown-item href="#">Something else here</b-dropdown-item>
@@ -146,6 +146,36 @@ Turn your dropdown menu into a drop-up menu by setting the `dropup` prop.
 <!-- dropdown-dropup.vue -->
 ```
 
+### Dropright
+Turn your dropdown menu into a drop-right menu by setting the `dropright` prop.
+
+```html
+<div>
+  <b-dropdown id="ddown-dropright" dropright text="Drop-Right" variant="primary" class="m-2">
+    <b-dropdown-item href="#">Action</b-dropdown-item>
+    <b-dropdown-item href="#">Another action</b-dropdown-item>
+    <b-dropdown-item href="#">Something else here</b-dropdown-item>
+  </b-dropdown>
+</div>
+
+<!-- dropdown-dropright.vue -->
+```
+
+### Dropleft
+Turn your dropdown menu into a drop-right menu by setting the `dropleft` prop.
+
+```html
+<div>
+  <b-dropdown id="ddown-dropleft" dropleft text="Drop-Left" variant="primary" class="m-2">
+    <b-dropdown-item href="#">Action</b-dropdown-item>
+    <b-dropdown-item href="#">Another action</b-dropdown-item>
+    <b-dropdown-item href="#">Something else here</b-dropdown-item>
+  </b-dropdown>
+</div>
+
+<!-- dropdown-dropleft.vue -->
+```
+
 ### Auto "flipping"
 By default, dropdowns may flip to the top, or to the bottom, based on
 their current position in the viewport. To disable this auto-flip feature, set

diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -124,20 +124,29 @@ export default {
   },
   computed: {
     dropdownClasses () {
-      let position = ''
       // Position `static` is needed to allow menu to "breakout" of the scrollParent boundaries
       // when boundary is anything other than `scrollParent`
       // See https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
-      if (this.boundary !== 'scrollParent' || !this.boundary) {
-        position = 'position-static'
+      const positionStatic = this.boundary !== 'scrollParent' || !this.boundary
+
+      let direction = ''
+      if (this.dropup) {
+        direction = 'dropup'
+      } else if (this.dropright) {
+        direction = 'dropright'
+      } else if (this.dropleft) {
+        direction = 'dropleft'
       }
+
       return [
         'btn-group',
         'b-dropdown',
         'dropdown',
-        this.dropup ? 'dropup' : '',
-        this.visible ? 'show' : '',
-        position
+        direction,
+        {
+          show: this.visible,
+          'position-static': positionStatic
+        }
       ]
     },
     menuClasses () {

diff --git a/src/components/dropdown/fixtures/dropdown.html b/src/components/dropdown/fixtures/dropdown.html
@@ -97,4 +97,28 @@
         <b-dropdown-item href="#">Action</b-dropdown-item>
         <b-dropdown-item href="#">Another action</b-dropdown-item>
     </b-dropdown>
+
+    <br><br>
+
+    <b-dropdown ref="dd_11"
+                text="Drop-Right"
+                dropright
+                variant="primary"
+                class="m-md-2">
+        <b-dropdown-item href="#">Action</b-dropdown-item>
+        <b-dropdown-item href="#">Another action</b-dropdown-item>
+        <b-dropdown-item href="#">Something else here</b-dropdown-item>
+    </b-dropdown>
+
+    <br><br>
+
+    <b-dropdown ref="dd_12"
+                text="Drop-Left"
+                dropleft
+                variant="primary"
+                class="m-md-2">
+        <b-dropdown-item href="#">Action</b-dropdown-item>
+        <b-dropdown-item href="#">Another action</b-dropdown-item>
+        <b-dropdown-item href="#">Something else here</b-dropdown-item>
+    </b-dropdown>
 </div>
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js
@@ -46,6 +46,16 @@ export default {
       type: Boolean,
       default: false
     },
+    dropright: {
+      // place right if possible
+      type: Boolean,
+      default: false
+    },
+    dropleft: {
+      // place left if possible
+      type: Boolean,
+      default: false
+    },
     right: {
       // Right align menu (default is left align)
       type: Boolean,
@@ -198,14 +208,13 @@ export default {
     },
     getPopperConfig /* istanbul ignore next: can't test popper in JSDOM */ () {
       let placement = AttachmentMap.BOTTOM
-      if (this.dropup && this.right) {
-        // dropup + right
-        placement = AttachmentMap.TOPEND
-      } else if (this.dropup) {
-        // dropup + left
-        placement = AttachmentMap.TOP
+      if (this.dropup) {
+        placement = this.right ? AttachmentMap.TOPEND : AttachmentMap.TOP
+      } else if (this.dropright) {
+        placement = AttachmentMap.RIGHT
+      } else if (this.dropleft) {
+        placement = AttachmentMap.LEFT
       } else if (this.right) {
-        // dropdown + right
         placement = AttachmentMap.BOTTOMEND
       }
       const popperConfig = {