fix(list): action list missing focus and hover styling (#14147)

Since the action list is interactive, it needs styles when it's hovered and focused.
This commit is contained in:
Kristiyan Kostadinov
2019-03-04 22:28:43 +01:00
committed by Joey Perrott
parent 2470a4249e
commit 3f8d02c2d6
4 changed files with 16 additions and 2 deletions
+2 -1
View File
@@ -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');
}
+2 -1
View File
@@ -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;
}
+8
View File
@@ -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();
+4
View File
@@ -94,6 +94,10 @@ export class MatList extends _MatListMixinBase implements CanDisableRipple, OnCh
*/
constructor(private _elementRef?: ElementRef<HTMLElement>) {
super();
if (this._getListType() === 'action-list' && _elementRef) {
_elementRef.nativeElement.classList.add('mat-action-list');
}
}
_getListType(): 'list' | 'action-list' | null {