fix(list): adds focus state for nav-list items (#502)

closes #323

Note: More discussion needed on list items with multiple actions.

src/components/list/list-item.html

@@ -1,5 +1,5 @@
-<div class="md-list-item">
+<div class="md-list-item" [class.md-list-item-focus]="hasFocus">
   <ng-content select="[md-list-avatar],[md-list-icon]"></ng-content>
   <div class="md-list-text"><ng-content select="[md-line]"></ng-content></div>
   <ng-content></ng-content>
-</div>
+</div>

src/components/list/list.scss

@@ -25,11 +25,11 @@ $md-dense-avatar-height: 48px;
 $md-dense-two-line-height: 60px;
 $md-dense-three-line-height: 76px;
 
-/*  
+/*
 This mixin provides all list-item styles, changing font size and height
 based on whether the list is in dense mode.
 */
-@mixin md-list-item-base($font-size, $base-height, $avatar-height, 
+@mixin md-list-item-base($font-size, $base-height, $avatar-height,
   $two-line-height, $three-line-height) {
 
   .md-list-item {
@@ -94,7 +94,7 @@ based on whether the list is in dense mode.
 }
 
 /*
-This mixin provides all md-line styles, changing secondary font size 
+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) {
@@ -201,8 +201,8 @@ md-nav-list {
   .md-list-item {
     cursor: pointer;
 
-    &:hover {
+    &:hover, &.md-list-item-focus {
       background: md-color($md-background, 'hover');
     }
   }
-}
+}

src/components/list/list.spec.ts

@@ -9,7 +9,7 @@ import {TestComponentBuilder} from '@angular/compiler/testing';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
 
-import {MD_LIST_DIRECTIVES} from './list';
+import {MD_LIST_DIRECTIVES, MdListItem} from './list';
 
 describe('MdList', () => {
   let builder: TestComponentBuilder;
@@ -18,6 +18,31 @@ describe('MdList', () => {
     builder = tcb;
   }));
 
+  it('should add and remove focus class on focus/blur', () => {
+    var template = `
+        <md-list>
+          <a md-list-item>
+            Paprika
+          </a>
+        </md-list>
+      `;
+    return builder.overrideTemplate(TestList, template)
+        .createAsync(TestList).then((fixture) => {
+          let listItem = fixture.debugElement.query(By.directive(MdListItem));
+          let listItemDiv = fixture.debugElement.query(By.css('.md-list-item'));
+          fixture.detectChanges();
+          expect(listItemDiv.nativeElement.classList).not.toContain('md-list-item-focus');
+
+          listItem.componentInstance.handleFocus();
+          fixture.detectChanges();
+          expect(listItemDiv.nativeElement.classList).toContain('md-list-item-focus');
+
+          listItem.componentInstance.handleBlur();
+          fixture.detectChanges();
+          expect(listItemDiv.nativeElement.classList).not.toContain('md-list-item-focus');
+        });
+  });
+
   it('should not apply any class to a list without lines', (done: () => void) => {
     var template = `
         <md-list>

src/components/list/list.ts

@@ -33,13 +33,20 @@ export class MdListAvatar {}
 @Component({
   moduleId: module.id,
   selector: 'md-list-item, a[md-list-item]',
-  host: {'role': 'listitem'},
+  host: {
+    'role': 'listitem',
+    '(focus)': 'handleFocus()',
+    '(blur)': 'handleBlur()',
+  },
   templateUrl: 'list-item.html',
   encapsulation: ViewEncapsulation.None
 })
 export class MdListItem implements AfterContentInit {
   @ContentChildren(MdLine) _lines: QueryList<MdLine>;
 
+  /** @internal */
+  hasFocus: boolean = false;
+
   /** @internal */
   ngAfterContentInit() {
     this._setLineClass(this._lines.length);
@@ -56,6 +63,16 @@ export class MdListItem implements AfterContentInit {
 
   constructor(private _renderer: Renderer, private _element: ElementRef) {}
 
+  /** @internal */
+  handleFocus() {
+    this.hasFocus = true;
+  }
+
+  /** @internal */
+  handleBlur() {
+    this.hasFocus = false;
+  }
+
   private _setLineClass(count: number): void {
     this._resetClasses();
     if (count === 2 || count === 3) {