Merge pull request #374 from youda97/checkbox

Update checkbox with inline input

Author: zvonimirfras

src/checkbox/checkbox.component.ts

@@ -94,20 +94,18 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 	 */
 	static checkboxCount = 0;
 
-	@HostBinding("attr.class") class = "bx--checkbox-wrapper";
-
 	/**
 	 * Size of the checkbox.
 	 */
 	@Input() size: "sm" | "md" = "md";
-	/**
-	 * Set to `true` for checkbox to be rendered with inline styles.
-	 */
-	@Input() inline: boolean;
 	/**
 	 * Set to `true` for checkbox to be rendered with nested styles.
 	 */
 	@Input() nested: boolean;
+	/**
+	 * Set to `true` for checkbox to be rendered without any classes on the host element.
+	 */
+	@Input() inline = false;
 	/**
 	 * Set to `true` for a disabled checkbox.
 	 */
@@ -190,6 +188,13 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 		}
 	}
 
+	@HostBinding("class.bx--checkbox-wrapper") get checkboxWrapperClass() {
+		return !this.inline;
+	}
+	@HostBinding("class.bx--form-item") get formItemClass() {
+		return !this.inline;
+	}
+
 	/**
 	 * Emits event notifying other classes when a change in state occurs on a checkbox after a
 	 * click.
@@ -226,18 +231,6 @@ export class Checkbox implements ControlValueAccessor, AfterViewInit {
 		Checkbox.checkboxCount++;
 	}
 
-	/**
-	 * Creates a class name based on `@Input() size`, `@Input() inline`, and `@Input() nested`.
-	 * @return {string}
-	 */
-	public getVariantClass() {
-		if (this.inline || this.nested) {
-			return `checkbox${this.inline ? "--inline" : ""}${this.nested ? "--nested" : ""}${this.size !== "md" ? `-${this.size}` : ""}`;
-		} else {
-			return `checkbox${this.size !== "md" ? `--${this.size}` : ""}`;
-		}
-	}
-
 	/**
 	 * Toggle the selected state of the checkbox.
 	 * @memberof Checkbox

src/checkbox/checkbox.stories.ts

@@ -12,19 +12,28 @@ storiesOf("Checkbox", module).addDecorator(
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-		<ibm-checkbox
-			[checked]="checked"
-			[disabled]="disabled"
-			[indeterminate]="indeterminate"
-			(change)="onChange($event)"
-			(indeterminateChange)="onIndeterminateChange($event)">
-			Checkbox
-		</ibm-checkbox>
+		<fieldset class="bx--fieldset">
+			<legend class="bx--label">Checkbox</legend>
+			<ibm-checkbox
+				checked="true"
+				(change)="onChange($event)">
+				Checkbox
+			</ibm-checkbox>
+			<ibm-checkbox
+				indeterminate="true"
+				(change)="onChange($event)"
+				(indeterminateChange)="onIndeterminateChange($event)">
+				Indeterminate checkbox
+			</ibm-checkbox>
+			<ibm-checkbox
+				disabled="true"
+				(change)="onChange($event)"
+				(indeterminateChange)="onIndeterminateChange($event)">
+				Disabled checkbox
+			</ibm-checkbox>
+		</fieldset>
 	`,
 		props: {
-			checked: boolean("checked", false),
-			disabled: boolean("disabled", false),
-			indeterminate: boolean("indeterminate", false),
 			onChange: action("Change fired!"),
 			onIndeterminateChange: action("Indeterminate change fired!")
 		}

src/table/table.component.ts

@@ -175,6 +175,7 @@ import { I18n } from "./../i18n/i18n.module";
 				<th *ngIf="model.hasExpandableRows()"></th>
 				<th *ngIf="!skeleton && showSelectionColumn" style="width: 10px;">
 					<ibm-checkbox
+						inline="true"
 						[size]="size !== ('lg' ? 'sm' : 'md')"
 						[(ngModel)]="selectAllCheckbox"
 						[indeterminate]="selectAllCheckboxSomeSelected"
@@ -316,6 +317,7 @@ import { I18n } from "./../i18n/i18n.module";
 					</td>
 					<td *ngIf="!skeleton && showSelectionColumn">
 						<ibm-checkbox
+							inline="true"
 							[attr.aria-label]="checkboxRowLabel | async"
 							[size]="size !== ('lg' ? 'sm' : 'md')"
 							[(ngModel)]="model.rowsSelected[i]"