Skip to content

Commit 32aa461

Browse files
dozingcatjelbourn
authored andcommitted
feat(button): add ripple to md-button
1 parent ca351b2 commit 32aa461

File tree

7 files changed

+71
-6
lines changed

7 files changed

+71
-6
lines changed

src/components/button/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,3 +112,4 @@ Properties:
112112
| --- | --- | --- |
113113
| `color` | `"primary"|"accent"|"warn"` | The color palette of the button
114114
| `disabled` | boolean | Whether or not the button is disabled
115+
| `disableRipple` | boolean | Whether the ripple effect when the button is clicked should be disabled

src/components/button/button.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
<span class="md-button-wrapper"><ng-content></ng-content></span>
2+
<div md-ripple *ngIf="isRippleEnabled()" class="md-button-ripple"
3+
[class.md-button-ripple-round]="isRoundButton()"
4+
[md-ripple-trigger]="getHostElement()"
5+
[md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''"
6+
md-ripple-background-color="rgba(0, 0, 0, 0)"></div>

src/components/button/button.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,23 @@
4343
}
4444
}
4545

46+
// The ripple container should match the bounds of the entire button.
47+
.md-button-ripple {
48+
position: absolute;
49+
top: 0;
50+
left: 0;
51+
bottom: 0;
52+
right: 0;
53+
}
54+
55+
// For round buttons, the ripple container should clip child ripples to a circle.
56+
.md-button-ripple-round {
57+
border-radius: 50%;
58+
// z-index needed to make clipping to border-radius work correctly.
59+
// http://stackoverflow.com/questions/20001515/chrome-bug-border-radius-not-clipping-contents-when-combined-with-css-transiti
60+
z-index: 1;
61+
}
62+
4663
// Only flat buttons and icon buttons (not raised or fabs) have a hover style.
4764
[md-button]:hover, [md-icon-button]:hover {
4865
// Use the same visual treatment for hover as for focus.

src/components/button/button.spec.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,14 +143,31 @@ describe('MdButton', () => {
143143
});
144144

145145
});
146+
147+
// Ripple tests.
148+
describe('button ripples', () => {
149+
it('should remove ripple if md-ripple-disabled input is set', async(() => {
150+
builder.createAsync(TestApp).then(fixture => {
151+
let testComponent = fixture.debugElement.componentInstance;
152+
let buttonDebugElement = fixture.debugElement.query(By.css('button'));
153+
154+
fixture.detectChanges();
155+
expect(buttonDebugElement.nativeElement.querySelectorAll('[md-ripple]').length).toBe(1);
156+
157+
testComponent.rippleDisabled = true;
158+
fixture.detectChanges();
159+
expect(buttonDebugElement.nativeElement.querySelectorAll('[md-ripple]').length).toBe(0);
160+
});
161+
}));
162+
});
146163
});
147164

148165
/** Test component that contains an MdButton. */
149166
@Component({
150167
selector: 'test-app',
151168
template: `
152169
<button md-button type="button" (click)="increment()"
153-
[disabled]="isDisabled" [color]="buttonColor">
170+
[disabled]="isDisabled" [color]="buttonColor" [disableRipple]="rippleDisabled">
154171
Go
155172
</button>
156173
<a href="http://www.google.com" md-button [disabled]="isDisabled" [color]="buttonColor">Link</a>
@@ -159,6 +176,7 @@ describe('MdButton', () => {
159176
class TestApp {
160177
clickCount: number = 0;
161178
isDisabled: boolean = false;
179+
rippleDisabled: boolean = false;
162180

163181
increment() {
164182
this.clickCount++;

src/components/button/button.ts

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ import {
99
Type,
1010
NgModule,
1111
} from '@angular/core';
12+
import {MD_RIPPLE_DIRECTIVES} from '@angular2-material/core/core';
13+
import {BooleanFieldValue} from '@angular2-material/core/annotations/field-value';
1214

13-
// TODO(jelbourn): Ink ripples.
1415
// TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
1516
// TODO(kara): Convert attribute selectors to classes when attr maps become available
1617

@@ -28,6 +29,7 @@ import {
2829
},
2930
templateUrl: 'button.html',
3031
styleUrls: ['button.css'],
32+
directives: [MD_RIPPLE_DIRECTIVES],
3133
encapsulation: ViewEncapsulation.None,
3234
changeDetection: ChangeDetectionStrategy.OnPush,
3335
})
@@ -40,6 +42,9 @@ export class MdButton {
4042
/** Whether a mousedown has occurred on this element in the last 100ms. */
4143
_isMouseDown: boolean = false;
4244

45+
/** Whether the ripple effect on click should be disabled. */
46+
@Input() @BooleanFieldValue() disableRipple: boolean = false;
47+
4348
constructor(private _elementRef: ElementRef, private _renderer: Renderer) { }
4449

4550
get color(): string {
@@ -83,6 +88,21 @@ export class MdButton {
8388
focus() {
8489
this._elementRef.nativeElement.focus();
8590
}
91+
92+
getHostElement() {
93+
return this._elementRef.nativeElement;
94+
}
95+
96+
isRoundButton() {
97+
const el = this._elementRef.nativeElement;
98+
return el.hasAttribute('md-icon-button') ||
99+
el.hasAttribute('md-fab') ||
100+
el.hasAttribute('md-mini-fab');
101+
}
102+
103+
isRippleEnabled() {
104+
return !this.disableRipple;
105+
}
86106
}
87107

88108
@Component({
@@ -98,6 +118,7 @@ export class MdButton {
98118
},
99119
templateUrl: 'button.html',
100120
styleUrls: ['button.css'],
121+
directives: [MD_RIPPLE_DIRECTIVES],
101122
encapsulation: ViewEncapsulation.None
102123
})
103124
export class MdAnchor extends MdButton {

src/demo-app/ripple/ripple-demo.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<!-- Use <md-card>? -->
22
<div class="demo-ripple">
33
<section>
4-
<button md-button>flat</button>
5-
<button md-raised-button>raised</button>
6-
<button md-fab>
4+
<md-checkbox [(ngModel)]="disableButtonRipples">Disable button ripples</md-checkbox>
5+
<button md-button [disableRipple]="disableButtonRipples">flat</button>
6+
<button md-raised-button [disableRipple]="disableButtonRipples">raised</button>
7+
<button md-fab [disableRipple]="disableButtonRipples">
78
<md-icon>check</md-icon>
89
</button>
9-
<button md-mini-fab>
10+
<button md-mini-fab [disableRipple]="disableButtonRipples">
1011
<md-icon>check</md-icon>
1112
</button>
1213
</section>

src/demo-app/ripple/ripple-demo.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export class RippleDemo {
2020
rippleColor = '';
2121
rippleBackgroundColor = '';
2222

23+
disableButtonRipples = false;
24+
2325
doManualRipple() {
2426
if (this.manualRipple) {
2527
window.setTimeout(() => this.manualRipple.start(), 10);

0 commit comments

Comments
 (0)