feat(menu): add md-menu standalone component

Author: jelbourn

src/components/button/_button-base.scss

@@ -1,6 +1,7 @@
 
 @import 'variables';
 @import 'elevation';
+@import '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,47 @@
+// TODO(kara): update vars for desktop when MD team responds
+
+@import 'variables';
+@import 'elevation';
+@import 'default-theme';
+@import 'mixins';
+
+// 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-overlay-max-height: calc(100vh + $md-menu-item-height) !default;
+$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: $md-menu-overlay-max-height;
+
+  background: md-color($md-background, 'background');
+}
+
+[md-menu-item] {
+  @include md-button-reset();
+
+  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');
+  }
+
+  &: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/_mixins.scss

@@ -38,6 +38,18 @@
   }
 }
 
+/**
+ * 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;
+}
+
 /**
  * A mixin, which generates temporary ink ripple on a given component.
  * When $bindToParent is set to true, it will check for the focused class on the same selector as you included

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>