From 7f9ad2cd73e8a9ed722a4a7e59e630c34b9ba127 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 13 Apr 2023 07:56:09 +0200
Subject: [PATCH] Table: Fix storybook stories (#66414)

---
 .../src/components/Table/Table.story.tsx      | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/Table.story.tsx b/packages/grafana-ui/src/components/Table/Table.story.tsx
index a300ecb99a21..69ba6309771c 100644
--- a/packages/grafana-ui/src/components/Table/Table.story.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.story.tsx
@@ -15,6 +15,7 @@ import {
 import { Table } from '@grafana/ui';
 
 import { useTheme2 } from '../../themes';
+import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
 import { prepDataForStorybook } from '../../utils/storybook/data';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
@@ -189,9 +190,9 @@ export const Basic: ComponentStory<typeof Table> = (args) => {
   const data = buildData(theme, {});
 
   return (
-    <div className="panel-container" style={{ width: 'auto' }}>
+    <DashboardStoryCanvas>
       <Table {...args} data={data} />
-    </div>
+    </DashboardStoryCanvas>
   );
 };
 
@@ -201,16 +202,19 @@ export const BarGaugeCell: ComponentStory<typeof Table> = (args) => {
     Progress: {
       custom: {
         width: 200,
-        displayMode: 'gradient-gauge',
+        cellOptions: {
+          type: 'gauge',
+          mode: 'gradient',
+        },
       },
       thresholds: defaultThresholds,
     },
   });
 
   return (
-    <div className="panel-container" style={{ width: 'auto' }}>
+    <DashboardStoryCanvas>
       <Table {...args} data={data} />
-    </div>
+    </DashboardStoryCanvas>
   );
 };
 
@@ -227,9 +231,9 @@ export const ColoredCells: ComponentStory<typeof Table> = (args) => {
   });
 
   return (
-    <div className="panel-container" style={{ width: 'auto' }}>
+    <DashboardStoryCanvas>
       <Table {...args} data={data} />
-    </div>
+    </DashboardStoryCanvas>
   );
 };
 
@@ -239,9 +243,9 @@ export const Footer: ComponentStory<typeof Table> = (args) => {
   const footer = buildFooterData(data);
 
   return (
-    <div className="panel-container" style={{ width: 'auto', height: 'unset' }}>
+    <DashboardStoryCanvas>
       <Table {...args} data={data} footerValues={footer} />
-    </div>
+    </DashboardStoryCanvas>
   );
 };
 
@@ -263,9 +267,9 @@ export const SubTables: ComponentStory<typeof Table> = (args) => {
   });
 
   return (
-    <div className="panel-container" style={{ width: 'auto', height: 'unset' }}>
+    <DashboardStoryCanvas>
       <Table {...args} data={data} subData={subData} />
-    </div>
+    </DashboardStoryCanvas>
   );
 };