feat(Dropdown): support dropright and dropleft variations for Bootstr…

…ap 4.0.0-beta.3

Closes #517

addon/components/base/bs-dropdown.js

@@ -125,6 +125,7 @@ export default Component.extend({
 
   /**
    * By default the dropdown menu will expand downwards. Set to 'up' to expand upwards.
+   * BS4 also allows 'left' and 'right'
    *
    * @property direction
    * @type string
@@ -145,6 +146,7 @@ export default Component.extend({
 
   /**
    * A computed property to generate the suiting class for the dropdown container, either "dropdown", "dropup" or "btn-group".
+   * BS4 only: "dropleft", "dropright"
    *
    * @property containerClass
    * @type string
@@ -153,9 +155,9 @@ export default Component.extend({
    */
   containerClass: computed('toggle.tagName', 'direction', function() {
     if (this.get('toggle.tagName') === 'button' && !this.get('toggle.block')) {
-      return this.get('direction') === 'up' ? 'btn-group dropup' : 'btn-group';
+      return this.get('direction') !== 'down' ? `btn-group drop${this.get('direction')}` : 'btn-group';
     } else {
-      return this.get('direction') === 'up' ? 'dropup' : 'dropdown';
+      return `drop${this.get('direction')}`;
     }
   }),
 

addon/components/bs4/bs-dropdown/menu.js

@@ -21,13 +21,18 @@ export default DropdownMenu.extend({
 
   popperPlacement: computed('direction', 'align', function() {
     let placement = 'bottom-start';
+    let { direction, align } = this.getProperties('direction', 'align');
 
-    if (this.get('direction') === 'up') {
+    if (direction === 'up') {
       placement = 'top-start';
-      if (this.get('align') === 'right') {
+      if (align === 'right') {
         placement = 'top-end';
       }
-    } else if (this.get('align') === 'right') {
+    } else if (direction === 'left') {
+      placement = 'left-start';
+    } else if (direction === 'right') {
+      placement = 'right-start';
+    } else if (align === 'right') {
       placement = 'bottom-end';
     }
     return placement;

tests/integration/components/bs-dropdown-test.js

@@ -7,7 +7,8 @@ import {
   isHidden,
   isVisible,
   openClass,
-  test
+  test,
+  testBS4
 } from '../../helpers/bootstrap-test';
 import hbs from 'htmlbars-inline-precompile';
 
@@ -31,6 +32,18 @@ module('Integration | Component | bs-dropdown', function(hooks) {
     assert.dom(':first-child').hasClass('dropup', 'has dropup class');
   });
 
+  testBS4('dropdown container supports dropright style', async function(assert) {
+    await render(hbs`{{#bs-dropdown direction="right"}}Test{{/bs-dropdown}}`);
+
+    assert.dom(':first-child').hasClass('dropright', 'has dropright class');
+  });
+
+  testBS4('dropdown container supports dropleft style', async function(assert) {
+    await render(hbs`{{#bs-dropdown direction="left"}}Test{{/bs-dropdown}}`);
+
+    assert.dom(':first-child').hasClass('dropleft', 'has dropleft class');
+  });
+
   test('dropdown container with dropdown button has btn-group class', async function(assert) {
     await render(
       hbs`{{#bs-dropdown as |dd|}}{{#dd.button}}Dropdown <span class="caret"></span>{{/dd.button}}{{#dd.menu}}<li><a href="#">Something</a></li>{{/dd.menu}}{{/bs-dropdown}}`