diff --git a/src/lib/radio/_radio-theme.scss b/src/lib/radio/_radio-theme.scss index a6e2229a7a29..e978c9b58fd3 100644 --- a/src/lib/radio/_radio-theme.scss +++ b/src/lib/radio/_radio-theme.scss @@ -29,8 +29,7 @@ } } - // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied. - .md-radio-focused .md-ink-ripple { + .md-radio-focused .md-radio-ripple .md-ripple-foreground { background-color: md-color($accent, 0.26); } } diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html index aa0c80a4657f..f6ff6f3e15d5 100644 --- a/src/lib/radio/radio.html +++ b/src/lib/radio/radio.html @@ -5,7 +5,11 @@
-
+
{ expect(radioInstances.every(radio => !radio.checked)).toBe(true); }); + + it('should remove ripple if md-ripple-disabled input is set', async(() => { + fixture.detectChanges(); + for (let radioNativeElement of radioNativeElements) + { + expect(radioNativeElement.querySelectorAll('[md-ripple]').length) + .toBe(1, 'Expect [md-ripple] in radio buttons'); + } + + testComponent.disableRipple = true; + fixture.detectChanges(); + for (let radioNativeElement of radioNativeElements) + { + expect(radioNativeElement.querySelectorAll('[md-ripple]').length) + .toBe(0, 'Expect no [md-ripple] in radio buttons'); + } + })); }); describe('group with ngModel', () => { @@ -437,9 +454,9 @@ describe('MdRadio', () => { [align]="alignment" [value]="groupValue" name="test-name"> - Charmander - Squirtle - Bulbasaur + Charmander + Squirtle + Bulbasaur ` }) @@ -447,6 +464,7 @@ class RadiosInsideRadioGroup { alignment: string; isGroupDisabled: boolean = false; groupValue: string = null; + disableRipple: boolean = false; } diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 20d43c5f6671..60a7e387026d 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -3,6 +3,7 @@ import { Component, ContentChildren, Directive, + ElementRef, EventEmitter, HostBinding, Input, @@ -15,11 +16,13 @@ import { NgModule, ModuleWithProviders, } from '@angular/core'; +import {CommonModule} from '@angular/common'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; -import {MdUniqueSelectionDispatcher} from '../core'; +import {MdRippleModule, MdUniqueSelectionDispatcher} from '../core'; +import {coerceBooleanProperty} from '../core/coersion/boolean-property'; @@ -263,14 +266,22 @@ export class MdRadioButton implements OnInit { /** Value assigned to this radio.*/ private _value: any = null; + /** Whether the ripple effect on click should be disabled. */ + private _disableRipple: boolean; + /** The parent radio group. May or may not be present. */ radioGroup: MdRadioGroup; + @Input() + get disableRipple(): boolean { return this._disableRipple; } + set disableRipple(value) { this._disableRipple = coerceBooleanProperty(value); } + /** Event emitted when the group value changes. */ @Output() change: EventEmitter = new EventEmitter(); constructor(@Optional() radioGroup: MdRadioGroup, + private _elementRef: ElementRef, public radioDispatcher: MdUniqueSelectionDispatcher) { // Assertions. Ideally these should be stripped out by the compiler. // TODO(jelbourn): Assert that there's no name binding AND a parent radio group. @@ -411,10 +422,15 @@ export class MdRadioButton implements OnInit { this.radioGroup._touch(); } } + + getHostElement() { + return this._elementRef.nativeElement; + } } @NgModule({ + imports: [CommonModule, MdRippleModule], exports: [MdRadioGroup, MdRadioButton], declarations: [MdRadioGroup, MdRadioButton], })