diff --git a/src/lib/checkbox/_checkbox-theme.scss b/src/lib/checkbox/_checkbox-theme.scss index 4bde9b49407f..3cb0744e732c 100644 --- a/src/lib/checkbox/_checkbox-theme.scss +++ b/src/lib/checkbox/_checkbox-theme.scss @@ -68,17 +68,16 @@ } } - // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied. .md-checkbox-focused { - &.md-primary .md-ink-ripple { + &.md-primary .md-checkbox-ripple .md-ripple-foreground { background-color: md-color($primary, 0.26); } - &.md-accent .md-ink-ripple { + &.md-accent .md-checkbox-ripple .md-ripple-foreground { background-color: md-color($accent, 0.26); } - &.md-warn .md-ink-ripple { + &.md-warn .md-checkbox-ripple .md-ripple-foreground { background-color: md-color($warn, 0.26); } } diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html index f4b2b1154204..cccad19f1cac 100644 --- a/src/lib/checkbox/checkbox.html +++ b/src/lib/checkbox/checkbox.html @@ -14,7 +14,11 @@ (blur)="_onInputBlur()" (change)="_onInteractionEvent($event)" (click)="_onInputClick($event)"> -
+
{checked,indeterminate}. @keyframes md-checkbox-fade-in-background { 0% { @@ -414,4 +417,12 @@ md-checkbox { left: 50%; } -@include md-temporary-ink-ripple(checkbox); +.md-checkbox-ripple { + position: absolute; + left: -$md-checkbox-ripple-size; + top: -$md-checkbox-ripple-size; + right: -$md-checkbox-ripple-size; + bottom: -$md-checkbox-ripple-size; + border-radius: 50%; + z-index: 1; +} diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index e0e0a251baeb..7fd7c478c6fa 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -483,6 +483,20 @@ describe('MdCheckbox', () => { expect(inputElement.tabIndex).toBe(13); }); + + it('should remove ripple if md-ripple-disabled input is set', async(() => { + testComponent.disableRipple = true; + fixture.detectChanges(); + + expect(checkboxNativeElement.querySelectorAll('[md-ripple]').length) + .toBe(0, 'Expect no [md-ripple] in checkbox'); + + testComponent.disableRipple = false; + fixture.detectChanges(); + + expect(checkboxNativeElement.querySelectorAll('[md-ripple]').length) + .toBe(1, 'Expect [md-ripple] in checkbox'); + })); }); describe('with multiple checkboxes', () => { @@ -598,12 +612,16 @@ class MultipleCheckboxes { } /** Simple test component with tabIndex */ @Component({ template: ` - + `, }) class CheckboxWithTabIndex { customTabIndex: number = 7; isDisabled: boolean = false; + disableRipple: boolean = false; } /** Simple test component with an aria-label set. */ diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 8d595def9bd4..9e14b4314ca5 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -11,9 +11,10 @@ import { NgModule, ModuleWithProviders, } from '@angular/core'; +import {CommonModule} from '@angular/common'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; import {coerceBooleanProperty} from '../core/coersion/boolean-property'; - +import {MdRippleModule} from '../core'; /** * Monotonically increasing integer used to auto-generate unique ids for checkbox components. @@ -89,6 +90,13 @@ export class MdCheckbox implements ControlValueAccessor { /** A unique id for the checkbox. If one is not supplied, it is auto-generated. */ @Input() id: string = `md-checkbox-${++nextId}`; + /** Whether the ripple effect on click should be disabled. */ + private _disableRipple: boolean; + + @Input() + get disableRipple(): boolean { return this._disableRipple; } + set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); } + /** ID to be applied to the `input` element */ get inputId(): string { return `input-${this.id}`; @@ -338,10 +346,15 @@ export class MdCheckbox implements ControlValueAccessor { return `md-checkbox-anim-${animSuffix}`; } + + getHostElement() { + return this._elementRef.nativeElement; + } } @NgModule({ + imports: [CommonModule, MdRippleModule], exports: [MdCheckbox], declarations: [MdCheckbox], })