From a7f3ea50b76073c080c669a56d1fcbc1e33465ab Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Thu, 25 Jun 2026 11:07:51 +0100 Subject: [PATCH] feat(site): add TableBody size="lg" variant for 72px rows (#26687) Add a new variant `size="lg"` for the `Table` component, and make use of it in the new AI settings page. This allows us to ensure each table is using the same implementation and are consistent. --- site/src/components/Table/Table.stories.tsx | 29 +++++++++++++++++++ site/src/components/Table/Table.tsx | 15 +++++++++- .../GatewayKeysPage/GatewayKeysPageView.tsx | 2 +- .../MCPServersPage/MCPServersPageView.tsx | 2 +- .../components/MCPServerRow.tsx | 2 +- .../ModelsPage/ModelsPageView.tsx | 2 +- .../ModelsPage/components/ModelRow.tsx | 8 ++--- .../ProvidersPage/ProvidersPageView.tsx | 2 +- .../ProvidersPage/components/ProviderRow.tsx | 2 +- .../TemplatesPage/TemplatesPageView.tsx | 4 +-- 10 files changed, 53 insertions(+), 15 deletions(-) diff --git a/site/src/components/Table/Table.stories.tsx b/site/src/components/Table/Table.stories.tsx index 459ad0f115..c1a2c77f8d 100644 --- a/site/src/components/Table/Table.stories.tsx +++ b/site/src/components/Table/Table.stories.tsx @@ -114,3 +114,32 @@ export const ScopeOverride: Story = { expect(invoiceHeader).toHaveAttribute("scope", "row"); }, }; + +export const SizeLarge: Story = { + args: { + children: ( + <> + + + Invoice + Status + Method + Amount + + + + {invoices.map((invoice) => ( + + {invoice.invoice} + {invoice.paymentStatus} + {invoice.paymentMethod} + + {invoice.totalAmount} + + + ))} + + + ), + }, +}; diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx index 85af9eda5f..1e60e2df84 100644 --- a/site/src/components/Table/Table.tsx +++ b/site/src/components/Table/Table.tsx @@ -34,8 +34,20 @@ export const TableHeader: React.FC> = ({ return ; }; -export const TableBody: React.FC> = ({ +const tableBodyVariants = cva(null, { + variants: { + size: { + lg: "[&>tr>td]:box-border [&>tr>td]:h-[72px]", + }, + }, +}); + +type TableBodyProps = React.ComponentPropsWithRef<"tbody"> & + VariantProps; + +export const TableBody: React.FC = ({ className, + size, ...props }) => { return ( @@ -45,6 +57,7 @@ export const TableBody: React.FC> = ({ "[&>tr:last-child>td]:border-b [&>tr>td:last-child]:border-r", "[&>tr:first-of-type>td:first-of-type]:rounded-tl-md [&>tr:first-of-type>td:last-child]:rounded-tr-md", "[&>tr:last-child>td:first-of-type]:rounded-bl-md [&>tr:last-child>td:last-child]:rounded-br-md", + tableBodyVariants({ size }), className, )} {...props} diff --git a/site/src/pages/AISettingsPage/GatewayKeysPage/GatewayKeysPageView.tsx b/site/src/pages/AISettingsPage/GatewayKeysPage/GatewayKeysPageView.tsx index e973a1fe86..fbc184c483 100644 --- a/site/src/pages/AISettingsPage/GatewayKeysPage/GatewayKeysPageView.tsx +++ b/site/src/pages/AISettingsPage/GatewayKeysPage/GatewayKeysPageView.tsx @@ -85,7 +85,7 @@ export const GatewayKeysPageView: FC = ({ - + {isLoading ? ( ) : error ? ( diff --git a/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx b/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx index 7bd91a2fe2..f92fb33538 100644 --- a/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx +++ b/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx @@ -67,7 +67,7 @@ const MCPServersPageView: FC = ({ - + {isLoading ? ( ) : !error && servers.length === 0 ? ( diff --git a/site/src/pages/AISettingsPage/MCPServersPage/components/MCPServerRow.tsx b/site/src/pages/AISettingsPage/MCPServersPage/components/MCPServerRow.tsx index e6e266d738..34a7e40e68 100644 --- a/site/src/pages/AISettingsPage/MCPServersPage/components/MCPServerRow.tsx +++ b/site/src/pages/AISettingsPage/MCPServersPage/components/MCPServerRow.tsx @@ -19,7 +19,7 @@ export const MCPServerRow: FC = ({ server, onClick }) => { return ( - +
= ({ - + {isLoading ? ( ) : models.length === 0 ? ( diff --git a/site/src/pages/AISettingsPage/ModelsPage/components/ModelRow.tsx b/site/src/pages/AISettingsPage/ModelsPage/components/ModelRow.tsx index 73b1f1a6b3..ce3fc9b018 100644 --- a/site/src/pages/AISettingsPage/ModelsPage/components/ModelRow.tsx +++ b/site/src/pages/AISettingsPage/ModelsPage/components/ModelRow.tsx @@ -6,7 +6,6 @@ import { Badge } from "#/components/Badge/Badge"; import { TableCell, TableRow } from "#/components/Table/Table"; import { useClickableTableRow } from "#/hooks/useClickableTableRow"; import { ProviderIcon } from "#/pages/AISettingsPage/ProvidersPage/components/ProviderIcon"; -import { cn } from "#/utils/cn"; type ModelRowProps = { model: ChatModelConfig; @@ -30,11 +29,8 @@ export const ModelRow: FC = ({ const displayName = model.display_name || model.model; return ( - - + +
= ({ Status - + {isLoading || isFetching ? ( ) : providers.length === 0 ? ( diff --git a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx index bce69fdb3d..68d139b063 100644 --- a/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx +++ b/site/src/pages/AISettingsPage/ProvidersPage/components/ProviderRow.tsx @@ -24,7 +24,7 @@ export const ProviderRow: React.FC = ({ return ( - + = ({ const label = template.display_name || template.name; return ( - +
= ({ - + {isLoading ? ( ) : allowlistedTemplates.length === 0 ? (