From d3253dd10e8f6fd6fc4b654c262d51c5df62793c Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Mon, 28 Mar 2016 14:46:33 -0500
Subject: [PATCH] #950 - refine samples and move dropdowns to btn-group for
 more consistent alignment - see twbs/bootstrap#18852

---
 docs/material-design/menus.md | 42 ++++++++++-----
 scss/_dropdown.scss           | 99 +++++++++++++++++------------------
 2 files changed, 79 insertions(+), 62 deletions(-)

diff --git a/docs/material-design/menus.md b/docs/material-design/menus.md
index 4cd0eebb..0f92d54c 100644
--- a/docs/material-design/menus.md
+++ b/docs/material-design/menus.md
@@ -19,7 +19,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
   <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
-  <div class="dropdown-menu" aria-labelledby="ex1">
+  <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex1">
     <button class="dropdown-item" type="button">Action</button>
     <button class="dropdown-item disabled" type="button">Another action</button>
     <button class="dropdown-item" type="button">Another action</button>
@@ -29,11 +29,11 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 
 ### Icon with links
 {% example html %}
-<div class="dropdown">
+<div class="btn-group">
   <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>  
-  <div class="dropdown-menu" aria-labelledby="ex2">
+  <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex2">
     <a class="dropdown-item" href="#">Regular link</a>
     <a class="dropdown-item disabled" href="#">Disabled link</a>
     <a class="dropdown-item" href="#">Another link</a>
@@ -43,11 +43,11 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 
 ### Small fab
 {% example html %}
-<div class="dropdown">
+<div class="btn-group">
   <button class="btn bmd-btn-fab bmd-btn-fab-sm dropdown-toggle" type="button" id="ex3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
-  <div class="dropdown-menu" aria-labelledby="ex3">
+  <div class="dropdown-menu  dropdown-menu-left" aria-labelledby="ex3">
     <button class="dropdown-item" type="button">Action</button>
     <button class="dropdown-item" type="button">Another action</button>
   </div>
@@ -56,11 +56,11 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 
 ### Default fab
 {% example html %}
-<div class="dropdown">
+<div class="btn-group">
   <button class="btn bmd-btn-fab dropdown-toggle" type="button" id="ex4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
-  <div class="dropdown-menu" aria-labelledby="ex4">
+  <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex4">
     <button class="dropdown-item" type="button">Action</button>
     <button class="dropdown-item" type="button">Another action</button>
   </div>
@@ -70,7 +70,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 
 ### Default button
 {% example html %}
-<div class="dropdown open">
+<div class="btn-group open">
   <button class="btn dropdown-toggle" type="button" id="buttonMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown
   </button>
@@ -87,11 +87,11 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 
 ### Lower left side
 {% example html %}
-<div class="dropdown open">
+<div class="btn-group open">
   <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ll1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
-  <div class="dropdown-menu" aria-labelledby="ll1">
+  <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ll1">
     <button class="dropdown-item" type="button">Action</button>
     <button class="dropdown-item" type="button">Another action</button>
     <button class="dropdown-item disabled" type="button">Disabled action</button>
@@ -102,6 +102,8 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 {% endexample %}
 
 ### Lower right side
