From 7412e4f74d2b56bc151889f6784c6e0d3ffab4af Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Mon, 31 Jan 2022 10:09:49 -0800
Subject: [PATCH] [EuiDataGrid] Change data grid body background to light gray
 (#5562)

* Show unrendered cells as gray when scrolling/not yet virtualized

* Misc cleanup - move toolbar related css to toolbar scss file

* Add changelog entry
---
 CHANGELOG.md                                           |  1 +
 src/components/datagrid/_data_grid.scss                | 10 +---------
 .../datagrid/controls/_data_grid_toolbar.scss          |  7 +++++++
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b3fd3ed662..0fce69960dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
 - Updated `EuiDataGrid`s with scrolling content to always have a border around the grid body and any scrollbars ([#5563](https://github.com/elastic/eui/pull/5563))
+- Updated `EuiDataGrid`'s body to a light gray background, which primarily shows when scrolling through virtualized content ([#5562](https://github.com/elastic/eui/pull/5562))
 - Added referenceable `id` for the generated label in `EuiFormRow` ([#5574](https://github.com/elastic/eui/pull/5574))
 - Addeed optional attribute configurations in `EuiPopover` to aid screen reader announcements ([#5574](https://github.com/elastic/eui/pull/5574))
 - Added `ref` passthroughs to `EuiIputPopover` subcomponents ([#5574](https://github.com/elastic/eui/pull/5574))
diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
index 01d1a33461d..3f341ae27ad 100644
--- a/src/components/datagrid/_data_grid.scss
+++ b/src/components/datagrid/_data_grid.scss
@@ -31,7 +31,7 @@
   overflow: hidden;
   z-index: 1; // Sits below the controls above it and pagination below it
   position: relative;
-  background: $euiColorEmptyShade;
+  background: $euiPageBackgroundColor;
   font-feature-settings: 'tnum' 1; // Tabular numbers
 }
 
@@ -51,14 +51,6 @@
   }
 }
 
-
-.euiDataGrid__controlScroll {
-  @include euiYScrollWithShadows;
-  max-height: $euiDataGridPopoverMaxHeight;
-  padding: $euiSizeS;
-  margin: -$euiSizeS; // Offset against the panel to make the scrollbar flush scrollbars
-}
-
 .euiDataGrid__focusWrap {
   height: 100%;
 }
diff --git a/src/components/datagrid/controls/_data_grid_toolbar.scss b/src/components/datagrid/controls/_data_grid_toolbar.scss
index 656c307cfe8..35f6951dffc 100644
--- a/src/components/datagrid/controls/_data_grid_toolbar.scss
+++ b/src/components/datagrid/controls/_data_grid_toolbar.scss
@@ -59,3 +59,10 @@
   transition: none !important;
   margin-top: -$euiSizeS;
 }
+
+.euiDataGrid__controlScroll {
+  @include euiYScrollWithShadows;
+  max-height: $euiDataGridPopoverMaxHeight;
+  padding: $euiSizeS;
+  margin: -$euiSizeS; // Offset against the panel to make the scrollbar flush scrollbars
+}