#815 menus/dropdowns are fundamentally working, a bit more to do.

docs/_data/nav.yml

@@ -11,7 +11,8 @@
 - title: Material Design
   pages:
     - title: Test
-    - title: List group
+    - title: List groups
+    - title: Menus
     - title: Navs
     - title: Buttons
     - title: Forms

docs/material-design/buttons.md

@@ -64,7 +64,7 @@ group: material-design
 </fieldset>
 {% endexample %}
 
-### Sizes
+## Sizes
 {% example html %}
 <button type="button" class="btn btn-raised btn-lg">Large button</button>
 <button type="button" class="btn btn-raised">Default button</button>
@@ -149,25 +149,25 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
 
 {% example html %}
 <button type="button" class="btn btn-primary mdb-btn-icon">
-  <i class="material-icons">grade</i>
+  <i class="material-icons">more_vert</i>
 </button>
 <button type="button" class="btn btn-secondary mdb-btn-icon">
-  <i class="material-icons">grade</i>
+  <i class="material-icons">more_vert</i>
 </button>
 <button type="button" class="btn btn-success mdb-btn-icon">
-  <i class="material-icons">grade</i>
+  <i class="material-icons">more_vert</i>
 </button>
 <button type="button" class="btn btn-info mdb-btn-icon">
-  <i class="material-icons">grade</i>
+  <i class="material-icons">more_vert</i>
 </button>
 <button type="button" class="btn btn-warning mdb-btn-icon">
-  <i class="material-icons">grade</i>
+  <i class="material-icons">more_vert</i>
 </button>
 <button type="button" class="btn btn-danger mdb-btn-icon">
-  <i class="material-icons">grade</i>
+  <i class="material-icons">more_vert</i>
 </button>
 <button type="button" class="btn btn-danger mdb-btn-icon active">
-  <i class="material-icons">grade</i>
+  <i class="material-icons">more_vert</i>
 </button>
 {% endexample %}
 
