Merge branch 'master' of https://github.com/youda97/carbon-components-angular

Author: youda97

src/combobox/combobox.component.ts

@@ -67,7 +67,7 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 				class="bx--text-input"
 				aria-label="ListBox input field"
 				autocomplete="off"
-				placeholder="Filter..."/>
+				[placeholder]="placeholder"/>
 			<div
 				[ngClass]="{'bx--list-box__menu-icon--open': open}"
 				class="bx--list-box__menu-icon">
@@ -132,7 +132,7 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 	 * Text to show when nothing is selected.
 	 * @memberof ComboBox
 	 */
-	@Input() placeholder = "";
+	@Input() placeholder = "Filter...";
 	/**
 	 * Combo box type (supporting single or multi selection of items).
 	 * @type {("single" | "multi")}
@@ -351,6 +351,9 @@ export class ComboBox implements OnChanges, OnInit, AfterViewInit, AfterContentI
 		});
 		this.view["updateList"](this.items);
 		this.updatePills();
+		// clearSelected can only fire on type=multi
+		// so we just emit getSelected() (just in case there's any disabled but selected items)
+		this.selected.emit(this.view.getSelected() as any);
 	}
 
 	/**

src/combobox/combobox.stories.ts

@@ -16,7 +16,7 @@ storiesOf("Combobox", module)
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-			<ibm-combo-box [items]="items">
+			<ibm-combo-box [items]="items" (selected)="selected($event)">
 				<ibm-dropdown-list></ibm-dropdown-list>
 			</ibm-combo-box>
 		`,
@@ -40,7 +40,7 @@ storiesOf("Combobox", module)
 	}))
 	.add("Multi-select", () => ({
 		template: `
-			<ibm-combo-box [items]="items" type="multi">
+			<ibm-combo-box [items]="items" type="multi" (selected)="selected($event)">
 				<ibm-dropdown-list></ibm-dropdown-list>
 			</ibm-combo-box>
 		`,

src/table/table.component.ts

@@ -102,6 +102,17 @@ import { getScrollbarWidth } from "../common/utils";
  *
  * See `TableHeaderItem` class for more information.
  *
+ * ## No data template
+ *
+ * When table has no data to show, it can show a message you provide it instead.
+ *
+ * ```html
+ * <ibm-table [model]="model">No data.</ibm-table>
+ * ```
+ *
+ * ... will show `No data.` message, but you can get creative and provide any template you want
+ * to replace table's default `tbody`.
+ *
  * ## Use pagination as table footer
  *
  * ```html
@@ -195,9 +206,9 @@ import { getScrollbarWidth } from "../common/utils";
 							<svg
 							class="bx--table-sort-v2__icon"
 							width="10" height="5" viewBox="0 0 10 5"
-							aria-label="Sort rows by this header in descending order"
-							alt="Sort rows by this header in descending order">
-								<title>Sort rows by this header in descending order</title>
+							[attr.aria-label]="(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)"
+							[attr.alt]="(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)">
+								<title>{{(column.sorted && column.ascending ? sortDescendingLabel : sortAscendingLabel)}}</title>
 								<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
 							</svg>
 						</button>
@@ -269,6 +280,7 @@ import { getScrollbarWidth } from "../common/utils";
 			</tr>
 		</thead>
 		<tbody
+		*ngIf="!noData; else noDataTemplate"
 		[ngStyle]="{'overflow-y': 'scroll'}"
 		(scroll)="onScroll($event)">
 			<ng-container *ngFor="let row of model.data; let i = index">
@@ -292,6 +304,7 @@ import { getScrollbarWidth } from "../common/utils";
 						<button
 						*ngIf="model.isRowExpandable(i)"
 						(click)="model.expandRow(i, !model.rowsExpanded[i])"
+						[attr.aria-label]="expandButtonAriaLabel"
 						class="bx--table-expand-v2__button">
 							<svg class="bx--table-expand-v2__svg" width="7" height="12" viewBox="0 0 7 12">
 								<path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
@@ -331,6 +344,7 @@ import { getScrollbarWidth } from "../common/utils";
 				</tr>
 			</ng-container>
 		</tbody>
+		<ng-template #noDataTemplate><ng-content></ng-content></ng-template>
 		<tfoot>
 			<tr *ngIf="this.model.isLoading">
 				<td class="table_loading-indicator">
@@ -440,6 +454,10 @@ export class Table {
 	 */
 	@Input() columnsDraggable = false;
 
+	@Input() expandButtonAriaLabel = "Expand row";
+	@Input() sortDescendingLabel = "Sort rows by this header in descending order";
+	@Input() sortAscendingLabel = "Sort rows by this header in ascending order";
+
 	/**
 	 * Controls if all checkboxes are viewed as selected.
 	 *
@@ -511,6 +529,12 @@ export class Table {
 	 */
 	@Output() scrollLoad = new EventEmitter<TableModel>();
 
+	get noData() {
+		return !this.model.data ||
+			this.model.data.length === 0 ||
+			this.model.data.length === 1 && this.model.data[0].length === 0;
+	}
+
 	private _model: TableModel;
 
 	private columnResizeWidth: number;

src/table/table.stories.ts

@@ -40,6 +40,7 @@ const en = require("./../../src/i18n/en.json");
 			[showSelectionColumn]="showSelectionColumn"
 			[striped]="striped"
 			(sort)="simpleSort($event)">
+			<ng-content></ng-content>
 		</ibm-table>
 	`
 })
@@ -429,6 +430,11 @@ simpleModel.header = [
 	new TableHeaderItem({data: "Name"}), new TableHeaderItem({data: "hwer", style: {"width": "auto"} })
 ];
 
+const emptyModel = new TableModel();
+emptyModel.header = [
+	new TableHeaderItem({data: "Name"}), new TableHeaderItem({data: "hwer", style: {"width": "auto"} })
+];
+
 function sort(model, index: number) {
 	if (model.header[index].sorted) {
 		// if already sorted flip sorting direction
@@ -475,6 +481,30 @@ storiesOf("Table", module).addDecorator(
 			sortable: boolean("sortable", true)
 		}
 	}))
+	.add("with no data", () => ({
+		template: `
+			<app-table
+				[model]="model"
+				[size]="size"
+				[showSelectionColumn]="showSelectionColumn"
+				[striped]="striped">
+				<tbody><tr><td class="no-data" colspan="3"><div>No data.</div></td></tr></tbody>
+			</app-table>
+		`,
+		styles: [`
+			.no-data {
+				width: 100%;
+				height: 150px;
+				text-align: center;
+			}
+		`],
+		props: {
+			model: emptyModel,
+			size: selectV2("size", {Small: "sm", Normal: "md", Large: "lg"}, "md", "table-size-selection"),
+			showSelectionColumn: boolean("showSelectionColumn", true),
+			striped: boolean("striped", true)
+		}
+	}))
 	.add("with expansion", () => ({
 		template: `
 			<app-expansion-table