From 867a155ea9775b3e08549c96839c3c8545dbe7d8 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 11 Sep 2024 13:59:56 +0300
Subject: [PATCH 1/2] docs(Table): add story for small size table

---
 .../Table/Table/__stories__/Table.mdx         |  2 +-
 .../Table/Table/__stories__/Table.stories.tsx | 31 +++++++++++++++++--
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/components/Table/Table/__stories__/Table.mdx b/packages/core/src/components/Table/Table/__stories__/Table.mdx
index bc5fc71b63..be29014a81 100644
--- a/packages/core/src/components/Table/Table/__stories__/Table.mdx
+++ b/packages/core/src/components/Table/Table/__stories__/Table.mdx
@@ -50,7 +50,7 @@ Tables are used to organize data, making it easier to understand.
 
 ### Sizes
 
-The table is available in 2 different row heights: medium (40px) and large (48 px). Medium size is the default size.
+The table is available in 3 different row heights: small (32px) medium (40px) and large (48 px). Medium size is the default size.
 
 <Canvas of={TableStories.Sizes} />
 
diff --git a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
index 04f70daa53..2ff8e52087 100644
--- a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
+++ b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
@@ -186,13 +186,12 @@ export const Sizes = {
       {
         id: "sentOn",
         title: "Sent on",
-        width: 180,
         loadingStateType: "medium-text"
       },
       {
         id: "subject",
         title: "Subject",
-        width: 200,
+
         loadingStateType: "long-text"
       }
     ];
@@ -210,6 +209,32 @@ export const Sizes = {
     ];
     return (
       <>
+        <Table
+          style={{ width: "auto" }}
+          size={Table.sizes.SMALL}
+          errorState={<TableErrorState />}
+          emptyState={<TableEmptyState />}
+          columns={columns}
+        >
+          <TableHeader>
+            {columns.map((headerCell, index) => (
+              <TableHeaderCell
+                key={index}
+                title={headerCell.title}
+                icon={headerCell.icon}
+                infoContent={headerCell.infoContent}
+              />
+            ))}
+          </TableHeader>
+          <TableBody>
+            {data.map(rowItem => (
+              <TableRow key={rowItem.id}>
+                <TableCell>{rowItem.sentOn}</TableCell>
+                <TableCell>{rowItem.subject}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
         <Table
           style={{ width: "auto" }}
           size={Table.sizes.MEDIUM}
@@ -267,7 +292,7 @@ export const Sizes = {
   },
   decorators: [
     (Story: typeof React.Component) => (
-      <Flex align={Flex.align.START} justify={Flex.justify.SPACE_BETWEEN} style={{ flex: 1 }}>
+      <Flex align={Flex.align.START} justify={Flex.justify.SPACE_BETWEEN} gap={Flex.gaps.MEDIUM} style={{ flex: 1 }}>
         <Story />
       </Flex>
     )

From 72fb88f2643c44e8cb85900500d9b382f97e0e6a Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 11 Sep 2024 14:00:06 +0300
Subject: [PATCH 2/2] docs(Table): enable LiveEdit

---
 .../Table/Table/__stories__/Table.mdx         |  2 +-
 .../Table/Table/__stories__/Table.stories.tsx | 64 +++++++++++++++++--
 2 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/Table/Table/__stories__/Table.mdx b/packages/core/src/components/Table/Table/__stories__/Table.mdx
index be29014a81..6558ac0c1c 100644
--- a/packages/core/src/components/Table/Table/__stories__/Table.mdx
+++ b/packages/core/src/components/Table/Table/__stories__/Table.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import Table from "../Table";
 import TableHeader from "../../TableHeader/TableHeader";
 import TableHeaderCell from "../../TableHeaderCell/TableHeaderCell";
diff --git a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
index 2ff8e52087..1fc932e2cd 100644
--- a/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
+++ b/packages/core/src/components/Table/Table/__stories__/Table.stories.tsx
@@ -43,7 +43,14 @@ export default {
     TableVirtualizedBody
   },
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
+  decorators: metaSettings.decorators,
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { TableAvatar, TableErrorState, TableEmptyState }
+      }
+    }
+  }
 };
 
 const tableTemplate = (args: ITableProps) => <Table {...args}></Table>;
@@ -177,6 +184,13 @@ export const Overview = {
       </TableBody>
     ]
   },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  },
   name: "Overview"
 };
 
@@ -471,7 +485,13 @@ export const TableHeaderFunctionality = {
       </Table>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { emailTableData, emailColumns }
+      }
+    }
+  },
   name: "Table Header Functionality"
 };
 
@@ -507,7 +527,13 @@ export const Loading = {
       </TableBody>
     </Table>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { emailTableData, emailColumns }
+      }
+    }
+  },
   name: "Loading"
 };
 
@@ -550,7 +576,13 @@ export const Scroll = {
       </Table>
     </div>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { scrollTableColumns, scrollTableData, priorityColumnToLabelColor, statusColumnToLabelColor }
+      }
+    }
+  },
   name: "Scroll"
 };
 
@@ -583,7 +615,13 @@ export const VirtualizedScroll = {
       </Table>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { virtualizedScrollTableColumns, virtualizedScrollTableData }
+      }
+    }
+  },
   name: "Virtualized Scroll"
 };
 
@@ -617,7 +655,13 @@ export const StickyColumn = {
       </Table>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { stickyColumns, stickyTableData, statusColumnToLabelColor }
+      }
+    }
+  },
   name: "Sticky column"
 };
 
@@ -652,6 +696,12 @@ export const HighlightedRow = {
       </Table>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { emailColumns, emailTableData }
+      }
+    }
+  },
   name: "Highlighted row"
 };