Merge branch 'master' into pill

Author: zvonimirfras

src/radio/radio-group.component.ts

@@ -64,7 +64,11 @@ export class RadioChange {
  */
 @Component({
 	selector: "ibm-radio-group",
-	template: `<ng-content></ng-content>`,
+	template: `
+		<div class="bx--radio-button-group" role="radiogroup">
+			<ng-content></ng-content>
+		</div>
+	`,
 	providers: [
 		{
 			provide: NG_VALUE_ACCESSOR,
@@ -180,14 +184,9 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 	}
 
 	/**
-	 * Binds 'radiogroup' value to the role attribute for `RadioGroup`.
+	 * Binds 'bx--form-item' value to the class for `RadioGroup`.
 	 */
-	@HostBinding("attr.role") role = "radiogroup";
-
-	/**
-	 * Binds 'bx--radio-button-group' value to the class for `RadioGroup`.
-	 */
-	@HostBinding("class.bx--radio-button-group") radioButtonGroupClass = true;
+	@HostBinding("class.bx--form-item") radioButtonGroupClass = true;
 
 	/**
 	 * To track whether the `RadioGroup` has been initialized.

src/radio/radio.component.ts

@@ -117,6 +117,13 @@ export class Radio extends Checkbox implements OnInit {
 	 */
 	@HostBinding("attr.role") role = "radio";
 
+	@HostBinding("class.bx--checkbox-wrapper") get checkboxWrapperClass() {
+		return false;
+	}
+	@HostBinding("class.bx--form-item") get formItemClass() {
+		return false;
+	}
+
 	/**
 	 * The id for the `Radio`.
 	 * @type {string}

src/radio/radio.stories.ts

@@ -15,17 +15,18 @@ storiesOf("Radio", module).addDecorator(
 		<ibm-radio-group aria-label="radiogroup" [(ngModel)]="radio" (change)="onChange($event)">
 			<ibm-radio *ngFor="let radio of manyRadios"
 				[value]="radio.num"
-				[disabled]="radio.disabled">{{radio.num}}
+				[disabled]="radio.disabled">
+				{{radio.num}}
 			</ibm-radio>
 		</ibm-radio-group>
 		`,
 		props: {
 			onChange: action("Radio change"),
 			manyRadios: [
-				{ num: "one",  disabled: false },
+				{ num: "one" },
 				{ num: "two" },
 				{ num: "three" },
-				{ num: "four" }
+				{ num: "four", disabled: true }
 			]
 		}
 	}))