From d26ead4742576f662b3dedbcd2b0b598d3d350e9 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@gmail.com>
Date: Wed, 13 Jul 2016 14:17:17 -0700
Subject: [PATCH] feat(menu): add md-menu standalone component

---
 src/components/button/_button-base.scss |  9 ++---
 src/components/menu/menu.html           |  4 +++
 src/components/menu/menu.scss           | 47 +++++++++++++++++++++++++
 src/components/menu/menu.ts             | 14 ++++++--
 src/core/style/_mixins.scss             | 12 +++++++
 src/demo-app/menu/menu-demo.html        |  6 +++-
 6 files changed, 82 insertions(+), 10 deletions(-)

diff --git a/src/components/button/_button-base.scss b/src/components/button/_button-base.scss
index 1856ec13010c..d7e08889d405 100644
--- a/src/components/button/_button-base.scss
+++ b/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;
diff --git a/src/components/menu/menu.html b/src/components/menu/menu.html
index e69de29bb2d1..a4238be74be6 100644
--- a/src/components/menu/menu.html
+++ b/src/components/menu/menu.html
@@ -0,0 +1,4 @@
+<div class="md-menu">
+  <ng-content></ng-content>
+</div>
+
diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
index e69de29bb2d1..9064703691ed 100644
--- a/src/components/menu/menu.scss
+++ b/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');
+  }
+}
+
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 50369354c95c..e4f90393ddaf 100644
--- a/src/components/menu/menu.ts
+++ b/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];
 
diff --git a/src/core/style/_mixins.scss b/src/core/style/_mixins.scss
index 8839a765f9c9..0b63dd757f24 100644
--- a/src/core/style/_mixins.scss
+++ b/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
diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html
index e4a6a569b01c..de51d1ed1e73 100644
--- a/src/demo-app/menu/menu-demo.html
+++ b/src/demo-app/menu/menu-demo.html
@@ -1 +1,5 @@
-menu
\ No newline at end of file
+<md-menu>
+  <button md-menu-item>Refresh</button>
+  <button md-menu-item>Settings</button>
+  <button md-menu-item disabled>Help</button>
+</md-menu>
\ No newline at end of file