feat(menu): add animations and ripple

Closes #1671

Author: kara

src/lib/core/style/_menu-common.scss

@@ -11,7 +11,6 @@ $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-vertical-padding: 8px !default;
 
 @mixin md-menu-base() {
   @include md-elevation(2);
@@ -20,9 +19,6 @@ $md-menu-vertical-padding: 8px !default;
 
   overflow: auto;
   -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
-
-  padding-top: $md-menu-vertical-padding;
-  padding-bottom: $md-menu-vertical-padding;
 }
 
 @mixin md-menu-item-base() {

src/lib/menu/_menu-theme.scss

@@ -6,7 +6,7 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  .md-menu-panel {
+  .md-menu-content {
     background: md-color($background, 'card');
   }
 

src/lib/menu/menu-animations.ts

@@ -0,0 +1,51 @@
+import{
+  AnimationEntryMetadata,
+  trigger,
+  state,
+  style,
+  animate,
+  transition
+} from '@angular/core';
+
+/**
+ * Below are all the animations for the md-menu component.
+ * Animation duration and timing values are based on Material 1.
+ */
+
+
+/**
+ * This animation controls the menu panel's entry and exit from the page.
+ *
+ * When the menu panel is added to the DOM, it scales in and fades in its border.
+ *
+ * When the menu panel is removed from the DOM, it simply fades out after a brief
+ * delay to display the ripple.
+ */
+export const transformMenu: AnimationEntryMetadata = trigger('transformMenu', [
+  state('showing', style({
+    opacity: 1,
+    transform: `scale(1)`
+  })),
+  transition('void => *', [
+    style({
+      opacity: 0,
+      transform: `scale(0)`
+    }),
+    animate(`200ms cubic-bezier(0.25, 0.8, 0.25, 1)`)
+  ]),
+  transition('* => void', [
+    animate('50ms 100ms linear', style({opacity: 0}))
+  ])
+]);
+
+/**
+ * This animation fades in the background color and content of the menu panel
+ * after its containing element is scaled in.
+ */
+export const fadeInItems: AnimationEntryMetadata = trigger('fadeInItems', [
+  state('showing', style({opacity: 1})),
+  transition('void => showing', [
+    style({opacity: 0}),
+    animate(`200ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)`)
+  ])
+]);

src/lib/menu/menu-directive.ts

@@ -12,14 +12,15 @@ import {
   QueryList,
   TemplateRef,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import {MenuPositionX, MenuPositionY} from './menu-positions';
 import {MdMenuInvalidPositionX, MdMenuInvalidPositionY} from './menu-errors';
 import {MdMenuItem} from './menu-item';
 import {ListKeyManager} from '../core/a11y/list-key-manager';
 import {MdMenuPanel} from './menu-panel';
 import {Subscription} from 'rxjs/Subscription';
+import {transformMenu, fadeInItems} from './menu-animations';
 
 @Component({
   moduleId: module.id,
@@ -28,6 +29,10 @@ import {Subscription} from 'rxjs/Subscription';
   templateUrl: 'menu.html',
   styleUrls: ['menu.css'],
   encapsulation: ViewEncapsulation.None,
+  animations: [
+    transformMenu,
+    fadeInItems
+  ],
   exportAs: 'mdMenu'
 })
 export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
@@ -91,11 +96,12 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
     this.items.first.focus();
     this._keyManager.focusedItemIndex = 0;
   }
+
   /**
    * This emits a close event to which the trigger is subscribed. When emitted, the
    * trigger will close the menu.
    */
-  private _emitCloseEvent(): void {
+  _emitCloseEvent(): void {
     this.close.emit();
   }
 

src/lib/menu/menu-item.html

@@ -0,0 +1,4 @@
+<ng-content></ng-content>
+<div class="md-menu-ripple" *ngIf="!disabled" md-ripple md-ripple-background-color="rgba(0,0,0,0)"
+     [md-ripple-trigger]="_getHostElement()">
+</div>

src/lib/menu/menu-item.ts

@@ -1,17 +1,19 @@
-import {Directive, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
+import {Component, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
 import {MdFocusable} from '../core/a11y/list-key-manager';
 
 /**
  * This directive is intended to be used inside an md-menu tag.
  * It exists mostly to set the role attribute.
  */
-@Directive({
+@Component({
+  moduleId: module.id,
   selector: '[md-menu-item]',
   host: {
     'role': 'menuitem',
     '(click)': '_checkDisabled($event)',
     'tabindex': '-1'
   },
+  templateUrl: 'menu-item.html',
   exportAs: 'mdMenuItem'
 })
 export class MdMenuItem implements MdFocusable {
@@ -36,12 +38,14 @@ export class MdMenuItem implements MdFocusable {
 
   @HostBinding('attr.aria-disabled')
   get isAriaDisabled(): string {
-    return String(this.disabled);
+    return String(!!this.disabled);
+  }
+
+
+  _getHostElement(): HTMLElement {
+    return this._elementRef.nativeElement;
   }
 
-  /**
-   * TODO: internal
-   */
   _checkDisabled(event: Event) {
     if (this.disabled) {
       event.preventDefault();

src/lib/menu/menu.html

@@ -1,7 +1,9 @@
 <template>
-  <div class="md-menu-panel" [ngClass]="_classList"
-      (click)="_emitCloseEvent()" (keydown)="_keyManager.onKeydown($event)">
-    <ng-content></ng-content>
+  <div class="md-menu-panel" [ngClass]="_classList" (keydown)="_keyManager.onKeydown($event)"
+    (click)="_emitCloseEvent()" [@transformMenu]="'showing'">
+    <div class="md-menu-content" [@fadeInItems]="'showing'">
+      <ng-content></ng-content>
+    </div>
   </div>
 </template>
 

src/lib/menu/menu.scss

@@ -5,18 +5,39 @@
 @import '../core/style/sidenav-common';
 @import '../core/style/menu-common';
 
+$md-menu-vertical-padding: 8px !default;
+
 .md-menu-panel {
   @include md-menu-base();
 
   // max height must be 100% of the viewport height + one row height
   max-height: calc(100vh + 48px);
+  transform-origin: left top;
+
+  [dir='rtl'] & {
+    transform-origin: right top;
+  }
+}
+
+.md-menu-content {
+  padding-top: $md-menu-vertical-padding;
+  padding-bottom: $md-menu-vertical-padding;
 }
 
 [md-menu-item] {
   @include md-button-reset();
   @include md-menu-item-base();
+  position: relative;
 }
 
 button[md-menu-item] {
   width: 100%;
 }
+
+.md-menu-ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}

src/lib/menu/menu.spec.ts

@@ -1,4 +1,5 @@
 import {TestBed, async} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
 import {
   Component,
   EventEmitter,
@@ -15,7 +16,6 @@ import {
 } from './menu';
 import {OverlayContainer} from '../core/overlay/overlay-container';
 
-
 describe('MdMenu', () => {
   let overlayContainerElement: HTMLElement;
 
@@ -42,11 +42,12 @@ describe('MdMenu', () => {
       fixture.componentInstance.trigger.openMenu();
       fixture.componentInstance.trigger.openMenu();
 
-      expect(overlayContainerElement.textContent.trim()).toBe('Simple Content');
+      expect(overlayContainerElement.textContent).toContain('Simple Content');
+      expect(overlayContainerElement.textContent).toContain('Disabled Content');
     }).not.toThrowError();
   });
 
-  it('should close the menu when a click occurs outside the menu', () => {
+  it('should close the menu when a click occurs outside the menu', async(() => {
     const fixture = TestBed.createComponent(SimpleMenu);
     fixture.detectChanges();
     fixture.componentInstance.trigger.openMenu();
@@ -55,8 +56,10 @@ describe('MdMenu', () => {
     backdrop.click();
     fixture.detectChanges();
 
-    expect(overlayContainerElement.textContent).toBe('');
-  });
+    fixture.whenStable().then(() => {
+      expect(overlayContainerElement.textContent).toBe('');
+    });
+  }));
 
   it('should open a custom menu', () => {
     const fixture = TestBed.createComponent(CustomMenu);
@@ -71,13 +74,37 @@ describe('MdMenu', () => {
     }).not.toThrowError();
   });
 
+  it('should include the ripple on items by default', () => {
+    const fixture = TestBed.createComponent(SimpleMenu);
+    fixture.detectChanges();
+
+    fixture.componentInstance.trigger.openMenu();
+    const item = fixture.debugElement.query(By.css('[md-menu-item]'));
+    const ripple = item.query(By.css('[md-ripple]'));
+
+    expect(ripple).not.toBeNull();
+  });
+
+  it('should remove the ripple on disabled items', () => {
+    const fixture = TestBed.createComponent(SimpleMenu);
+    fixture.detectChanges();
+
+    fixture.componentInstance.trigger.openMenu();
+    const items = fixture.debugElement.queryAll(By.css('[md-menu-item]'));
+
+    // items[1] is disabled, so the ripple should not be present
+    const ripple = items[1].query(By.css('[md-ripple]'));
+    expect(ripple).toBeNull();
+  });
+
 });
 
 @Component({
   template: `
     <button [md-menu-trigger-for]="menu">Toggle menu</button>
     <md-menu #menu="mdMenu">
       <button md-menu-item> Simple Content </button>
+      <button md-menu-item disabled> Disabled Content </button>
     </md-menu>
   `
 })

src/lib/menu/menu.ts

@@ -4,6 +4,7 @@ import {OverlayModule, OVERLAY_PROVIDERS} from '../core';
 import {MdMenu} from './menu-directive';
 import {MdMenuItem} from './menu-item';
 import {MdMenuTrigger} from './menu-trigger';
+import {MdRippleModule} from '../core/ripple/ripple';
 export {MdMenu} from './menu-directive';
 export {MdMenuItem} from './menu-item';
 export {MdMenuTrigger} from './menu-trigger';
@@ -12,7 +13,7 @@ export {MenuPositionX, MenuPositionY} from './menu-positions';
 
 
 @NgModule({
-  imports: [OverlayModule, CommonModule],
+  imports: [OverlayModule, CommonModule, MdRippleModule],
   exports: [MdMenu, MdMenuItem, MdMenuTrigger],
   declarations: [MdMenu, MdMenuItem, MdMenuTrigger],
 })