From 170e8b592b108f27ad5c939b1f74c596ed4b1da9 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Thu, 14 Jul 2016 10:00:05 -0700
Subject: [PATCH] feat(menu): add md-menu standalone overlay

---
 src/components/button/_button-base.scss |  9 ++---
 src/components/menu/menu.html           |  4 ++
 src/components/menu/menu.scss           | 53 +++++++++++++++++++++++++
 src/components/menu/menu.ts             | 14 +++++--
 src/core/style/_button-mixins.scss      | 11 +++++
 src/core/style/_list-shared.scss        | 14 +++++--
 src/demo-app/menu/menu-demo.html        |  6 ++-
 stylelint-config.json                   |  2 +-
 8 files changed, 99 insertions(+), 14 deletions(-)
 create mode 100644 src/core/style/_button-mixins.scss

diff --git a/src/components/button/_button-base.scss b/src/components/button/_button-base.scss
index 1856ec13010c..3d705629f735 100644
--- a/src/components/button/_button-base.scss
+++ b/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;
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..d4d33130da0e 100644
--- a/src/components/menu/menu.scss
+++ b/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');
+  }
+}
+
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/_button-mixins.scss b/src/core/style/_button-mixins.scss
new file mode 100644
index 000000000000..9c8b5b1d1794
--- /dev/null
+++ b/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;
+}
diff --git a/src/core/style/_list-shared.scss b/src/core/style/_list-shared.scss
index 4de8b7edfe87..aeb7f441deec 100644
--- a/src/core/style/_list-shared.scss
+++ b/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
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
diff --git a/stylelint-config.json b/stylelint-config.json
index 71090ad21782..a73ebc083944 100644
--- a/stylelint-config.json
+++ b/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",