fix(menu): allow text wrapping in menu items

Allows for the text inside menu items to wrap, instead of having it be truncated. The text was being truncated as a limitation on `mat-select` and `mat-autocomplete`, however we don't have the same limitation on `mat-menu`.

Author: crisbeto

src/dev-app/menu/menu-demo.ts

@@ -18,13 +18,13 @@ export class MenuDemo {
   selected = '';
   items = [
     {text: 'Refresh'},
-    {text: 'Settings'},
+    {text: 'Settings with a longer name so we can test text wrapping'},
     {text: 'Help', disabled: true},
     {text: 'Sign Out'}
   ];
 
   iconItems = [
-    {text: 'Redial', icon: 'dialpad'},
+    {text: 'Redial with a longer name so we can test text wrapping', icon: 'dialpad'},
     {text: 'Check voicemail', icon: 'voicemail', disabled: true},
     {text: 'Disable alerts', icon: 'notifications_off'}
   ];

src/material/core/option/option.scss

@@ -11,7 +11,6 @@
   display: flex;
   flex-direction: row;
   max-width: 100%;
-  box-sizing: border-box;
   align-items: center;
   -webkit-tap-highlight-color: transparent;
 

src/material/core/style/_menu-common.scss

@@ -21,14 +21,22 @@ $mat-menu-icon-margin: 16px !default;
   -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 }
 
-@mixin mat-menu-item-base() {
-  @include mat-truncate-line();
+@mixin mat-menu-item-base(
+  $display: block,
+  $truncate: true,
+  $height: $mat-menu-item-height,
+  $line-height: $height) {
+
+  @if $truncate {
+    @include mat-truncate-line();
+  }
 
   // Needs to be a block for the ellipsis to work.
-  display: block;
-  line-height: $mat-menu-item-height;
-  height: $mat-menu-item-height;
+  display: $display;
+  height: $height;
+  line-height: $line-height;
   padding: 0 $mat-menu-side-padding;
+  box-sizing: border-box;
 
   text-align: left;
   text-decoration: none;   // necessary to reset anchor tags

src/material/menu/menu.scss

@@ -6,6 +6,7 @@
 $mat-menu-vertical-padding: 8px !default;
 $mat-menu-border-radius: 4px !default;
 $mat-menu-submenu-indicator-size: 10px !default;
+$mat-menu-item-vertical-padding: 8px !default;
 
 .mat-menu-panel {
   @include mat-menu-base();
@@ -41,9 +42,17 @@ $mat-menu-submenu-indicator-size: 10px !default;
 
 .mat-menu-item {
   @include mat-button-reset();
-  @include mat-menu-item-base();
+  @include mat-menu-item-base(flex, false, auto, normal);
   position: relative;
 
+  // TODO(crisbeto): most of these can be moved into the `mat-menu-item-base`
+  // once we start allowing text wrapping in mat-select and mat-autocomplete.
+  align-items: center;
+  white-space: normal;
+  min-height: $mat-menu-item-height;
+  padding-top: $mat-menu-item-vertical-padding;
+  padding-bottom: $mat-menu-item-vertical-padding;
+
   &[disabled] {
     // Usually every click inside the menu closes it, however some browsers will stop events
     // when the user clicks on a disabled item, **except** when the user clicks on a non-disabled