diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss index 465feaf68e9..71fe8e93872 100644 --- a/src/lib/list/_list-theme.scss +++ b/src/lib/list/_list-theme.scss @@ -27,7 +27,8 @@ } .mat-list-option, - .mat-nav-list .mat-list-item { + .mat-nav-list .mat-list-item, + .mat-action-list .mat-list-item { &:hover, &:focus { background: mat-color($background, 'hover'); } diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss index 6961281344d..1741c8af9b6 100644 --- a/src/lib/list/list.scss +++ b/src/lib/list/list.scss @@ -315,7 +315,8 @@ mat-action-list { // use something like `@media (hover)`. @media (hover: none) { .mat-list-option, - .mat-nav-list .mat-list-item { + .mat-nav-list .mat-list-item, + .mat-action-list .mat-list-item { &:not(.mat-list-item-disabled):hover { background: none; } diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts index 2d75be2f0b3..e11d4684a9d 100644 --- a/src/lib/list/list.spec.ts +++ b/src/lib/list/list.spec.ts @@ -140,6 +140,14 @@ describe('MatList', () => { expect(items.length).toBeGreaterThan(0); }); + it('should set the proper class on the action list host', () => { + const fixture = TestBed.createComponent(ActionListWithoutType); + fixture.detectChanges(); + + const host = fixture.nativeElement.querySelector('mat-action-list'); + expect(host.classList).toContain('mat-action-list'); + }); + it('should enable ripples for action lists by default', () => { const fixture = TestBed.createComponent(ActionListWithoutType); fixture.detectChanges(); diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 0c6c69c07cc..1b9ee16a10e 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -94,6 +94,10 @@ export class MatList extends _MatListMixinBase implements CanDisableRipple, OnCh */ constructor(private _elementRef?: ElementRef) { super(); + + if (this._getListType() === 'action-list' && _elementRef) { + _elementRef.nativeElement.classList.add('mat-action-list'); + } } _getListType(): 'list' | 'action-list' | null {