Merge pull request #2592 from Akshat55/issue.2591

fix: Align search icon to be in center

Author: Akshat55

src/table/stories/app-function-override-filter-table.component.ts

@@ -7,6 +7,10 @@ import { TableModel } from "../table-model.class";
 import { TableHeaderItem } from "../table-header-item.class";
 import { TableItem } from "../table-item.class";
 
+import { IconService } from "../../icon/icon.service";
+import Add16 from "@carbon/icons/es/add/16";
+import Filter16 from "@carbon/icons/es/filter/16";
+
 @Component({
 	selector: "app-function-override-filter-table",
 	template: `
@@ -139,6 +143,12 @@ export class FilterByFunctionOverrideStory implements OnInit {
 		]
 	];
 
+	constructor(protected iconService: IconService) {
+		this.iconService.registerAll([
+			Add16, Filter16
+		]);
+	}
+
 	filterNodeNames(searchString: string) {
 		this.searchValue = searchString;
 	}

src/table/stories/app-model-filter-table.component.ts

@@ -7,6 +7,10 @@ import { TableModel } from "../table-model.class";
 import { TableHeaderItem } from "../table-header-item.class";
 import { TableItem } from "../table-item.class";
 
+import { IconService } from "../../icon/icon.service";
+import Add16 from "@carbon/icons/es/add/16";
+import Filter16 from "@carbon/icons/es/filter/16";
+
 @Component({
 	selector: "app-model-filter-table",
 	template: `
@@ -138,6 +142,12 @@ export class FilterWithModelStory implements OnInit {
 		]
 	];
 
+	constructor(protected iconService: IconService) {
+		this.iconService.registerAll([
+			Add16, Filter16
+		]);
+	}
+
 	filterNodeNames(searchString: string) {
 		this.model.data = this.dataset
 			.filter((row: TableItem[]) => row[1].data.toLowerCase().includes(searchString.toLowerCase()));

src/table/table.stories.ts

@@ -1,6 +1,7 @@
 /* tslint:disable variable-name */
 
 import { moduleMetadata, Meta, Story  } from "@storybook/angular";
+import { FormsModule } from "@angular/forms";
 import { NFormsModule } from "../forms";
 import { ButtonModule } from "../button";
 import { IconModule } from "../icon/icon.module";
@@ -82,6 +83,7 @@ export default {
 		moduleMetadata({
 			imports: [
 				NFormsModule,
+				FormsModule,
 				TableModule,
 				PaginationModule,
 				DialogModule,
@@ -596,7 +598,7 @@ WithPagination.args = {
 const FromComponentsTemplate: Story = (args) => ({
 	props: args,
 	template: `
-		<table cdsTable [sortable]="false" style="width: 650px;">
+		<table cdsTable [sortable]="false">
 			<thead cdsTableHead>
 				<tr>
 					<th

src/table/toolbar/table-toolbar-search.component.ts

@@ -22,6 +22,8 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 export class TableToolbarSearch extends Search implements AfterViewInit {
 	tableSearch = true;
 
+	size: "sm" | "md" | "lg" = "lg";
+
 	@HostBinding("class.cds--toolbar-content") hostClass = true;
 
 	ngAfterViewInit() {