diff --git a/src/components/list/list-item.html b/src/components/list/list-item.html index 63f1544b67a3..630fd1d910b5 100644 --- a/src/components/list/list-item.html +++ b/src/components/list/list-item.html @@ -1,5 +1,5 @@ -
+
-
\ No newline at end of file +
diff --git a/src/components/list/list.scss b/src/components/list/list.scss index 3263e4c9a800..cf407af33901 100644 --- a/src/components/list/list.scss +++ b/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'); } } -} \ No newline at end of file +} diff --git a/src/components/list/list.spec.ts b/src/components/list/list.spec.ts index 14f0afea34ab..c2577b8d9991 100644 --- a/src/components/list/list.spec.ts +++ b/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 = ` + + + Paprika + + + `; + 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 = ` diff --git a/src/components/list/list.ts b/src/components/list/list.ts index 8846b6ed5666..51c557c41d36 100644 --- a/src/components/list/list.ts +++ b/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; + /** @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) {