chore(button): re-add ripples (#1332)

angular · Sep 26, 2016 · dc21607 · dc21607
1 parent 23143b9
commit dc21607
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/src/lib/button/button.html b/src/lib/button/button.html
@@ -1 +1,6 @@
 <span class="md-button-wrapper"><ng-content></ng-content></span>
+<div md-ripple *ngIf="isRippleEnabled()" class="md-button-ripple"
+    [class.md-button-ripple-round]="isRoundButton()"
+    [md-ripple-trigger]="getHostElement()"
+    [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
+    md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
diff --git a/src/lib/button/button.spec.ts b/src/lib/button/button.spec.ts
@@ -120,7 +120,22 @@ describe('MdButton', () => {
       fixture.detectChanges();
       expect(buttonDebugElement.nativeElement.getAttribute('aria-disabled')).toBe('true');
     });
+  });
+
+  // Ripple tests.
+  describe('button ripples', () => {
+    it('should remove ripple if md-ripple-disabled input is set', () => {
+      let fixture = TestBed.createComponent(TestApp);
+      let testComponent = fixture.debugElement.componentInstance;
+      let buttonDebugElement = fixture.debugElement.query(By.css('button'));
 
+      fixture.detectChanges();
+      expect(buttonDebugElement.nativeElement.querySelectorAll('[md-ripple]').length).toBe(1);
+
+      testComponent.rippleDisabled = true;
+      fixture.detectChanges();
+      expect(buttonDebugElement.nativeElement.querySelectorAll('[md-ripple]').length).toBe(0);
+    });
   });
 });