diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index 966ecff6ca3f..1e0a0d040002 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/src/lib/checkbox/checkbox.scss @@ -278,7 +278,7 @@ md-checkbox { transform: scaleX(0) rotate(0deg); } -.md-checkbox-align-end { +.md-checkbox-label-before { .md-checkbox-inner-container { order: 1; margin: { diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index ac7e3e83c3d7..b88bf3b73da9 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -213,11 +213,11 @@ describe('MdCheckbox', () => { expect(inputElement.tabIndex).toBe(0); }); - it('should add a css class to end-align the checkbox', () => { - testComponent.alignment = 'end'; + it('should add a css class to position the label before the checkbox', () => { + testComponent.labelPos = 'before'; fixture.detectChanges(); - expect(checkboxNativeElement.classList).toContain('md-checkbox-align-end'); + expect(checkboxNativeElement.classList).toContain('md-checkbox-label-before'); }); it('should not trigger the click event multiple times', () => { @@ -626,7 +626,7 @@ describe('MdCheckbox', () => { { ` }) class SingleCheckbox { - alignment: string = 'start'; + labelPos: 'before' | 'after' = 'after'; isChecked: boolean = false; isRequired: boolean = false; isIndeterminate: boolean = false; diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index ad1332117327..0231cdfebfeb 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -72,7 +72,7 @@ export class MdCheckboxChange { '[class.md-checkbox-indeterminate]': 'indeterminate', '[class.md-checkbox-checked]': 'checked', '[class.md-checkbox-disabled]': 'disabled', - '[class.md-checkbox-align-end]': 'align == "end"', + '[class.md-checkbox-label-before]': 'labelPosition == "before"', '[class.md-checkbox-focused]': '_hasFocus', }, providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR], @@ -114,8 +114,23 @@ export class MdCheckbox implements ControlValueAccessor { get required(): boolean { return this._required; } set required(value) { this._required = coerceBooleanProperty(value); } - /** Whether or not the checkbox should come before or after the label. */ - @Input() align: 'start' | 'end' = 'start'; + /** + * Whether or not the checkbox should appear before or after the label. + * @deprecated + */ + @Input() + get align(): 'start' | 'end' { + // align refers to the checkbox relative to the label, while labelPosition refers to the + // label relative to the checkbox. As such, they are inverted. + return this.labelPosition == 'after' ? 'start' : 'end'; + } + + set align(v) { + this.labelPosition = (v == 'start') ? 'after' : 'before'; + } + + /** Whether the label should appear after or before the checkbox. Defaults to 'after' */ + @Input() labelPosition: 'before' | 'after' = 'after'; private _disabled: boolean = false; diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html index 24b9ba8c6dc1..4afe48a73586 100644 --- a/src/lib/radio/radio.html +++ b/src/lib/radio/radio.html @@ -25,7 +25,7 @@ (click)="_onInputClick($event)"> -
+
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss index 14cf53a066bf..574833a0a37b 100644 --- a/src/lib/radio/radio.scss +++ b/src/lib/radio/radio.scss @@ -74,7 +74,7 @@ md-radio-button { } // Alignment. -.md-radio-label-content.md-radio-align-end { +.md-radio-label-content.md-radio-label-before { order: -1; padding-left: 0; padding-right: $md-toggle-padding; diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts index e8dcd53126c7..48cfe1a6599c 100644 --- a/src/lib/radio/radio.spec.ts +++ b/src/lib/radio/radio.spec.ts @@ -70,19 +70,19 @@ describe('MdRadio', () => { expect(radioInstances[0].checked).toBe(false); }); - it('should set alignment based on the group alignment', () => { - testComponent.alignment = 'end'; + it('should set label position based on the group labelPosition', () => { + testComponent.labelPos = 'before'; fixture.detectChanges(); for (let radio of radioInstances) { - expect(radio.align).toBe('end'); + expect(radio.labelPosition).toBe('before'); } - testComponent.alignment = 'start'; + testComponent.labelPos = 'after'; fixture.detectChanges(); for (let radio of radioInstances) { - expect(radio.align).toBe('start'); + expect(radio.labelPosition).toBe('after'); } }); @@ -586,7 +586,7 @@ describe('MdRadio', () => { @Component({ template: ` Charmander @@ -596,7 +596,7 @@ describe('MdRadio', () => { ` }) class RadiosInsideRadioGroup { - alignment: string; + labelPos: 'before' | 'after'; isGroupDisabled: boolean = false; groupValue: string = null; disableRipple: boolean = false; diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index d0f4bfaa6874..c6bcd4089ae7 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -111,8 +111,23 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor { this._updateRadioButtonNames(); } - /** Alignment of the radio-buttons relative to their labels. Can be 'before' or 'after'. */ - @Input() align: 'before' | 'after'; + /** + * Alignment of the radio-buttons relative to their labels. Can be 'before' or 'after'. + * @deprecated + */ + @Input() + get align(): 'start' | 'end' { + // align refers to the checkbox relative to the label, while labelPosition refers to the + // label relative to the checkbox. As such, they are inverted. + return this.labelPosition == 'after' ? 'start' : 'end'; + } + + set align(v) { + this.labelPosition = (v == 'start') ? 'after' : 'before'; + } + + /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */ + @Input() labelPosition: 'before' | 'after' = 'after'; @Input() get disabled(): boolean { @@ -363,16 +378,31 @@ export class MdRadioButton implements OnInit { } } - private _align: 'before' | 'after'; + /** + * Whether or not the radio-button should appear before or after the label. + * @deprecated + */ + @Input() + get align(): 'start' | 'end' { + // align refers to the checkbox relative to the label, while labelPosition refers to the + // label relative to the checkbox. As such, they are inverted. + return this.labelPosition == 'after' ? 'start' : 'end'; + } + + set align(v) { + this.labelPosition = (v == 'start') ? 'after' : 'before'; + } + + private _labelPosition: 'before' | 'after'; - /** Alignment of the radio-button relative to their labels. Can be 'before' or 'after'. */ + /** Whether the label should appear after or before the radio button. Defaults to 'after' */ @Input() - get align(): 'before' | 'after' { - return this._align || (this.radioGroup != null && this.radioGroup.align) || 'before'; + get labelPosition(): 'before' | 'after' { + return this._labelPosition || (this.radioGroup && this.radioGroup.labelPosition) || 'after'; } - set align(value: 'before' | 'after') { - this._align = value; + set labelPosition(value) { + this._labelPosition = value; } /** Whether the radio button is disabled. */