@@ -175,22 +175,22 @@ Using `mdb-btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing e
 {% example html %}
 <fieldset disabled>
   <button type="button" class="btn btn-primary mdb-btn-icon">
-    <i class="material-icons">grade</i>
+    <i class="material-icons">more_vert</i>
   </button>
   <button type="button" class="btn btn-secondary mdb-btn-icon">
-    <i class="material-icons">grade</i>
+    <i class="material-icons">more_vert</i>
   </button>
   <button type="button" class="btn btn-success mdb-btn-icon">
-    <i class="material-icons">grade</i>
+    <i class="material-icons">more_vert</i>
   </button>
   <button type="button" class="btn btn-info mdb-btn-icon">
-    <i class="material-icons">grade</i>
+    <i class="material-icons">more_vert</i>
   </button>
   <button type="button" class="btn btn-warning mdb-btn-icon">
-    <i class="material-icons">grade</i>
+    <i class="material-icons">more_vert</i>
   </button>
   <button type="button" class="btn btn-danger mdb-btn-icon">
-    <i class="material-icons">grade</i>
+    <i class="material-icons">more_vert</i>
   </button>
 </fieldset>
 {% endexample %}
@@ -201,14 +201,16 @@ Using `mdb-btn-icon-sm` on the button, or using `btn-group-sm` on the enclosing
 
 {% example html %}
 <button type="button" class="btn mdb-btn-icon">
-  <i class="material-icons">grade</i>
+  <i class="material-icons">more_vert</i>
 </button>
 <button type="button" class="btn mdb-btn-icon mdb-btn-icon-sm">
-  <i class="material-icons">grade</i>
+  <i class="material-icons">more_vert</i>
 </button>
 <span class="btn-group-sm">
   <button type="button" class="btn mdb-btn-icon">
-    <i class="material-icons">grade</i>
+    <i class="material-icons">more_vert</i>
   </button>
 </span>
 {% endexample %}
+
+

docs/material-design/list-groups.md

@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: List group
+title: List groups
 group: material-design
 ---
 

docs/material-design/menus.md

@@ -0,0 +1,152 @@
+---
+layout: docs
+title: Menus
+group: material-design
+---
+
+## Contents
+
+* Will be replaced with the ToC, excluding the "Contents" header
+{:toc}
+
+Bootstrap users know these as [dropdowns]({{ site.baseurl }}/components/dropdowns/), but these are also known as menus in the [Material Design specification](https://www.google.com/design/spec/components/menus.html#menus-specs).
+
+## Styles
+
+{% example html %}
+<!-- icon -->
+<div class="dropdown">
+  <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="material-icons">more_vert</i>
+  </button>
+  An <code>.mdb-btn-icon</code>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+  </div>
+</div>
+
+<!-- fab-sm -->
+<div class="dropdown">
+  <button class="btn mdb-btn-fab mdb-btn-fab-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="material-icons">more_vert</i>
+  </button>
+  An <code>.mdb-btn-fab-sm</code>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+  </div>
+</div>
+
+<!-- fab -->
+<div class="dropdown">
+  <button class="btn mdb-btn-fab btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="material-icons">more_vert</i>
+  </button>
+  An <code>.mdb-btn-fab</code>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+  </div>
+</div>
+{% endexample %}
+
+
+## Alignment
+
+### Lower left side
+{% example html %}
+<div class="dropdown open">
+  <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="material-icons">more_vert</i>
+  </button>
+  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+    <button class="dropdown-item" type="button disabled">Disabled action</button>
+    <div class="dropdown-divider"> </div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+{% endexample %}
+
+### Lower right side
+{% example html %}
+<div class="dropdown open pull-xs-right">
+  <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" 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="dropdownMenu2">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+    <button class="dropdown-item" type="button disabled">Disabled action</button>
+    <div class="dropdown-divider"> </div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+{% endexample %}
+
+### Top left side
+{% example html %}
+<div class="dropdown open">
+  <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="material-icons">more_vert</i>
+  </button>
+  <div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="dropdownMenu2">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+    <button class="dropdown-item" type="button disabled">Disabled action</button>
+    <div class="dropdown-divider"> </div>
+    <a class="dropdown-item" href="#">Separated link</a>
+  </div>
+</div>
+{% endexample %}
+
+### Top right side
+{% example html %}
+<div class="dropdown open pull-xs-right">
+  <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <i class="material-icons">more_vert</i>
+  </button>
+  <div class="dropdown-menu dropdown-menu-top-right" aria-labelledby="dropdownMenu2">
+    <button class="dropdown-item" type="button">Action</button>
+    <button class="dropdown-item" type="button">Another action</button>
+    <button class="dropdown-item" type="button disabled">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">
+  <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" 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="dropdownMenu2">
+    <button class="dropdown-item" type="button">A</button>
+    <button class="dropdown-item" type="button">B</button>
+  </div>
+</div>
+{% endexample %}
+
+
+### Maximum width
+
+{% example html %}
+<div class="dropdown open pull-xs-right">
+  <button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" 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="dropdownMenu2">
+    <button class="dropdown-item" type="button">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</button>
+    <button class="dropdown-item" type="button">Another action</button>
+  </div>
+</div>
+{% endexample %}

docs/material-design/test.md

@@ -4,65 +4,6 @@ title: Test
 group: material-design
 ---
 
-## Collapse method for mdb-btn-icon and field
 {% example html %}
-<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
-  <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
-    <i class="material-icons">search</i>
-  </button>  
-  <span id="collapse-search" class="collapse">
-    <input class="form-control" type="text" id="search" placeholder="Enter your query...">
-  </span>
-</div>
 
-<script>
-  // jquery not loaded yet due to the nature of this jekyll page rendering setup so this is more complicated than normally necessary!
-  document.addEventListener("DOMContentLoaded", function(event) { 
-    setTimeout(function(){
-      // clear field value once closed
-      $('#collapse-search').on('hidden.bs.collapse', function() {
-        $('#search').val('')
-      })
-    }, 1);
-  })
-</script>
-{% endexample %}
-
-
-{% highlight js %}
-  // clear field value once closed
-  $(function() {
-    $('#collapse-search').on('hidden.bs.collapse', function() {
-      $('#search').val('')
-    })
-  });
-{% endhighlight %}
-
-
-## Collapse on the left
-{% example html %}
-<div class="mdb-form-group mdb-collapse-inline">
-  <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search2" aria-expanded="false" aria-controls="collapse-search2">
-    <i class="material-icons">search</i>
-  </button>  
-  <span id="collapse-search2" class="collapse">
-    <input class="form-control" type="text" id="search" placeholder="Enter your query...">
-  </span>
-</div>
-{% endexample %}
-
-
-
-## With label-placeholder
-Perhaps this isn't worth doing, considering the context.  we need to override the top calc to determine where this goes, or perhaps we should switch to a bottom calc for everything?
-{% example html %}
-<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
-  <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search3" aria-expanded="false" aria-controls="collapse-search3">
-    <i class="material-icons">search</i>
-  </button>  
-  <span id="collapse-search3" class="collapse width">
-    <label class="mdb-label-placeholder" for="search2">Enter your query...</label>
-    <input class="form-control" type="text" id="search2">
-  </span>
-</div>
 {% endexample %}

scss/_buttons.scss

@@ -97,7 +97,8 @@
     width: $mdb-btn-fab-size;
     min-width: $mdb-btn-fab-size;
     height: $mdb-btn-fab-size;
-    margin: auto;
+    //margin: auto;
+    margin: 1px; // This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
     box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;
 
     .ripple-container {
@@ -123,8 +124,7 @@
     width: $mdb-btn-icon-size;
     min-width: $mdb-btn-icon-size;
     height: $mdb-btn-icon-size;
-    margin-right: 0;
+    margin: 0;
-    margin-left: 0;
     color: inherit;
 
     &.mdb-btn-icon-sm,

scss/_core.scss

@@ -22,6 +22,7 @@
 @import "popover";
 @import "cards";
 @import "modal";
+@import "menu";
 @import "themes";
 
 @import "ripples";

scss/_dropdown.scss

@@ -1,17 +0,0 @@
-// Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons
-
-.dropdown-menu {
-  border: 0;
-  box-shadow: 0 2px 5px 0 $gray-light;
-  //.divider {
-  //  background-color: rgba(229, 229, 229, 0.12);
-  //}
-  li {
-    position: relative;
-    overflow: hidden;
-    a:hover {
-      color: $brand-primary;
-      background-color: transparent;
-    }
-  }
-}

scss/_menu.scss

@@ -0,0 +1,124 @@
+// 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
+
+.dropdown {
+
+  .dropdown-toggle {
+
+    &.mdb-btn-icon,
+    &.mdb-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
+        }
+      }
+    }
+
+    &.mdb-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
+        }
+      }
+    }
+
+    &.mdb-btn-icon {
+      ~ .dropdown-menu {
+        // collapse some spacing
+        margin: 0;
+      }
+    }
+
+  }
+}
+
+.dropdown-menu {
+
+  display: block; // utilize transition transform instead of flipping display
+  padding: .5rem 0;
+  border: 0;
+  opacity: 0;
+  transition: transform $menu-expand-duration $mdb-animation-curve-default, opacity $menu-fade-duration $mdb-animation-curve-default;
+  transform: scale(0);
+  transform-origin: 0 0;
+  will-change: transform;
+  @include shadow-2dp();
+
+  .open > & {
+    //z-index: 999;
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &.dropdown-menu-right {
+    right: 0;
+    left: auto;
+    transform-origin: 100% 0;
+  }
+
+  &.dropdown-menu-top-left {
+    top: auto;
+    bottom: 0;  // needs to be overridden with the toggle-button height, see mdb-btn-icon above
+    transform-origin: 0 100%;
+  }
+
+  &.dropdown-menu-top-right {
+    top: auto;
+    right: 0;
+    bottom: 0;  // needs to be overridden with the toggle-button height, see mdb-btn-icon above
+    left: auto;
+    transform-origin: 100% 100%;
+  }
+
+
+  // https://www.google.com/design/spec/components/menus.html#menus-specs
+  .dropdown-item {
+
+    display: flex;
+
+    min-width: $mdb-menu-item-min-width;
+    max-width: $mdb-menu-item-max-width;
+    min-height: $mdb-menu-item-min-height;
+
+    flex-flow: row wrap;
+
+    padding-top: $mdb-menu-item-padding-top;
+    padding-right: $mdb-menu-item-padding-right;
+    padding-bottom: $mdb-menu-item-padding-bottom;
+    padding-left: $mdb-menu-item-padding-left;
+
+    // FIXME: multi-line menu word wrapping doesn't work - see the maximum width example in menus.md
+    overflow: hidden;
+    line-height: $mdb-menu-line-height;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+
+
+    // Simple menus always maintain a 16dp margin (phone) or 24dp margin (tablet) to the left and right edges of the screen.
+    @include media-breakpoint-up(md) {
+      padding-right: $mdb-menu-item-padding-right-md;
+      padding-left: $mdb-menu-item-padding-left-md;
+    }
+  }
+
+  //  border: 0;
+  //  box-shadow: 0 2px 5px 0 $gray-light;
+  //  //.divider {
+  //  //  background-color: rgba(229, 229, 229, 0.12);
+  //  //}
+  //  li {
+  //    position: relative;
+  //    overflow: hidden;
+  //    a:hover {
+  //      color: $brand-primary;
+  //      background-color: transparent;
+  //    }
+  //  }
+}

scss/_variables.scss

@@ -38,6 +38,7 @@ $enable-flex: true;
 
 
 //
+@import "variables/menu";
 @import "variables/drawer";
 
 $mdb-label-color-focus: $brand-primary !default;
@@ -136,3 +137,6 @@ $mdb-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
 $mdb-animation-curve-default: $mdb-animation-curve-fast-out-slow-in !default;
 
 
+// Menu
+$menu-expand-duration: 0.3s !default;
+$menu-fade-duration: 0.2s !default;

scss/mixins/_buttons.scss

@@ -33,7 +33,12 @@
     }
   }
 
-  &.disabled,
+  // when it is an icon, kill the active bg on open dropdown
+  .open > &.dropdown-toggle.mdb-btn-icon {
+    background-color: $background;
+  }
+
+    &.disabled,
   &:disabled {
     &:focus,
     &.focus {

scss/variables/_menu.scss

@@ -0,0 +1,17 @@
+$mdb-menu-line-height: 1 !default; // makes it easier to use sizes to match spec
+
+$mdb-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp
+$mdb-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp
+$mdb-menu-item-min-height: 3rem !default; // 48px
+
+$mdb-menu-item-padding-right: 1rem !default;
+$mdb-menu-item-padding-bottom: 1.25rem !default;
+$mdb-menu-item-padding-left: 1rem !default;
+
+$mdb-menu-item-padding-top: ($mdb-menu-item-min-height - $font-size-base - $mdb-menu-item-padding-bottom) !default;
+
+// md and up
+$mdb-menu-item-padding-right-md: 1.5rem !default;
+$mdb-menu-item-padding-left-md: 1.5rem !default;
+
+