Merge branch 'master' into skeleton-code-snippet

zvonimirfras · web-flow · commit d1f392eec990 · 2019-01-11T13:44:01.000-05:00
diff --git a/src/button/button.directive.ts b/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() {
diff --git a/src/button/button.stories.ts b/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>
+		`
 	}));
diff --git a/src/input/input.directive.ts b/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";
 	}
diff --git a/src/input/input.stories.ts b/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>
+		`
 	}));
diff --git a/src/input/label.component.ts b/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;
 
diff --git a/src/input/text-area.directive.ts b/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";
 	}
diff --git a/src/number-input/number.component.spec.ts b/src/number-input/number.component.spec.ts
@@ -86,6 +86,7 @@ describe("Number", () => {
 	});
 
 	it("should display control buttons", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.queryAll(By.css("button"))[0].nativeElement;
 		buttonDown = fixture.debugElement.queryAll(By.css("button"))[1].nativeElement;
 		expect(buttonUp.className.includes("bx--number__control-btn")).toEqual(true);
@@ -95,6 +96,7 @@ describe("Number", () => {
 	});
 
 	it("should increment value when button up is clicked", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.query(By.css(".up-icon")).nativeElement;
 		component.value = 1;
 		buttonUp.click();
@@ -103,6 +105,7 @@ describe("Number", () => {
 	});
 
 	it("should not increment value if max is reached", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.query(By.css(".up-icon")).nativeElement;
 		component.value = 100;
 		component.max = 100;
@@ -112,6 +115,7 @@ describe("Number", () => {
 	});
 
 	it("should decrement value when button down is clicked", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.query(By.css(".down-icon")).nativeElement;
 		component.value = 1;
 		buttonUp.click();
@@ -120,6 +124,7 @@ describe("Number", () => {
 	});
 
 	it("should not decrement value min is reached", () => {
+		fixture.detectChanges();
 		buttonUp = fixture.debugElement.query(By.css(".down-icon")).nativeElement;
 		component.value = 0;
 		component.min = 0;
diff --git a/src/number-input/number.component.ts b/src/number-input/number.component.ts
@@ -30,15 +30,17 @@ export class NumberChange {
 @Component({
 	selector: "ibm-number",
 	template: `
+		<label *ngIf="skeleton && label" class="bx--label bx--skeleton"></label>
 		<div
 			data-numberinput
 			class="bx--number"
 			[ngClass]="{
 				'bx--number--light': theme === 'light',
 				'bx--number--nolabel': !label,
-				'bx--number--helpertext': helperText
+				'bx--number--helpertext': helperText,
+				'bx--skeleton' : skeleton
 			}">
-			<label *ngIf="label" [for]="id" class="bx--label">{{label}}</label>
+			<label *ngIf="!skeleton && label" [for]="id" class="bx--label">{{label}}</label>
 			<input
 				type="number"
 				[id]="id"
@@ -47,7 +49,7 @@ export class NumberChange {
 				[max]="max"
 				[disabled]="disabled"
 				[required]="required"/>
-			<div class="bx--number__controls">
+			<div *ngIf="!skeleton" class="bx--number__controls">
 				<button
 					class="bx--number__control-btn up-icon"
 					(click)="onIncrement()">
@@ -90,6 +92,10 @@ export class Number implements ControlValueAccessor {
 	 * Set to `true` for a disabled number input.
 	 */
 	@Input() disabled = false;
+	/**
+	 * Set to `true` for a loading number component.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * The unique id for the number component.
 	 */
diff --git a/src/number-input/number.stories.ts b/src/number-input/number.stories.ts
@@ -29,4 +29,14 @@ storiesOf("Number", module).addDecorator(
 			max: number("max", 100),
 			disabled: boolean("disabled", false)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<div style="width: 75px;">
+			<ibm-number [label]="label" skeleton="true"></ibm-number>
+			</div>
+		`,
+		props: {
+			label: text("label", "Number Input Label")
+		}
 	}));
diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts
@@ -36,8 +36,19 @@ import { BehaviorSubject } from "rxjs";
 @Component({
 	selector: "ibm-pagination",
 	template: `
-	<div class="bx--pagination">
-		<div class="bx--pagination__left">
+	<div
+		class="bx--pagination"
+		[ngClass]="{
+			'bx--skeleton' : skeleton
+		}">
+
+		<div *ngIf="skeleton" class="bx--pagination__left">
+			<p class="bx--skeleton__text" style="width: 70px"></p>
+			<p class="bx--skeleton__text" style="width: 35px"></p>
+			<p class="bx--skeleton__text" style="width: 105px"></p>
+		</div>
+
+		<div *ngIf="!skeleton" class="bx--pagination__left">
 			<span class="bx--pagination__text">{{itemsPerPageText | async}}</span>
 			<div class="bx--form-item">
 				<div class="bx--select bx--select--inline">
@@ -76,7 +87,12 @@ import { BehaviorSubject } from "rxjs";
 				{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}
 			</span>
 		</div>
-		<div class="bx--pagination__right bx--pagination--inline">
+
+		<div *ngIf="skeleton" class="bx--pagination__right bx--pagination--inline">
+			<p class="bx--skeleton__text" style="width: 70px"></p>
+		</div>
+
+		<div *ngIf="!skeleton" class="bx--pagination__right bx--pagination--inline">
 			<span class="bx--pagination__text">{{totalPagesText | i18nReplace:{current: currentPage, last: lastPage} | async}}</span>
 			<button
 				class="bx--pagination__button bx--pagination__button--backward"
@@ -139,6 +155,10 @@ import { BehaviorSubject } from "rxjs";
 export class Pagination {
 	static paginationCounter = 0;
 
+	/**
+	 * Set to `true` for a loading pagination component.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * `PaginationModel` with the information about pages you're controlling.
 	 *
diff --git a/src/pagination/pagination.stories.ts b/src/pagination/pagination.stories.ts
@@ -18,12 +18,14 @@ import { PaginationModel } from "./pagination-model.class";
 	template: `
 		<ibm-pagination
 			[model]="model"
+			[skeleton]="skeleton"
 			(selectPage)="selectPage($event)">
 		</ibm-pagination>
 	`
 })
 class PaginationStory implements OnInit {
 	@Input() model = new PaginationModel();
+	@Input() skeleton = false;
 
 	@Input() get totalDataLength() {
 		return this.model.totalDataLength;
@@ -63,5 +65,13 @@ storiesOf("Pagination", module).addDecorator(
 		props: {
 			totalDataLength: number("totalDataLength", 105)
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+			<app-pagination [totalDataLength]="totalDataLength" [skeleton]="true"></app-pagination>
+		`,
+		props: {
+			totalDataLength: number("totalDataLength", 105)
+		}
 	}));
 
diff --git a/src/radio/radio-group.component.ts b/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);
+		}
+	}
 }
diff --git a/src/radio/radio.component.spec.ts b/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", () => {
diff --git a/src/radio/radio.component.ts b/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
diff --git a/src/radio/radio.stories.ts b/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>
+		`
 	}));
diff --git a/src/toggle/toggle.component.ts b/src/toggle/toggle.component.ts
diff --git a/src/toggle/toggle.stories.ts b/src/toggle/toggle.stories.ts

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@ export class TextInput {`
`21`	`21`	`@Input() theme: "light" \| "dark" = "dark";`
`22`	`22`
`23`	`23`	`@HostBinding("class.bx--text-input") inputClass = true;`
	`24`	`+ @HostBinding("class.bx--skeleton") @Input() skeleton = false;`
`24`	`25`	`@HostBinding("class.bx--text-input--light") get isLightTheme() {`
`25`	`26`	`return this.theme === "light";`
`26`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@ export class TextArea {`
`21`	`21`	`@Input() theme: "light" \| "dark" = "dark";`
`22`	`22`
`23`	`23`	`@HostBinding("class.bx--text-area") baseClass = true;`
	`24`	`+ @HostBinding("class.bx--skeleton") @Input() skeleton = false;`
`24`	`25`	`@HostBinding("class.bx--text-area--light") get isLightTheme() {`
`25`	`26`	`return this.theme === "light";`
`26`	`27`	`}`