Add dropleft

twbs · Oct 18, 2017 · 7f35892 · 7f35892
1 parent 4d364d0
commit 7f35892
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 3 deletions.
diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md
@@ -450,7 +450,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
 <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>
+    <span class="sr-only">Toggle Dropright</span>
   </button>
   <div class="dropdown-menu">
     <!-- Dropdown menu links -->
@@ -463,7 +463,68 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
     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>
+    <span class="sr-only">Toggle Dropright</span>
+  </button>
+  <div class="dropdown-menu">
+    <!-- Dropdown menu links -->
+  </div>
+</div>
+{% endhighlight %}
+
+## Dropleft variation
+
+Trigger dropdown menus at the left of the elements by adding `.dropleft` to the parent element.
+
+<div class="bd-example">
+  <div class="btn-group dropleft">
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Dropleft
+    </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 dropleft">
+    <button type="button" class="btn btn-secondary">
+      Split dropleft
+    </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 Dropleft</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 dropleft button -->
+<div class="btn-group dropleft">
+  <button type="button" class="btn btn-secondary">Dropleft</button>
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropleft</span>
+  </button>
+  <div class="dropdown-menu">
+    <!-- Dropdown menu links -->
+  </div>
+</div>
+
+<!-- Split dropleft button -->
+<div class="btn-group dropleft">
+  <button type="button" class="btn btn-secondary">
+    Split dropleft
+  </button>
+  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <span class="sr-only">Toggle Dropleft</span>
   </button>
   <div class="dropdown-menu">
     <!-- Dropdown menu links -->

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -56,6 +56,7 @@ const Dropdown = (() => {
     SHOW      : 'show',
     DROPUP    : 'dropup',
     DROPRIGHT : 'dropright',
+    DROPLEFT  : 'dropleft',
     MENURIGHT : 'dropdown-menu-right',
     MENULEFT  : 'dropdown-menu-left'
   }
@@ -74,7 +75,9 @@ const Dropdown = (() => {
     BOTTOM    : 'bottom-start',
     BOTTOMEND : 'bottom-end',
     RIGHT     : 'right-start',
-    RIGHTEND  : 'right-end'
+    RIGHTEND  : 'right-end',
+    LEFT      : 'left-start',
+    LEFTEND   : 'left-end'
   }
 
   const Default = {
@@ -240,6 +243,8 @@ const Dropdown = (() => {
         }
       } else if ($parentDropdown.hasClass(ClassName.DROPRIGHT)) {
         placement = AttachmentMap.RIGHT
+      } else if ($parentDropdown.hasClass(ClassName.DROPLEFT)) {
+        placement = AttachmentMap.LEFT
       } else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
         placement = AttachmentMap.BOTTOMEND
       }

diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
@@ -138,6 +138,28 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
               <button class="dropdown-item" type="button">Something else here</button>
             </div>
           </div>
+          <!-- dropleft -->
+          <div class="btn-group dropleft" role="group">
+            <a href="#" class="btn btn-secondary">Dropleft split</a>
+            <button type="button" id="dropdown-page-subheader-button-5" 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 dropleft">
+            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Dropleft
+            </button>
+            <div class="dropdown-menu" aria-labelledby="dropleftMenu">
+              <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>

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -58,6 +58,20 @@
   }
 }
 
+.dropleft {
+  .dropdown-menu {
+    margin-top: 0;
+    margin-right: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(left);
+    &::after {
+      vertical-align: 0;
+    }
+  }
+}
+
 // Dividers (basically an `<hr>`) within the dropdown
 .dropdown-divider {
   @include nav-divider($dropdown-divider-bg);

diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
@@ -18,6 +18,12 @@
   border-left: $caret-width solid;
 }
 
+@mixin caret-left {
+  border-top: $caret-width solid transparent;
+  border-right: $caret-width solid;
+  border-bottom: $caret-width solid transparent;
+}
+
 @mixin caret($direction: down) {
   @if $enable-caret {
     &::after {
@@ -33,6 +39,8 @@
         @include caret-up;
       } @else if $direction == right {
         @include caret-right;
+      } @else if $direction == left {
+        @include caret-left;
       }
     }