feat(checkbox, radio): change align to labelPosition (inverted) (#2289)

Author: jelbourn

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: {

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', () => {
     <md-checkbox
         id="simple-check"
         [required]="isRequired"
-        [align]="alignment"
+        [labelPosition]="labelPos"
         [checked]="isChecked"
         [indeterminate]="isIndeterminate"
         [disabled]="isDisabled"
@@ -639,7 +639,7 @@ describe('MdCheckbox', () => {
   </div>`
 })
 class SingleCheckbox {
-  alignment: string = 'start';
+  labelPos: 'before' | 'after' = 'after';
   isChecked: boolean = false;
   isRequired: boolean = false;
   isIndeterminate: boolean = false;

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;
 

src/lib/radio/radio.html

@@ -25,7 +25,7 @@
           (click)="_onInputClick($event)">
 
   <!-- The label content for radio control. -->
-  <div class="md-radio-label-content" [class.md-radio-align-end]="align == 'after'">
+  <div class="md-radio-label-content" [class.md-radio-label-before]="labelPosition == 'before'">
     <ng-content></ng-content>
   </div>
 </label>

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;

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: `
   <md-radio-group [disabled]="isGroupDisabled"
-                  [align]="alignment"
+                  [labelPosition]="labelPos"
                   [value]="groupValue"
                   name="test-name">
     <md-radio-button value="fire" [disableRipple]="disableRipple">Charmander</md-radio-button>
@@ -596,7 +596,7 @@ describe('MdRadio', () => {
   `
 })
 class RadiosInsideRadioGroup {
-  alignment: string;
+  labelPos: 'before' | 'after';
   isGroupDisabled: boolean = false;
   groupValue: string = null;
   disableRipple: boolean = false;

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. */