addressed comments

Author: kara

src/components/menu/menu-item.ts

@@ -1,4 +1,4 @@
-import {Directive, Input, HostBinding, HostListener} from '@angular/core';
+import {Directive, Input, HostBinding} from '@angular/core';
 
 /**
  * This directive is intended to be used inside an md-menu tag.
@@ -16,7 +16,10 @@ export class MdMenuItem {}
  */
 @Directive({
   selector: 'a[md-menu-item]',
-  host: {'role': 'menuitem'}
+  host: {
+    'role': 'menuitem',
+    '(click)': 'checkDisabled($event)'
+  }
 })
 export class MdMenuAnchor {
   _disabled: boolean;
@@ -33,16 +36,15 @@ export class MdMenuAnchor {
 
   @HostBinding('attr.aria-disabled')
   get isAriaDisabled(): string {
-    return this.disabled ? 'true' : 'false';
+    return String(this.disabled);
   }
 
   @HostBinding('tabIndex')
   get tabIndex(): number {
     return this.disabled ? -1 : 0;
   }
 
-  @HostListener('click', ['$event'])
-  checkDisabled(event: any) {
+  checkDisabled(event: Event) {
     if (this.disabled) {
       event.preventDefault();
       event.stopPropagation();

src/components/menu/menu-trigger.ts

@@ -35,14 +35,14 @@ import {
 })
 export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   private _portal: TemplatePortal;
-  private _overlay: OverlayRef;
+  private _overlayRef: OverlayRef;
   menuOpen: boolean = false;
 
   @Input('md-menu-trigger-for') menu: MdMenu;
   @Output() onMenuOpen = new EventEmitter();
   @Output() onMenuClose = new EventEmitter();
 
-  constructor(private _overlayBuilder: Overlay, private _element: ElementRef,
+  constructor(private _overlay: Overlay, private _element: ElementRef,
               private _viewContainerRef: ViewContainerRef) {}
 
   ngAfterViewInit() {
@@ -59,46 +59,63 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
   }
 
   openMenu(): Promise<void> {
-    return this._overlay.attach(this._portal)
-      .then(() => this._setMenuState(true));
+    return this._overlayRef.attach(this._portal)
+      .then(() => this._setIsMenuOpen(true));
   }
 
   closeMenu(): Promise<void> {
-    return this._overlay.detach()
-        .then(() => this._setMenuState(false));
+    return this._overlayRef.detach()
+        .then(() => this._setIsMenuOpen(false));
   }
 
   destroyMenu(): void {
-    this._overlay.dispose();
+    this._overlayRef.dispose();
   }
 
   // set state rather than toggle to support triggers sharing a menu
-  private _setMenuState(bool: boolean): void {
-    this.menuOpen = bool;
-    this.menu._setClickCatcher(bool);
+  private _setIsMenuOpen(isOpen: boolean): void {
+    this.menuOpen = isOpen;
+    this.menu._setClickCatcher(isOpen);
     this.menuOpen ? this.onMenuOpen.emit(null) : this.onMenuClose.emit(null);
   }
 
+  /**
+   *  This method checks that a valid instance of MdMenu has been passed into
+   *  md-menu-trigger-for.  If not, an exception is thrown.
+   */
   private _checkMenu() {
     if (!this.menu || !(this.menu instanceof MdMenu)) {
       throw new MdMenuMissingError();
     }
   }
 
+  /**
+   *  This method creates the overlay from the provided menu's template and saves its
+   *  OverlayRef so that it can be attached to the DOM when openMenu is called.
+   */
   private _createOverlay(): void {
     this._portal = new TemplatePortal(this.menu.templateRef, this._viewContainerRef);
-    this._overlayBuilder.create(this._getOverlayConfig())
-        .then(overlay => this._overlay = overlay);
+    this._overlay.create(this._getOverlayConfig())
+        .then(overlay => this._overlayRef = overlay);
   }
 
+  /**
+   * This method builds the configuration object needed to create the overlay, the OverlayState.
+   * @returns OverlayState
+   */
   private _getOverlayConfig(): OverlayState {
     const overlayState = new OverlayState();
     overlayState.positionStrategy = this._getPosition();
     return overlayState;
   }
 
+  /**
+   * This method builds the position strategy for the overlay, so the menu is properly connected
+   * to the trigger.
+   * @returns ConnectedPositionStrategy
+   */
   private _getPosition(): ConnectedPositionStrategy  {
-    return this._overlayBuilder.position().connectedTo(
+    return this._overlay.position().connectedTo(
       this._element,
       {originX: 'start', originY: 'top'},
       {overlayX: 'start', overlayY: 'top'}

src/components/menu/menu.scss

@@ -25,7 +25,7 @@ $md-menu-side-padding: 16px !default;
   overflow: scroll;
   -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 
-  background: md-color($md-background, 'menu');
+  background: md-color($md-background, 'card');
 }
 
 [md-menu-item] {

src/components/menu/menu.ts

@@ -29,7 +29,7 @@ export class MdMenu {
   /**
    * This function toggles the display of the menu's click catcher element.
    * This element covers the viewport when the menu is open to detect clicks outside the menu.
-   * @internal
+   * TODO: internal
    */
   _setClickCatcher(bool: boolean): void {
     this._showClickCatcher = bool;

src/core/style/_palette.scss

@@ -335,7 +335,6 @@ $md-light-theme-background: (
   hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
   card:       white,
   dialog:     white,
-  menu:       white,
   disabled-button:   rgba(black, 0.12)
 );
 
@@ -347,7 +346,6 @@ $md-dark-theme-background: (
   hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
   card:       map_get($md-grey, 800),
   dialog:     map_get($md-grey, 800),
-  menu:       map_get($md-grey, 800),
   disabled-button: rgba(white, 0.12)
 );
 

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

@@ -1,5 +1,5 @@
 <div class="demo-menu">
-  <div>
+  <div class="menu-section">
     <p>You clicked on: {{ selected }}</p>
 
     <md-toolbar>
@@ -14,7 +14,7 @@
       </button>
     </md-menu>
   </div>
-  <div>
+  <div class="menu-section">
     <p> Clicking these will navigate:</p>
     <md-toolbar>
       <button md-icon-button [md-menu-trigger-for]="anchorMenu">

src/demo-app/menu/menu-demo.scss

@@ -1,7 +1,7 @@
 .demo-menu {
   display: flex;
 
-  div {
+  .menu-section {
     width: 300px;
     margin: 20px;
   }