From 547d11f870274f10e7de23ec134c748e7eaf272a Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Wed, 6 Sep 2017 19:38:19 +0200
Subject: [PATCH] fix(selection-list): proper style for disabled options
 (#6829)

* No longer shows ripples if md-list-option is disabled
* Properly shows disabled style for disabled md-list-option (the `mat-list-item-disabled` class has been already added as part of the selection list PR)
---
 src/lib/list/selection-list.spec.ts | 55 +++++++++++++++++++++++++++++
 src/lib/list/selection-list.ts      |  3 +-
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts
index 926913c6e3c..6b87ea7d450 100644
--- a/src/lib/list/selection-list.spec.ts
+++ b/src/lib/list/selection-list.spec.ts
@@ -232,6 +232,52 @@ describe('MdSelectionList', () => {
     });
   });
 
+  describe('with option disabled', () => {
+    let fixture: ComponentFixture<SelectionListWithDisabledOption>;
+    let listOptionEl: HTMLElement;
+    let listOption: MdListOption;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [MdListModule],
+        declarations: [SelectionListWithDisabledOption]
+      });
+
+      TestBed.compileComponents();
+    }));
+
+    beforeEach(async(() => {
+      fixture = TestBed.createComponent(SelectionListWithDisabledOption);
+
+      const listOptionDebug = fixture.debugElement.query(By.directive(MdListOption));
+
+      listOption = listOptionDebug.componentInstance;
+      listOptionEl = listOptionDebug.nativeElement;
+
+      fixture.detectChanges();
+    }));
+
+    it('should disable ripples for disabled option', () => {
+      expect(listOption._isRippleDisabled())
+        .toBe(false, 'Expected ripples to be enabled by default');
+
+      fixture.componentInstance.disableItem = true;
+      fixture.detectChanges();
+
+      expect(listOption._isRippleDisabled())
+        .toBe(true, 'Expected ripples to be disabled if option is disabled');
+    });
+
+    it('should apply the "mat-list-item-disabled" class properly', () => {
+      expect(listOptionEl.classList).not.toContain('mat-list-item-disabled');
+
+      fixture.componentInstance.disableItem = true;
+      fixture.detectChanges();
+
+      expect(listOptionEl.classList).toContain('mat-list-item-disabled');
+    });
+  });
+
   describe('with list disabled', () => {
     let fixture: ComponentFixture<SelectionListWithListDisabled>;
     let listOption: DebugElement[];
@@ -363,6 +409,15 @@ class SelectionListWithCheckboxPositionAfter {
 class SelectionListWithListDisabled {
 }
 
+@Component({template: `
+  <mat-selection-list>
+    <md-list-option [disabled]="disableItem">Item</md-list-option>
+  </mat-selection-list>
+  `})
+class SelectionListWithDisabledOption {
+  disableItem: boolean = false;
+}
+
 @Component({template: `
   <mat-selection-list id = "selection-list-4">
     <md-list-option checkboxPosition = "after" class="test-focus" id="123">
diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts
index beaf0ede375..753a6acbf37 100644
--- a/src/lib/list/selection-list.ts
+++ b/src/lib/list/selection-list.ts
@@ -65,6 +65,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
     '(blur)': '_handleBlur()',
     '(click)': '_handleClick()',
     'tabindex': '-1',
+    '[class.mat-list-item-disabled]': 'disabled',
     '[attr.aria-selected]': 'selected.toString()',
     '[attr.aria-disabled]': 'disabled.toString()',
   },
@@ -148,7 +149,7 @@ export class MdListOption extends _MdListOptionMixinBase
 
   /** Whether this list item should show a ripple effect when clicked.  */
   _isRippleDisabled() {
-    return this.disableRipple || this.selectionList.disableRipple;
+    return this.disabled || this.disableRipple || this.selectionList.disableRipple;
   }
 
   _handleClick() {