Add dropright (right placement for our dropdown)

twbs · Sep 7, 2017 · 5984e9e · 5984e9e
1 parent 7983ba9
commit 5984e9e
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 3 deletions.
diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
@@ -410,6 +410,67 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 </div>
 {% endhighlight %}
 
+## Dropright variation
+
+Trigger dropdown menus at the right of the elements by adding `.dropright` to the parent element.
+
+<div class="bd-example">
+  <div class="btn-group dropright">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Dropright
+    </button>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
+  </div>
+
+  <div class="btn-group dropright">
+    <button type="button" class="btn btn-secondary">
+      Split dropright
+    </button>
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <span class="sr-only">Toggle Dropdright</span>
+    </button>
+    <div class="dropdown-menu">
+      <a class="dropdown-item" href="#">Action</a>
+      <a class="dropdown-item" href="#">Another action</a>
+      <a class="dropdown-item" href="#">Something else here</a>
+      <div class="dropdown-divider"></div>
+      <a class="dropdown-item" href="#">Separated link</a>
+    </div>
+  </div>
+</div>
+
+{% highlight html %}
+<!-- Default dropright button -->
+<div class="btn-group dropright">
+  <button type="button" class="btn btn-secondary">Dropright</button>
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdright</span>
+  </button>
+  <div class="dropdown-menu">
+    <!-- Dropdown menu links -->
+  </div>
+</div>
+
+<!-- Split dropright button -->
+<div class="btn-group dropright">
+  <button type="button" class="btn btn-secondary">
+    Split dropright
+  </button>
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropdright</span>
+  </button>
+  <div class="dropdown-menu">
+    <!-- Dropdown menu links -->
+  </div>
+</div>
+{% endhighlight %}
+
 ## Menu items
 
 Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -55,6 +55,7 @@ const Dropdown = (() => {
     DISABLED  : 'disabled',
     SHOW      : 'show',
     DROPUP    : 'dropup',
+    DROPRIGHT : 'dropright',
     MENURIGHT : 'dropdown-menu-right',
     MENULEFT  : 'dropdown-menu-left'
   }
@@ -71,7 +72,9 @@ const Dropdown = (() => {
     TOP       : 'top-start',
     TOPEND    : 'top-end',
     BOTTOM    : 'bottom-start',
-    BOTTOMEND : 'bottom-end'
+    BOTTOMEND : 'bottom-end',
+    RIGHT     : 'right-start',
+    RIGHTEND  : 'right-end'
   }
 
   const Default = {
@@ -234,14 +237,15 @@ const Dropdown = (() => {
 
     _getPlacement() {
       const $parentDropdown = $(this._element).parent()
-      let placement = this._config.placement
-
+      let placement         = this._config.placement
       // Handle dropup
       if ($parentDropdown.hasClass(ClassName.DROPUP) || this._config.placement === AttachmentMap.TOP) {
         placement = AttachmentMap.TOP
         if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
           placement = AttachmentMap.TOPEND
         }
+      } else if ($parentDropdown.hasClass(ClassName.DROPRIGHT) || this._config.placement === AttachmentMap.RIGHT) {
+        placement = AttachmentMap.RIGHT
       } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
         placement = AttachmentMap.BOTTOMEND
       }

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
@@ -93,6 +93,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
         </div>
+
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup" role="group">
             <a href="#" class="btn btn-secondary">Dropup split align right</a>
@@ -114,8 +115,33 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
         </div>
+
+        <div class="col-sm-12 mt-4">
+          <div class="btn-group dropright" role="group">
+            <a href="#" class="btn btn-secondary">Dropright split</a>
+            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <span class="sr-only">Product actions</span>
+            </button>
+            <div class="dropdown-menu">
+              <button class="dropdown-item" type="button">Action</button>
+              <button class="dropdown-item" type="button">Another action</button>
+              <button class="dropdown-item" type="button">Something else here with a long text</button>
+            </div>
+          </div>
+          <div class="btn-group dropright">
+            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Dropright
+            </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuRight">
+              <button class="dropdown-item" type="button">Action</button>
+              <button class="dropdown-item" type="button">Another action</button>
+              <button class="dropdown-item" type="button">Something else here</button>
+            </div>
+          </div>
         </div>
+
       </div>
+    </div>
 
     <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
     <script src="../../../assets/js/vendor/popper.min.js"></script>

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -39,6 +39,21 @@
   }
 }
 
+.dropright {
+  .dropdown-menu {
+    margin-top: -1px;
+  }
+
+  .dropdown-toggle {
+    &::after {
+      vertical-align: 0;
+      border-top: $caret-width solid transparent;
+      border-bottom: $caret-width solid transparent;
+      border-left: $caret-width solid;
+    }
+  }
+}
+
 // The dropdown menu
 .dropdown-menu {
   position: absolute;