diff --git a/packages/core/src/components/Table/Table/__stories__/Table.mdx b/packages/core/src/components/Table/Table/__stories__/Table.mdx index bc5fc71b63..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"; @@ -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. 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..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) =>
; @@ -177,6 +184,13 @@ export const Overview = { ] }, + parameters: { + docs: { + liveEdit: { + isEnabled: false + } + } + }, name: "Overview" }; @@ -186,13 +200,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 +223,32 @@ export const Sizes = { ]; return ( <> + } + emptyState={} + columns={columns} + > + + {columns.map((headerCell, index) => ( + + ))} + + + {data.map(rowItem => ( + + {rowItem.sentOn} + {rowItem.subject} + + ))} + +
( - + ) @@ -446,7 +485,13 @@ export const TableHeaderFunctionality = {
); }, - + parameters: { + docs: { + liveEdit: { + scope: { emailTableData, emailColumns } + } + } + }, name: "Table Header Functionality" }; @@ -482,7 +527,13 @@ export const Loading = { ), - + parameters: { + docs: { + liveEdit: { + scope: { emailTableData, emailColumns } + } + } + }, name: "Loading" }; @@ -525,7 +576,13 @@ export const Scroll = { ), - + parameters: { + docs: { + liveEdit: { + scope: { scrollTableColumns, scrollTableData, priorityColumnToLabelColor, statusColumnToLabelColor } + } + } + }, name: "Scroll" }; @@ -558,7 +615,13 @@ export const VirtualizedScroll = { ); }, - + parameters: { + docs: { + liveEdit: { + scope: { virtualizedScrollTableColumns, virtualizedScrollTableData } + } + } + }, name: "Virtualized Scroll" }; @@ -592,7 +655,13 @@ export const StickyColumn = { ); }, - + parameters: { + docs: { + liveEdit: { + scope: { stickyColumns, stickyTableData, statusColumnToLabelColor } + } + } + }, name: "Sticky column" }; @@ -627,6 +696,12 @@ export const HighlightedRow = { ); }, - + parameters: { + docs: { + liveEdit: { + scope: { emailColumns, emailTableData } + } + } + }, name: "Highlighted row" };