diff --git a/CHANGELOG.md b/CHANGELOG.md index 954c8545127..1145ae24812 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,13 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +**Deprecation** + - Updated makeId to DEPRECATED, shifted all the calls to htmlIdGenerator ([#3129](https://github.com/elastic/eui/pull/3129)) **Bug Fixes** - Fixed the `img` element in `EuiIcon` using custom SVGs to have an `alt` attribute with an empty string, rather than no `alt` attribute at all ([#3245](https://github.com/elastic/eui/pull/3245)) +- Added overflows to EuiDataGrid toolbar dropdowns when there are many columns ([#3238](https://github.com/elastic/eui/pull/3238)) ## [`22.3.0`](https://github.com/elastic/eui/tree/v22.3.0) @@ -13,7 +16,7 @@ - Improved `htmlIdGenerator` when supplying both `prefix` and `suffix` ([#3076](https://github.com/elastic/eui/pull/3076)) - Updated pagination prop descriptions for `EuiInMemoryTable` ([#3142](https://github.com/elastic/eui/pull/3142)) - Added `title` and `aria` attributes to `EuiToken`'s icon element ([#3195](https://github.com/elastic/eui/pull/3195)) -- Added new Elasticsearch token types ([58036](https://github.com/elastic/kibana/issues/58036)) +- Added new Elasticsearch token types ([#2758](https://github.com/elastic/eui/pull/2758)) **Bug Fixes** diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss index 85a95cc8355..68933be0ab3 100644 --- a/src/components/datagrid/_data_grid.scss +++ b/src/components/datagrid/_data_grid.scss @@ -101,3 +101,11 @@ height: 100vh; overflow: hidden; } + + +.euiDataGrid__controlScroll { + @include euiYScrollWithShadows; + max-height: $euiDataGridPopoverMaxHeight; + padding: $euiSizeS; + margin: -$euiSizeS; // Offset against the panel to make the scrollbar flush scrollbars +} diff --git a/src/components/datagrid/_data_grid_column_selector.scss b/src/components/datagrid/_data_grid_column_selector.scss index ea67ebae8ad..f5851af52cd 100644 --- a/src/components/datagrid/_data_grid_column_selector.scss +++ b/src/components/datagrid/_data_grid_column_selector.scss @@ -11,7 +11,6 @@ .euiDataGridColumnSelector__columnList { @include euiYScrollWithShadows; max-height: 400px; - padding: $euiSizeS; margin: 0 (-$euiSizeS); } diff --git a/src/components/datagrid/_variables.scss b/src/components/datagrid/_variables.scss index 0ea14821854..cf47d05fdc5 100644 --- a/src/components/datagrid/_variables.scss +++ b/src/components/datagrid/_variables.scss @@ -1,4 +1,5 @@ $euiDataGridColumnResizerWidth: 3px; // Odd number because it straddles a border +$euiDataGridPopoverMaxHeight: $euiSize * 25; $euiDataGridCellPaddingS: $euiSizeXS; $euiDataGridCellPaddingM: $euiSizeM / 2; diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx index 82ae5ab8bd8..74bc1eb3ef5 100644 --- a/src/components/datagrid/column_selector.tsx +++ b/src/components/datagrid/column_selector.tsx @@ -157,70 +157,71 @@ export const useColumnSelector = ( )} - - - - {filteredColumns.map((id, index) => ( - - {(provided, state) => ( -
- - - {allowColumnHiding ? ( - { - const { - target: { checked }, - } = event; - const nextVisibleColumns = sortedColumns.filter( - columnId => - checked - ? visibleColumnIds.has(columnId) || - id === columnId - : visibleColumnIds.has(columnId) && - id !== columnId - ); - setVisibleColumns(nextVisibleColumns); - }} - /> - ) : ( - - {id} - - )} - - {isDragEnabled && ( - - +
+ + + + {filteredColumns.map((id, index) => ( + + {(provided, state) => ( +
+ + + {allowColumnHiding ? ( + { + const { + target: { checked }, + } = event; + const nextVisibleColumns = sortedColumns.filter( + columnId => + checked + ? visibleColumnIds.has(columnId) || + id === columnId + : visibleColumnIds.has(columnId) && + id !== columnId + ); + setVisibleColumns(nextVisibleColumns); + }} + /> + ) : ( + + {id} + + )} - )} - -
- )} -
- ))} -
-
-
+ {isDragEnabled && ( + + + + )} + +
+ )} + + ))} + + + +
{allowColumnHiding && ( - + - + }> {sorting.columns.length > 0 ? ( -
+
- + {sorting.columns.map(({ id, direction }, index) => { return (