feat(menu): add md-menu standalone overlay (#855)

Author: kara

src/components/button/_button-base.scss

@@ -1,6 +1,7 @@
 
 @import 'variables';
 @import 'elevation';
+@import 'button-mixins';
 
 // TODO(jelbourn): This goes away.
 @import 'default-theme';
@@ -34,12 +35,7 @@ $md-mini-fab-padding: 8px !default;
   position: relative;
 
   // Reset browser <button> styles.
-  background: transparent;
-  text-align: center;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  border: none;
+  @include md-button-reset();
 
   // Make anchors render like buttons.
   display: inline-block;
@@ -52,6 +48,7 @@ $md-mini-fab-padding: 8px !default;
   font-family: $md-font-family;
   font-weight: 500;
   color: currentColor;
+  text-align: center;
 
   // Sizing.
   margin: $md-button-margin;

src/components/menu/menu.html

@@ -0,0 +1,4 @@
+<div class="md-menu">
+  <ng-content></ng-content>
+</div>
+

src/components/menu/menu.scss

@@ -0,0 +1,53 @@
+// TODO(kara): update vars for desktop when MD team responds
+
+@import 'variables';
+@import 'elevation';
+@import 'default-theme';
+@import 'button-mixins';
+@import 'list-shared';
+
+// menu width must be a multiple of 56px
+$md-menu-overlay-min-width: 112px !default;   // 56 * 2
+$md-menu-overlay-max-width: 280px !default;   // 56 * 5
+
+$md-menu-item-height: 48px !default;
+$md-menu-font-size: 16px !default;
+$md-menu-side-padding: 16px !default;
+
+.md-menu {
+  @include md-elevation(2);
+  min-width: $md-menu-overlay-min-width;
+  max-width: $md-menu-overlay-max-width;
+
+  // max height must be 100% of the viewport height + one row height
+  max-height: calc(100vh + 48px);
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
+
+  background: md-color($md-background, 'background');
+}
+
+[md-menu-item] {
+  @include md-button-reset();
+  @include md-truncate-line();
+
+  display: block;
+  width: 100%;
+  height: $md-menu-item-height;
+  padding: 0 $md-menu-side-padding;
+
+  font-size: $md-menu-font-size;
+  font-family: $md-font-family;
+  text-align: start;
+  color: md-color($md-foreground, 'text');
+
+  &[disabled] {
+    color: md-color($md-foreground, 'disabled');
+    cursor: default;
+  }
+
+  &:hover:not([disabled]) {
+    background: md-color($md-background, 'hover');
+  }
+}
+

src/components/menu/menu.ts

@@ -1,13 +1,21 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, Directive, ViewEncapsulation} from '@angular/core';
 
 @Component({
   moduleId: module.id,
   selector: 'md-menu',
+  host: {'role': 'menu'},
   templateUrl: 'menu.html',
   styleUrls: ['menu.css'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'mdMenu'
 })
 export class MdMenu {}
 
-export const MD_MENU_DIRECTIVES = [MdMenu];
+@Directive({
+  selector: '[md-menu-item]',
+  host: {'role': 'menuitem'}
+})
+export class MdMenuItem {}
+
+export const MD_MENU_DIRECTIVES = [MdMenu, MdMenuItem];
 

src/core/style/_button-mixins.scss

@@ -0,0 +1,11 @@
+/**
+ * This mixin overrides default button styles like the gray background,
+ * the border, and the outline.
+ */
+@mixin md-button-reset {
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  border: none;
+}

src/core/style/_list-shared.scss

@@ -1,13 +1,21 @@
+/**
+ * This mixin will ensure that lines that overflow the container will
+ * hide the overflow and truncate neatly with an ellipsis.
+ */
+@mixin md-truncate-line() {
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
 /**
  * This mixin provides all md-line styles, changing secondary font size
  * based on whether the list is in dense mode.
  */
 @mixin md-line-base($secondary-font-size) {
   [md-line] {
+    @include md-truncate-line();
     display: block;
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
     box-sizing: border-box;
 
     // all lines but the top line should have smaller text

src/demo-app/menu/menu-demo.html

@@ -1 +1,5 @@
-menu
+<md-menu>
+  <button md-menu-item>Refresh</button>
+  <button md-menu-item>Settings</button>
+  <button md-menu-item disabled>Help</button>
+</md-menu>

stylelint-config.json

@@ -19,7 +19,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": ["px", "%", "deg", "ms", "em"],
+    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",