menu(dense): add demo and docs. fix min-height when scrollable (#11602)

Fixes #11278. Closes #11279.

Author: Splaktar

src/components/menu/demoMenuDensity/index.html

@@ -0,0 +1,47 @@
+<div class="md-menu-demo" ng-controller="DensityDemoCtrl as ctrl" style="min-height: 350px" ng-cloak>
+  <div class="menu-demo-container" layout-align="start center" layout="column">
+    <div layout-align="start center" layout="column" style="min-height: 70px;">
+      <h2 class="md-title">Different Densities</h2>
+      <p>
+        You can add the <code>md-dense</code> class to the <code>md-menu-content</code> element
+        in order to reduce the size of menu items as described in the
+        <a ng-href="{{ctrl.menuHref}}" target="_blank">Menu Specs</a>.
+      </p>
+    </div>
+    <div layout-wrap layout="row" layout-fill layout-align="space-between center"
+         style="min-height: 100px;">
+      <div layout="column" flex="50" flex-sm="100" flex-xs="100" layout-align="center center">
+        <p>Normal density menu</p>
+        <md-menu>
+          <md-button aria-label="Open demo menu" class="md-icon-button"
+                     ng-click="$mdMenu.open($event)">
+            <md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>
+          </md-button>
+          <md-menu-content>
+            <md-menu-item ng-repeat="item in [1, 2, 3]">
+              <md-button ng-click="ctrl.announceClick($index)"><span
+                  md-menu-align-target>Option</span> {{item}}
+              </md-button>
+            </md-menu-item>
+          </md-menu-content>
+        </md-menu>
+      </div>
+      <div layout="column" flex="50" flex-sm="100" flex-xs="100" layout-align="center center">
+        <p>Dense menu</p>
+        <md-menu>
+          <md-button aria-label="Open demo menu" class="md-icon-button"
+                     ng-click="$mdMenu.open($event)">
+            <md-icon md-menu-origin md-svg-icon="call:email"></md-icon>
+          </md-button>
+          <md-menu-content class="md-dense">
+            <md-menu-item ng-repeat="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]">
+              <md-button ng-click="ctrl.announceClick($index)"><span
+                  md-menu-align-target>Option</span> {{item}}
+              </md-button>
+            </md-menu-item>
+          </md-menu-content>
+        </md-menu>
+      </div>
+    </div>
+  </div>
+</div>

src/components/menu/demoMenuDensity/script.js

@@ -0,0 +1,17 @@
+angular.module('menuDemoDensity', ['ngMaterial']).config(function($mdIconProvider) {
+  $mdIconProvider
+    .iconSet("call", 'img/icons/sets/communication-icons.svg', 24)
+    .iconSet("social", 'img/icons/sets/social-icons.svg', 24);
+}).controller('DensityDemoCtrl', function($mdDialog) {
+  var ctrl = this;
+  ctrl.menuHref = "https://material.io/archive/guidelines/components/menus.html#menus-specs";
+
+  this.announceClick = function(index) {
+    $mdDialog.show(
+      $mdDialog.alert()
+        .title('You clicked!')
+        .textContent('You clicked the menu item at index ' + index)
+        .ok('Nice')
+    );
+  };
+});

src/components/menu/demoMenuDensity/style.css

@@ -0,0 +1,6 @@
+.md-menu-demo {
+  padding: 24px;
+}
+.menu-demo-container {
+  min-height: 200px;
+}

src/components/menu/demoMenuWidth/index.html

@@ -4,7 +4,7 @@
       <h2 class="md-title">Different Widths</h2>
       <p>
         <code>md-menu-content</code> may specify a <code>width</code> attribute which will follow
-        the <a ng-href="{{ctrl.menuHref}}" class="md-accent" target="_blank">official spec</a>.
+        the <a ng-href="{{ctrl.menuHref}}" target="_blank">Menu Specs</a>.
       </p>
     </div>
     <div class="menus" layout-wrap layout="row" layout-fill layout-align="space-between center" style="min-height:100px;">

src/components/menu/demoMenuWidth/script.js

@@ -4,7 +4,7 @@ angular.module('menuDemoWidth', ['ngMaterial']).config(function($mdIconProvider)
     .iconSet("social", 'img/icons/sets/social-icons.svg', 24);
 }).controller('WidthDemoCtrl', function($mdDialog) {
   var ctrl = this;
-  ctrl.menuHref = "https://material.io/design/components/menus.html#specs";
+  ctrl.menuHref = "https://material.io/archive/guidelines/components/menus.html#menus-specs";
 
   this.announceClick = function(index) {
     $mdDialog.show(

src/components/menu/js/menuDirective.js

@@ -38,6 +38,15 @@
  * See the [Material Design Spec](https://material.io/archive/guidelines/components/menus.html#menus-simple-menus)
  * for more information.
  *
+ * ## Menu Density
+ *
+ * You can use dense menus by adding the `md-dense` class to the `md-menu-content` element.
+ * This reduces the height of menu items, their top and bottom padding, and default font size.
+ * Without the `md-dense` class, we use the "mobile" height of `48px`. With the `md-dense` class,
+ * we use the "desktop" height of `32px`. We do not support the "dense desktop" option in the spec,
+ * which uses a height of `24px`, at this time.
+ * See the [Menu Specs](https://material.io/archive/guidelines/components/menus.html#menus-specs)
+ * section of the Material Design Spec for more information.
  *
  * ## Aligning Menus
  *

src/components/menu/menu.scss

@@ -63,7 +63,7 @@ md-menu-content {
     max-height: $max-dense-menu-height;
     md-menu-item {
       height: $dense-menu-item-height;
-      min-height: 0px;
+      min-height: $dense-menu-item-height;
     }
   }
 }