[EuiDataGrid] Vertically center toolbar items (#8085)

Co-authored-by: Cee Chen <[email protected]>
elastic · Oct 18, 2024 · 86a1f4b · 86a1f4b
1 parent 93b9b66
commit 86a1f4b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/packages/eui/changelogs/upcoming/8085.md 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
@@ -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};
     `,
   };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- Updated `EuiDataGrid` to vertically center all `toolbarVisibility.additionalControls` nodes