docs(storybook): add additional stories for row height specific settings

elastic · May 29, 2024 · 25c4c71 · 25c4c71
1 parent 7553f40
commit 25c4c71
Showing 1 changed file with 108 additions and 3 deletions.
diff --git a/packages/eui/src/components/datagrid/data_grid.stories.tsx b/packages/eui/src/components/datagrid/data_grid.stories.tsx
@@ -300,15 +300,15 @@ export const Playground: Story = {
 };
 enableFunctionToggleControls<EuiDataGridProps>(Playground, ['onColumnResize']);
 
-export const RowHeight: Story = {
+export const HeightLineCount: Story = {
   parameters: {
     controls: {
-      include: ['gridStyle', 'rowHeightsOptions', 'width'],
+      include: ['gridStyle', 'rowHeightsOptions', 'width', 'height'],
     },
   },
   args: {
     columns,
-    rowCount: 3,
+    rowCount: 5,
     renderCellValue: RenderCellValue,
     // setup for easier testing/QA
     columnVisibility: {
@@ -342,6 +342,55 @@ export const RowHeight: Story = {
       defaultHeight: {
         lineCount: 1,
       },
+      lineHeight: undefined,
+      scrollAnchorRow: undefined,
+    },
+  },
+  render: (args: EuiDataGridProps) => <StatefulDataGrid {...args} />,
+};
+
+export const RowHeight: Story = {
+  parameters: {
+    controls: {
+      include: ['gridStyle', 'rowHeightsOptions', 'width', 'height'],
+    },
+  },
+  args: {
+    columns,
+    rowCount: 5,
+    renderCellValue: RenderCellValue,
+    // setup for easier testing/QA
+    columnVisibility: {
+      visibleColumns: [
+        'name',
+        'email',
+        'account',
+        'location',
+        'date',
+        'amount',
+        'phone',
+        'version',
+      ],
+      setVisibleColumns: () => {},
+    },
+    gridStyle: {
+      fontSize: 's',
+      cellPadding: 'm',
+      border: 'all',
+      stripes: false,
+      header: 'shade',
+      footer: 'overline',
+      stickyFooter: true,
+      rowHover: 'highlight',
+      rowClasses: {},
+    },
+    width: '',
+    height: '',
+    toolbarVisibility: false,
+    rowHeightsOptions: {
+      defaultHeight: {
+        height: 48,
+      },
       rowHeights: {},
       lineHeight: undefined,
       scrollAnchorRow: undefined,
@@ -350,6 +399,62 @@ export const RowHeight: Story = {
   render: (args: EuiDataGridProps) => <StatefulDataGrid {...args} />,
 };
 
+export const CustomRowHeights: Story = {
+  parameters: {
+    controls: {
+      include: ['gridStyle', 'rowHeightsOptions', 'width', 'height'],
+    },
+  },
+  args: {
+    columns,
+    rowCount: 5,
+    renderCellValue: RenderCellValue,
+    // setup for easier testing/QA
+    columnVisibility: {
+      visibleColumns: [
+        'name',
+        'email',
+        'account',
+        'location',
+        'date',
+        'amount',
+        'phone',
+        'version',
+      ],
+      setVisibleColumns: () => {},
+    },
+    gridStyle: {
+      fontSize: 's',
+      cellPadding: 'm',
+      border: 'all',
+      stripes: false,
+      header: 'shade',
+      footer: 'overline',
+      stickyFooter: true,
+      rowHover: 'highlight',
+      rowClasses: {},
+    },
+    width: '700px',
+    height: '',
+    toolbarVisibility: false,
+    rowHeightsOptions: {
+      defaultHeight: {
+        lineCount: 1,
+      },
+      rowHeights: {
+        2: 'auto',
+        3: 48,
+        4: {
+          height: 48,
+        },
+      },
+      lineHeight: undefined,
+      scrollAnchorRow: undefined,
+    },
+  },
+  render: (args: EuiDataGridProps) => <StatefulDataGrid {...args} />,
+};
+
 const StatefulDataGrid = (props: EuiDataGridProps) => {
   const { pagination, sorting, columnVisibility, ...rest } = props;