[EuiDataGrid] Fix "Grid row classes" docs example (elastic#7549)

cdolek · Mar 5, 2024 · 4408b42 · 4408b42
1 parent 42e20e7
commit 4408b42
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/changelogs/upcoming/7549.md b/changelogs/upcoming/7549.md
@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed an `EuiDataGrid` bug with `gridStyle.rowClasses`, where custom consumer classes that began with `euiDataGridRow` would not be correctly removed/reapplied
+- Fixed a visual `EuiDataGrid` bug where `EuiCheckbox`es within control columns were not vertically centered within single height rows
diff --git a/src-docs/src/views/datagrid/styling/row_classes.js b/src-docs/src/views/datagrid/styling/row_classes.js
@@ -90,7 +90,7 @@ const SelectionRowCell = ({ rowIndex }) => {
   const [selectedRows, updateSelectedRows] = useContext(SelectionContext);
   const isChecked = selectedRows.has(rowIndex);
   return (
-    <div>
+    <>
       <EuiCheckbox
         id={`${rowIndex}`}
         aria-label={`Select row ${rowIndex}, ${data[rowIndex].name}`}
@@ -103,7 +103,7 @@ const SelectionRowCell = ({ rowIndex }) => {
           }
         }}
       />
-    </div>
+    </>
   );
 };
 
@@ -153,20 +153,18 @@ export default () => {
 
   return (
     <SelectionContext.Provider value={rowSelection}>
-      <div>
-        <EuiDataGrid
-          aria-label="Top EUI contributors"
-          columns={columns}
-          columnVisibility={{ visibleColumns, setVisibleColumns }}
-          rowCount={data.length}
-          renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
-          leadingControlColumns={leadingControlColumns}
-          toolbarVisibility={{
-            additionalControls: <SelectionButton />,
-          }}
-          gridStyle={{ rowClasses, rowHover: 'none' }}
-        />
-      </div>
+      <EuiDataGrid
+        aria-label="Top EUI contributors"
+        columns={columns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        rowCount={data.length}
+        renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+        leadingControlColumns={leadingControlColumns}
+        toolbarVisibility={{
+          additionalControls: <SelectionButton />,
+        }}
+        gridStyle={{ rowClasses, rowHover: 'none' }}
+      />
     </SelectionContext.Provider>
   );
 };
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -119,6 +119,10 @@
   height: auto;
   display: flex;
   align-items: center;
+
+  &.euiDataGridRowCell__content--defaultHeight {
+    height: 100%;
+  }
 }
 
 // Positioning for cell actions & the cell expansion popover

diff --git a/src/components/datagrid/body/data_grid_row_manager.ts b/src/components/datagrid/body/data_grid_row_manager.ts
@@ -82,7 +82,9 @@ export const useRowManager = ({
     if (rowClasses) {
       rowIdToElements.current.forEach((rowElement, rowIndex) => {
         const euiClasses = Array.from(rowElement.classList)
-          .filter((className) => className.startsWith('euiDataGridRow'))
+          .filter((className) =>
+            ['euiDataGridRow', 'euiDataGridRow--striped'].includes(className)
+          )
           .join(' ');
 
         if (rowClasses[rowIndex]) {