diff --git a/CHANGELOG.md b/CHANGELOG.md index 4cb3ebdd12d..4380f534d12 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 +}