Fix demo app flat button and waves effect (#278)

sherweb · Jan 29, 2018 · 4c3e984 · 4c3e984
1 parent d6de430
commit 4c3e984
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/demo-app/src/app/button/button.component.html b/demo-app/src/app/button/button.component.html
@@ -73,15 +73,15 @@ <h5 class="light">Flat button</h5>
 <div class="row m-valign-wrapper">
 
   <div class="col s12 m3">
-    <button mz-button
+    <a mz-button
       [flat]="true"
     >
       button
-    </button>
+    </a>
   </div>
 
   <p class="col s12 m9">
-    The button has a flat elevation with <code class="language-markup">flat</code> property
+    The link has a flat elevation with <code class="language-markup">flat</code> property
   </p>
 </div>
 

diff --git a/src/app/button/button.directive.ts b/src/app/button/button.directive.ts
@@ -65,6 +65,9 @@ export class MzButtonDirective extends HandlePropChanges implements OnInit {
 
   handleNoWaves() {
     this.renderer.setElementClass(this.elementRef.nativeElement, 'waves-effect', !this.noWaves);
-    this.renderer.setElementClass(this.elementRef.nativeElement, 'waves-light', !this.noWaves);
+
+    if (!this.flat) {
+      this.renderer.setElementClass(this.elementRef.nativeElement, 'waves-light', !this.noWaves);
+    }
   }
 }
diff --git a/src/app/button/button.directive.unit.spec.ts b/src/app/button/button.directive.unit.spec.ts
@@ -188,6 +188,19 @@ describe('MzButtonDirective:unit', () => {
         ]);
       });
 
+      it('should add only waves-effect on button element when flat is true', () => {
+
+        const rendererSpy = spyOn(renderer, 'setElementClass');
+
+        directive.flat = true;
+        directive.handleNoWaves();
+
+        expect(rendererSpy.calls.count()).toBe(1);
+        expect(rendererSpy.calls.allArgs()).toEqual([
+          [mockElementRef.nativeElement, 'waves-effect', !directive.noWaves],
+        ]);
+      });
+
       it('should not add waves-effect and waves-light on button element when noWaves is true', () => {
 
         const rendererSpy = spyOn(renderer, 'setElementClass');