diff --git a/packages/eui/changelogs/upcoming/8085.md b/packages/eui/changelogs/upcoming/8085.md new file mode 100644 index 00000000000..074902e78b3 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8085.md @@ -0,0 +1 @@ +- Updated `EuiDataGrid` to vertically center all `toolbarVisibility.additionalControls` nodes diff --git a/packages/eui/src/components/datagrid/controls/data_grid_toolbar.styles.ts b/packages/eui/src/components/datagrid/controls/data_grid_toolbar.styles.ts index 0271e0396d4..c3b7b09d602 100644 --- a/packages/eui/src/components/datagrid/controls/data_grid_toolbar.styles.ts +++ b/packages/eui/src/components/datagrid/controls/data_grid_toolbar.styles.ts @@ -26,6 +26,7 @@ export const euiDataGridToolbarStyles = ({ euiTheme }: UseEuiTheme) => { euiDataGrid__rightControls: css` display: flex; justify-content: flex-end; + align-items: center; flex-wrap: wrap; column-gap: ${euiTheme.size.s}; ${logicalCSS('padding-right', euiTheme.size.xs)} @@ -38,6 +39,7 @@ export const euiDataGridToolbarStyles = ({ euiTheme }: UseEuiTheme) => { euiDataGrid__leftControls: css` display: flex; flex-wrap: wrap; + align-items: center; gap: ${euiTheme.size.xxs}; `, };