[Emotion] Convert EuiDataGrid gridStyles to Emotion (Part 3)

packages/eui/src/components/datagrid/data_grid.stories.utils.tsx

@@ -26,6 +26,7 @@ import type {
   EuiDataGridColumnCellActionProps,
   EuiDataGridColumnSortingConfig,
   EuiDataGridProps,
+  EuiDataGridStyle,
   EuiDataGridToolBarVisibilityOptions,
   EuiDataGridToolBarAdditionalControlsOptions,
 } from './data_grid_types';
@@ -377,3 +378,7 @@ export const EuiDataGridToolbarPropsComponent: FunctionComponent<
     EuiDataGridToolBarVisibilityOptions &
     EuiDataGridToolBarAdditionalControlsOptions
 > = () => <></>;
+
+export const EuiDataGridStylePropsComponent: FunctionComponent<
+  EuiDataGridStyle
+> = () => <></>;

packages/eui/src/components/datagrid/data_grid_styles.stories.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/css';
+import { enableFunctionToggleControls } from '../../../.storybook/utils';
+
+import {
+  StatefulDataGrid,
+  defaultStorybookArgs,
+  EuiDataGridStylePropsComponent,
+} from './data_grid.stories.utils';
+import type { EuiDataGridStyle } from './data_grid_types';
+
+const meta: Meta = {
+  title: 'Tabular Content/EuiDataGrid/Grid Styles',
+  component: EuiDataGridStylePropsComponent,
+};
+
+export default meta;
+type Story = StoryObj<EuiDataGridStyle>;
+
+export const Playground: Story = {
+  parameters: {
+    codeSnippet: {
+      snippet: `<EuiDataGrid gridStyle={{{STORY_ARGS}}} />`,
+    },
+    controls: { sort: 'none' },
+  },
+  args: {
+    fontSize: 'm',
+    cellPadding: 'm',
+    border: 'all',
+    header: 'shade',
+    footer: 'striped',
+    stripes: true,
+    stickyFooter: true,
+    rowHover: 'highlight',
+    rowClasses: {
+      1: css`
+        label: warning;
+        background-color: rgba(255, 0, 0, 0.1);
+      `,
+    },
+  },
+  render: (gridStyle: EuiDataGridStyle) => (
+    <StatefulDataGrid
+      {...defaultStorybookArgs}
+      gridStyle={gridStyle}
+      renderFooterCellValue={({ columnId }) =>
+        columnId === 'account' ? '5 accounts' : null
+      }
+      height={400}
+    />
+  ),
+};
+enableFunctionToggleControls(Playground, ['onChange']);

packages/eui/src/components/datagrid/data_grid_types.ts

@@ -631,7 +631,7 @@ export interface EuiDataGridCellProps {
     | ((props: EuiDataGridCellPopoverElementProps) => ReactNode);
   setRowHeight?: (height: number) => void;
   getRowHeight?: (rowIndex: number) => number;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
   rowHeightUtils?: RowHeightUtilsType;
   rowManager?: EuiDataGridRowManager;
@@ -831,34 +831,42 @@ export type EuiDataGridStyleCellPaddings = 's' | 'm' | 'l';
 export interface EuiDataGridStyle {
   /**
    * Size of fonts used within the row and column cells
+   * @default m
    */
   fontSize?: EuiDataGridStyleFontSizes;
   /**
    * Defines the padding with the row and column cells
+   * @default m
    */
   cellPadding?: EuiDataGridStyleCellPaddings;
   /**
-   * Border uses for the row and column cells
+   * Border used for the row and column cells
+   * @default all
    */
   border?: EuiDataGridStyleBorders;
   /**
    * If set to true, rows will alternate zebra striping for clarity
+   * @default false
    */
   stripes?: boolean;
   /**
    * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+   * @default shade
    */
   header?: EuiDataGridStyleHeader;
   /**
    * Visual style for the column footers.
+   * @default overline
    */
   footer?: EuiDataGridStyleFooter;
   /**
    * If set to true, the footer row will be sticky
+   * @default true
    */
   stickyFooter?: boolean;
   /**
    * Will define what visual style to show on row hover
+   * @default hover
    */
   rowHover?: EuiDataGridStyleRowHover;
   /**