Merge branch 'master' into skeleton-toggle

Author: zvonimirfras

src/button/button.directive.ts

@@ -37,6 +37,7 @@ export class Button implements OnInit {
 	@HostBinding("class.bx--btn--ghost") ghost = false;
 	@HostBinding("class.bx--btn--danger") danger = false;
 	@HostBinding("class.bx--btn--danger--primary") dangerPrimary = false;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 	@HostBinding("class.bx--btn--sm") smallSize = false;
 
 	ngOnInit() {

src/button/button.stories.ts

@@ -29,4 +29,11 @@ storiesOf("Button", module)
 		props: {
 			size: select("Size of the buttons", ["normal", "sm"], "normal")
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<button ibmButton skeleton="true"></button>
+			&nbsp;
+			<button ibmButton skeleton="true" size="sm"></button>
+		`
 	}));

src/input/input.directive.ts

@@ -21,6 +21,7 @@ export class TextInput {
 	@Input() theme: "light" | "dark" = "dark";
 
 	@HostBinding("class.bx--text-input") inputClass = true;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 	@HostBinding("class.bx--text-input--light") get isLightTheme() {
 		return this.theme === "light";
 	}

src/input/input.stories.ts

@@ -33,4 +33,21 @@ storiesOf("Input", module).addDecorator(
 		props: {
 			theme: select("Theme", ["dark", "light"], "dark")
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<div style="width: 300px">
+			<ibm-label skeleton="true">
+				<input ibmText skeleton="true">
+			</ibm-label>
+			<br>
+			<input ibmText skeleton="true">
+		</div>
+		<br><br>
+		<div style="width: 160px">
+			<ibm-label skeleton="true">
+				<div ibmTextArea skeleton="true"></div>
+			</ibm-label>
+		</div>
+		`
 	}));

src/input/label.component.ts

@@ -31,7 +31,14 @@ import {
 @Component({
 	selector: "ibm-label",
 	template: `
-		<label [for]="labelInputID" class="bx--label"><ng-content></ng-content></label>
+		<label
+			[for]="labelInputID"
+			class="bx--label"
+			[ngClass]="{
+				'bx--skeleton': skeleton
+			}">
+			<ng-content></ng-content>
+		</label>
 		<ng-content select="input,textarea,div"></ng-content>
 	`
 })
@@ -55,6 +62,10 @@ export class Label implements AfterContentInit {
 	 * @memberof Label
 	 */
 	@Input() labelState: "success" | "warning" | "error" | "" = "";
+	/**
+	 * Set to `true` for a loading label.
+	 */
+	@Input() skeleton = false;
 
 	@HostBinding("class.bx--form-item") labelClass = true;
 

src/input/text-area.directive.ts

@@ -21,6 +21,7 @@ export class TextArea {
 	@Input() theme: "light" | "dark" = "dark";
 
 	@HostBinding("class.bx--text-area") baseClass = true;
+	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
 	@HostBinding("class.bx--text-area--light") get isLightTheme() {
 		return this.theme === "light";
 	}

src/radio/radio-group.component.ts

@@ -163,6 +163,22 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 		this.markRadiosForCheck();
 	}
 
+	/**
+	 * Returns the skeleton value in the `RadioGroup` if there is one.
+	 */
+	@Input()
+	get skeleton(): any {
+		return this._skeleton;
+	}
+
+	/**
+	 * Sets the skeleton value for all `Radio` to the skeleton value of `RadioGroup`.
+	 */
+	set skeleton(value: any) {
+		this._skeleton = value;
+		this.updateChildren();
+	}
+
 	/**
 	 * Binds 'radiogroup' value to the role attribute for `RadioGroup`.
 	 */
@@ -181,6 +197,10 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 	 * Reflects whether or not the input is disabled and cannot be selected.
 	 */
 	protected _disabled = false;
+	/**
+	 * Reflects wheather or not the dropdown is loading.
+	 */
+	protected _skeleton = false;
 	/**
 	 * The value of the selected option within the `RadioGroup`.
 	 */
@@ -301,6 +321,8 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 			this.radios = updatedRadios;
 			this.updateFocusableRadio();
 		});
+
+		this.updateChildren();
 	}
 
 	updateFocusableRadio() {
@@ -338,4 +360,10 @@ export class RadioGroup implements OnInit, AfterContentInit, ControlValueAccesso
 	 * Method set in registerOnChange to propagate changes back to the form.
 	 */
 	propagateChange = (_: any) => {};
+
+	protected updateChildren() {
+		if (this.radios) {
+			this.radios.toArray().forEach(child => child.skeleton = this.skeleton);
+		}
+	}
 }

src/radio/radio.component.spec.ts

@@ -65,7 +65,6 @@ describe("RadioComponent", () => {
 	let fixture: ComponentFixture<Radio>;
 	let de: DebugElement;
 	let el: HTMLElement;
-	let inputElement: HTMLElement;
 
 	beforeEach(() => {
 		TestBed.configureTestingModule({
@@ -78,7 +77,6 @@ describe("RadioComponent", () => {
 		component = fixture.componentInstance;
 		de = fixture.debugElement.query(By.css("label"));
 		el = de.nativeElement;
-		inputElement = fixture.debugElement.query(By.css("input")).nativeElement;
 	});
 
 	it("should work", () => {

src/radio/radio.component.ts

@@ -34,6 +34,7 @@ import { RadioGroup } from "./radio-group.component";
 	selector: "ibm-radio",
 	template: `
 		<input
+			*ngIf="!skeleton"
 			class="bx--radio-button"
 			type="radio"
 			#inputCheckbox
@@ -48,8 +49,12 @@ import { RadioGroup } from "./radio-group.component";
 			(change)="onChange($event)"
 			(click)="onClick($event)"
 			[tabindex]="(checked || needsToBeFocusable ? 0 : -1)">
+		<div *ngIf="skeleton" class="bx--radio-button bx--skeleton"></div>
 		<label
 			class="bx--radio-button__label"
+			[ngClass]="{
+				'bx--skeleton': skeleton
+			}"
 			[for]="id">
 			<span class="bx--radio-button__appearance"></span>
 			<ng-content></ng-content>
@@ -71,6 +76,10 @@ export class Radio extends Checkbox implements OnInit {
 	 */
 	static radioCount = 0;
 
+	/**
+	 * Set to `true` for a loading table.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * Returns the value/state of the `Radio`.
 	 * @readonly

src/radio/radio.stories.ts

@@ -28,4 +28,11 @@ storiesOf("Radio", module).addDecorator(
 				{ num: "four" }
 			]
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<ibm-radio-group skeleton="true">
+			<ibm-radio></ibm-radio>
+		</ibm-radio-group>
+		`
 	}));