+
+`dropdown` usage misaligned - see [upstream Bootstrap issue #18552](https://github.com/twbs/bootstrap/issues/18852#issuecomment-202524375).  Use `btn-group` instead until issue is resolved (next example).
 {% example html %}
 <div class="dropdown open pull-xs-right">
   <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="lr1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -118,12 +120,28 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 {% endexample %}
 
 
+`btn-group` usage works fine in this alignment.
+{% example html %}
+<div class="btn-group open pull-xs-right">
+  <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="lr2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="material-icons">more_vert</i>
+  </button>
+  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="lr2">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+    <button class="dropdown-item disabled" type="button">Disabled action</button>
+    <div class="dropdown-divider"> </div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+{% endexample %}
+
 ## Widths
 
 ### Minimum width
 
 {% example html %}
-<div class="dropdown open pull-xs-right">
+<div class="btn-group open pull-xs-right">
   <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="mw1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
@@ -138,7 +156,7 @@ Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdown
 ### Maximum width
 
 {% example html %}
-<div class="dropdown open pull-xs-right">
+<div class="btn-group open pull-xs-right">
   <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="mw2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <i class="material-icons">more_vert</i>
   </button>
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 15e8817c..1ba091c6 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -1,17 +1,17 @@
 // Menus https://www.google.com/design/spec/components/menus.html#menus-specs
 // Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
 
-//%menu-bottom-left {
-//  top: 100%;
-//  left: 0;
-//  transform-origin: 0 0;
-//}
-//
-//%menu-bottom-right {
-//  right: 0;
-//  left: auto;
-//  transform-origin: 100% 0;
-//}
+@mixin menu-bottom-left {
+  top: 100%;
+  left: 0;
+  transform-origin: 0 0;
+}
+
+@mixin menu-bottom-right {
+  right: 0;
+  left: auto;
+  transform-origin: 100% 0;
+}
 
 .dropdown-menu {
   display: block; // utilize transition transform instead of flipping display
@@ -29,19 +29,18 @@
     transform: scale(1);
   }
 
-  // Default the alignment on the button to bottom right
-  //@extend %menu-bottom-right;
+  // Default the alignment of the dropdown to originate on the bottom right of the button
+  @include menu-bottom-right();
   // FIXME: bootstrap alignment issue - https://github.com/twbs/bootstrap/issues/18852
-  // FIXME: once the bug is fixed, want to default origin of menu open to the right of standard buttons
 
-  //&.dropdown-menu-left {
-  //  @extend %menu-bottom-left;
-  //}
-  //
-  //&.dropdown-menu-right {
-  //  @extend %menu-bottom-right;
-  //}
-  //
+  &.dropdown-menu-left {
+    @include menu-bottom-left();
+  }
+
+  &.dropdown-menu-right {
+    @include menu-bottom-right();
+  }
+
   //&.dropdown-menu-top-left {
   //  top: auto;
   //  bottom: 0;  // needs to be overridden with the toggle-button height, see bmd-btn-icon above
@@ -89,39 +88,39 @@
   }
 }
 
-.dropdown {
 
-  .dropdown-toggle {
+// this could be in a .btn-group or .dropdown
+.dropdown-toggle {
 
-    &.bmd-btn-icon,
-    &.bmd-btn-fab {
-      // remove the dropdown icon
-      &::after {
-        display: none;
-      }
-
-      ~ .dropdown-menu {
-        &.dropdown-menu-top-left,
-        &.dropdown-menu-top-right {
-          bottom: $mdb-btn-icon-size; // push up the bottom of the menu the height of the button
-        }
-      }
+  &.bmd-btn-icon,
+  &.bmd-btn-fab {
+    // remove the dropdown icon
+    &::after {
+      display: none;
     }
 
-    &.bmd-btn-fab-sm {
-      ~ .dropdown-menu {
-        &.dropdown-menu-top-left,
-        &.dropdown-menu-top-right {
-          bottom: $mdb-btn-fab-size-sm; // push up the bottom of the menu the height of the button
-        }
-      }
-    }
-
-    &.bmd-btn-icon {
-      ~ .dropdown-menu {
-        // collapse some spacing
-        margin: 0;
+    ~ .dropdown-menu {
+      &.dropdown-menu-top-left,
+      &.dropdown-menu-top-right {
+        bottom: $mdb-btn-icon-size; // push up the bottom of the menu the height of the button
       }
     }
   }
+
+  &.bmd-btn-fab-sm {
+    ~ .dropdown-menu {
+      &.dropdown-menu-top-left,
+      &.dropdown-menu-top-right {
+        bottom: $mdb-btn-fab-size-sm; // push up the bottom of the menu the height of the button
+      }
+    }
+  }
+
+  &.bmd-btn-icon {
+    ~ .dropdown-menu {
+      // collapse some spacing
+      margin: 0;
+    }
+  }
 }
+