Merge pull request #2377 from Akshat55/next-table-size

fix: Update table sizes

Author: Akshat55

src/table/table.component.spec.ts

@@ -15,7 +15,7 @@ import { TableItem } from "./table-item.class";
 			(sort)="simpleSort()"
 			(selectRow)="onChange()"
 			(deselectRow)="onChange()"
-			size="sh"
+			size="md"
 			title="title"
 			[showSelectionColumn]="showSelectionColumn">
 		</ibm-table>`
@@ -110,8 +110,8 @@ describe("Table", () => {
 		expect(tableInstance.componentInstance.deselectRow.emit).toHaveBeenCalled();
 	});
 
-	it("should set the .cds--data-table--short class", () => {
-		expect(tableInstance.nativeElement.querySelector(".cds--data-table--short")).toBeTruthy();
+	it("should set the .cds--data-table--md class", () => {
+		expect(tableInstance.nativeElement.querySelector(".cds--data-table--md")).toBeTruthy();
 	});
 
 	it("should not show checkboxes when showSelectionColumn is false", () => {

src/table/table.directive.ts

@@ -20,15 +20,11 @@ export class TableDirective {
 
 	@HostBinding("class.cds--data-table") tableClass = true;
 
-	@HostBinding("class.cds--data-table--compact") get compactClass() {
-		return this.size === "sm";
-	}
+	// Bind table size class
+	@HostBinding("class.cds--data-table--xs") get extraSmallSize() { return this.size === "xs"; }
+	@HostBinding("class.cds--data-table--sm") get smallSize() { return this.size === "sm"; }
+	@HostBinding("class.cds--data-table--md") get mediumSize() { return this.size === "md"; }
+	@HostBinding("class.cds--data-table--lg") get LargeSize() { return this.size === "lg"; }
+	@HostBinding("class.cds--data-table--xl") get extraLargeSize() { return this.size === "xl"; }
 
-	@HostBinding("class.cds--data-table--tall") get tallClass() {
-		return this.size === "lg";
-	}
-
-	@HostBinding("class.cds--data-table--short") get shortClass() {
-		return this.size === "sh";
-	}
 }

src/table/table.stories.ts

@@ -57,7 +57,7 @@ const getProps = (more = {}, type: "args" | "argTypes") => {
 		skeleton: false
 	} : {
 		size: {
-			options: ["sm", "sh", "md", "lg"],
+			options: ["xs", "sm", "md", "lg", "xl"],
 			control: "select"
 		}
 	};
@@ -145,6 +145,9 @@ Basic.args = {
 		enableSingleSelect: false
 	}, "args")
 };
+Basic.argTypes = {
+	...getProps({}, "argTypes")
+};
 
 const NoDataTemplate: Story = (args) => ({
 	props: args,
@@ -353,7 +356,7 @@ WithDisabledRows.args = {
 };
 WithDisabledRows.argTypes = {
 	size: {
-		options: ["sm", "sh", "md", "lg"],
+		options: ["xs", "sm", "md", "lg", "xl"],
 		control: "select"
 	}
 };

src/table/table.types.ts

@@ -6,4 +6,4 @@ export interface TableTranslations {
 	CHECKBOX_ROW: string;
 }
 
-export type TableRowSize = "sm" | "sh" | "md" | "lg";
+export type TableRowSize = "xs" | "sm" | "md" | "lg" | "xl";