fix(radio): fix the baseline of radio buttons (#642)

Author: hansl

src/components/checkbox/checkbox.ts

@@ -127,7 +127,7 @@ export class MdCheckbox implements AfterContentInit, ControlValueAccessor {
 
   private _indeterminate: boolean = false;
 
-  private _changeSubscription: {unsubscribe: () => any} = null;
+  private _controlValueAccessorChangeFn: (value: any) => void = (value) => {};
 
   hasFocus: boolean = false;
 
@@ -195,11 +195,8 @@ export class MdCheckbox implements AfterContentInit, ControlValueAccessor {
    * Implemented as part of ControlValueAccessor.
    * TODO: internal
    */
-  registerOnChange(fn: any) {
-    if (this._changeSubscription) {
-      this._changeSubscription.unsubscribe();
-    }
-    this._changeSubscription = <{unsubscribe: () => any}>this.change.subscribe(fn);
+  registerOnChange(fn: (value: any) => void) {
+    this._controlValueAccessorChangeFn = fn;
   }
 
   /**
@@ -236,6 +233,7 @@ export class MdCheckbox implements AfterContentInit, ControlValueAccessor {
     event.source = this;
     event.checked = this.checked;
 
+    this._controlValueAccessorChangeFn(this.checked);
     this.change.emit(event);
   }
 

src/components/radio/radio.html

@@ -20,7 +20,7 @@
           (blur)="onInputBlur()" />
 
   <!-- The label content for radio control. -->
-  <div class="md-radio-label-content">
+  <div class="md-radio-label-content" [class.md-radio-align-end]="align == 'end'">
     <ng-content></ng-content>
   </div>
 </label>

src/components/radio/radio.scss

@@ -13,7 +13,8 @@ md-radio-button {
 // Enables focus by click.
 .md-radio-label {
   cursor: pointer;
-  display: block;
+  display: inline-flex;
+  align-items: baseline;
   white-space: nowrap;
 }
 
@@ -23,8 +24,8 @@ md-radio-button {
   display: inline-block;
   height: $md-radio-size;
   position: relative;
-  top: 2px;
   width: $md-radio-size;
+  top: 2px;
 }
 
 // The outer circle for the radio, always present.
@@ -74,19 +75,29 @@ md-radio-button {
 // Text label next to radio.
 .md-radio-label-content {
   display: inline-block;
-  float: right;
-  line-height: 24px;
+  order: 0;
+  line-height: inherit;
   padding-left: $md-toggle-padding;
-  position: relative;
-  vertical-align: top;
+  padding-right: 0;
 
   [dir='rtl'] & {
-    float: left;
     padding-right: $md-toggle-padding;
     padding-left: 0;
   }
 }
 
+// Alignment.
+.md-radio-label-content.md-radio-align-end {
+  order: -1;
+  padding-left: 0;
+  padding-right: $md-toggle-padding;
+
+  [dir='rtl'] & {
+    padding-right: 0;
+    padding-left: $md-toggle-padding;
+  }
+}
+
 // Underlying native input element.
 // Visually hidden but still able to respond to focus.
 .md-radio-input {

src/components/radio/radio.spec.ts

@@ -75,6 +75,22 @@ describe('MdRadio', () => {
       expect(radioInstances[0].checked).toBe(false);
     });
 
+    it('should set alignment based on the group alignment', () => {
+      testComponent.alignment = 'end';
+      fixture.detectChanges();
+
+      for (let radio of radioInstances) {
+        expect(radio.align).toBe('end');
+      }
+
+      testComponent.alignment = 'start';
+      fixture.detectChanges();
+
+      for (let radio of radioInstances) {
+        expect(radio.align).toBe('start');
+      }
+    });
+
     it('should disable each individual radio when the group is disabled', () => {
       testComponent.isGroupDisabled = true;
       fixture.detectChanges();
@@ -452,14 +468,18 @@ describe('MdRadio', () => {
 @Component({
   directives: [MD_RADIO_DIRECTIVES],
   template: `
-  <md-radio-group [disabled]="isGroupDisabled" [value]="groupValue" name="test-name">
+  <md-radio-group [disabled]="isGroupDisabled"
+                  [align]="alignment"
+                  [value]="groupValue"
+                  name="test-name">
     <md-radio-button value="fire">Charmander</md-radio-button>
     <md-radio-button value="water">Squirtle</md-radio-button>
     <md-radio-button value="leaf">Bulbasaur</md-radio-button>
   </md-radio-group>
   `
 })
 class RadiosInsideRadioGroup {
+  alignment: string;
   isGroupDisabled: boolean = false;
   groupValue: string = null;
 }

src/components/radio/radio.ts

@@ -108,6 +108,8 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor {
     this._updateRadioButtonNames();
   }
 
+  @Input() align: 'start' | 'end';
+
   @Input()
   get disabled(): boolean {
     return this._disabled;
@@ -333,6 +335,17 @@ export class MdRadioButton implements OnInit {
     }
   }
 
+  private _align: 'start' | 'end';
+
+  @Input()
+  get align(): 'start' | 'end' {
+    return this._align || (this.radioGroup != null && this.radioGroup.align) || 'start';
+  }
+
+  set align(value: 'start' | 'end') {
+    this._align = value;
+  }
+
   @HostBinding('class.md-radio-disabled')
   @Input()
   get disabled(): boolean {

src/demo-app/baseline/baseline-demo.html

@@ -0,0 +1,35 @@
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Basic Forms</md-toolbar>
+  <md-card-content>
+    Text Before |
+    <md-checkbox>Checkbox Label</md-checkbox>
+    | Text 1 |
+    <md-radio-button value="option_1">Radio 1</md-radio-button>
+    | Text 2 |
+    <md-radio-button value="option_2">Radio 2</md-radio-button>
+    | Text 3 |
+    <md-radio-button value="option_3">Radio 3</md-radio-button>
+    | Text 4 |
+    <md-input>Label</md-input>
+    | Text After
+  </md-card-content>
+</md-card>
+
+<md-card class="demo-card demo-basic">
+  <md-toolbar color="primary">Headers</md-toolbar>
+  <md-card-content>
+    <h1>
+      Text Before |
+      <md-checkbox>Checkbox Label</md-checkbox>
+      | Text 1 |
+      <md-radio-button value="option_1">Radio 1</md-radio-button>
+      | Text 2 |
+      <md-radio-button value="option_2">Radio 2</md-radio-button>
+      | Text 3 |
+      <md-radio-button value="option_3">Radio 3</md-radio-button>
+      | Text 4 |
+      <md-input>Label</md-input>
+      | Text After
+    </h1>
+  </md-card-content>
+</md-card>

src/demo-app/baseline/baseline-demo.scss

@@ -0,0 +1,30 @@
+@import 'default-theme';
+@import 'variables';
+
+.demo-basic {
+  padding: 0;
+}
+.demo-basic md-card-content {
+  padding: 16px;
+}
+.demo-full-width {
+  width: 100%;
+}
+
+.demo-icons {
+  font-size: 100%;
+  height: inherit;
+  vertical-align: top;
+  width: inherit;
+}
+
+.demo-transform {
+  transition: color $swift-ease-out-duration $swift-ease-out-timing-function;
+}
+.demo-primary {
+  color: md-color($md-primary);
+}
+
+.demo-card {
+  margin: 16px;
+}

src/demo-app/baseline/baseline-demo.ts

@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+import {MD_INPUT_DIRECTIVES} from '@angular2-material/input/input';
+import {MD_BUTTON_DIRECTIVES} from '@angular2-material/button/button';
+import {MD_CARD_DIRECTIVES} from '@angular2-material/card/card';
+import {MD_CHECKBOX_DIRECTIVES} from '@angular2-material/checkbox/checkbox';
+import {MD_RADIO_DIRECTIVES} from '@angular2-material/radio/radio';
+import {MdIcon} from '@angular2-material/icon/icon';
+import {MdToolbar} from '@angular2-material/toolbar/toolbar';
+
+import {
+  MdUniqueSelectionDispatcher
+} from '@angular2-material/core/coordination/unique-selection-dispatcher';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'baseline-demo',
+  templateUrl: 'baseline-demo.html',
+  styleUrls: ['baseline-demo.css'],
+  providers: [MdUniqueSelectionDispatcher],
+  directives: [
+    MD_BUTTON_DIRECTIVES,
+    MD_CARD_DIRECTIVES,
+    MD_CHECKBOX_DIRECTIVES,
+    MD_RADIO_DIRECTIVES,
+    MD_INPUT_DIRECTIVES,
+    MdIcon,
+    MdToolbar
+  ]
+})
+export class BaselineDemo {
+  name: string;
+}

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

@@ -20,6 +20,8 @@
       <a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
       <a md-list-item [routerLink]="['toolbar']">Toolbar</a>
       <a md-list-item [routerLink]="['tabs']">Tabs</a>
+      <hr>
+      <a md-list-item [routerLink]="['baseline']">Baseline</a>
     </md-nav-list>
     <button md-button (click)="start.close()">CLOSE</button>
   </md-sidenav>

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

@@ -9,6 +9,7 @@ import {MdIcon} from '@angular2-material/icon/icon';
 import {MdToolbar} from '@angular2-material/toolbar/toolbar';
 
 import {CardDemo} from '../card/card-demo';
+import {BaselineDemo} from '../baseline/baseline-demo';
 import {ButtonDemo} from '../button/button-demo';
 import {IconDemo} from '../icon/icon-demo';
 import {RadioDemo} from '../radio/radio-demo';
@@ -75,5 +76,7 @@ export class Home {}
   new Route({path: '/grid-list', component: GridListDemo}),
   new Route({path: '/tabs', component: TabsDemo}),
   new Route({path: '/button-toggle', component: ButtonToggleDemo}),
+
+  new Route({path: '/baseline', component: BaselineDemo})
 ])
 export class DemoApp { }

src/demo-app/radio/radio-demo.html

@@ -12,7 +12,10 @@ <h1>Dynamic Example</h1>
       Disable buttons
     </button>
   </div>
-  <md-radio-group name="my_options" [disabled]="isDisabled">
+  <div>
+    <span><md-checkbox [(ngModel)]="isAlignEnd">Align end</md-checkbox></span>
+  </div>
+  <md-radio-group name="my_options" [disabled]="isDisabled" [align]="isAlignEnd ? 'end' : 'start'">
     <md-radio-button value="option_1">Option 1</md-radio-button>
     <md-radio-button value="option_2">Option 2</md-radio-button>
     <md-radio-button value="option_3">Option 3</md-radio-button>

src/demo-app/radio/radio-demo.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {MdCheckbox} from '@angular2-material/checkbox/checkbox';
 import {MdRadioButton, MdRadioGroup} from '@angular2-material/radio/radio';
 import {
   MdUniqueSelectionDispatcher
@@ -10,10 +11,11 @@ import {
   templateUrl: 'radio-demo.html',
   styleUrls: ['radio-demo.css'],
   providers: [MdUniqueSelectionDispatcher],
-  directives: [MdRadioButton, MdRadioGroup]
+  directives: [MdCheckbox, MdRadioButton, MdRadioGroup]
 })
 export class RadioDemo {
   isDisabled: boolean = false;
+  isAlignEnd: boolean = false;
   favoriteSeason: string = 'Autumn';
   seasonOptions = [
     'Winter',