Add background to data grid content. Add more params to euiScrollBar

CHANGELOG.md

@@ -1,6 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `whiteSpace` prop to `EuiCodeBlock`. ([#4475](https://github.com/elastic/eui/pull/4475))
+- Added a light background to `EuiDataGrid` and removed unnecessary height on its container ([#4509](https://github.com/elastic/eui/pull/4509))
+
+**Bug fixes**
+
+- Fixed bug in `EuiDataGrid` where the grid lost height when showing less rows on the last page ([#4509](https://github.com/elastic/eui/pull/4509))
 - Updated `euiPaletteForStatus` color sequence to use higher contrast postive and negative colors. ([#4508](https://github.com/elastic/eui/pull/4508))
 
 ## [`31.6.0`](https://github.com/elastic/eui/tree/v31.6.0)

src/components/datagrid/_data_grid.scss

@@ -33,6 +33,7 @@
   max-width: 100%;
   width: 100%;
   z-index: 2; // Sits above the pagination below it, but below the controls above it
+  background: $euiColorLightestShade;
 }
 
 .euiDataGrid__controls {
@@ -115,6 +116,6 @@
 }
 
 .euiDataGrid__virtualized {
-  @include euiScrollBar;
+  @include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
   scroll-padding: 0;
 }

src/components/datagrid/data_grid_body.tsx

@@ -292,7 +292,6 @@ const InnerElement: VariableSizeGridProps['innerElementType'] = forwardRef<
 InnerElement.displayName = 'EuiDataGridInnerElement';
 
 const INITIAL_ROW_HEIGHT = 34;
-const SCROLLBAR_HEIGHT = 16;
 const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
 
 export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
@@ -514,11 +513,11 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     if (gridRef.current) gridRef.current.resetAfterRowIndex(0);
   }, [getRowHeight]);
 
+  const rowCountToAffordFor = pagination
+    ? pagination.pageSize
+    : visibleRowIndices.length;
   const unconstrainedHeight =
-    rowHeight * visibleRowIndices.length +
-    SCROLLBAR_HEIGHT +
-    headerRowHeight +
-    footerRowHeight;
+    rowHeight * rowCountToAffordFor + headerRowHeight + footerRowHeight;
 
   // unable to determine this until the container's size is known anyway
   const unconstrainedWidth = 0;

src/global_styling/mixins/_helpers.scss

@@ -24,7 +24,7 @@
 }
 
 // Set scroll bar appearance on Chrome (and firefox).
-@mixin euiScrollBar {
+@mixin euiScrollBar($thumbColor: $euiColorDarkShade, $trackBackgroundColor: transparent) {
   // Firefox's scrollbar coloring cascades, but the sizing does not,
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
   // sass-lint:disable-block no-misspelled-properties
@@ -37,14 +37,14 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: transparentize($euiColorDarkShade, .5);
-    border: $euiScrollBarCorner solid transparent;
+    background-color: transparentize($thumbColor, .5);
+    border: $euiScrollBarCorner solid $trackBackgroundColor;
     background-clip: content-box;
   }
 
   &::-webkit-scrollbar-corner,
   &::-webkit-scrollbar-track {
-    background-color: transparent;
+    background-color: $trackBackgroundColor;
   }
 }