[EuiDataGrid] Toolbar UI layout reorganization

src/components/datagrid/_data_grid.scss

@@ -36,49 +36,6 @@
   background: $euiColorEmptyShade;
 }
 
-.euiDataGrid__controls {
-  background: $euiPageBackgroundColor;
-  position: relative;
-  z-index: 3; // Needs to sit above the content blow that sits below it
-  border: $euiBorderThin;
-  padding: $euiSizeXS;
-  flex-grow: 0;
-
-  > * {
-    margin-left: $euiSizeXS / 2;
-  }
-}
-
-.euiDataGrid__controlBtn {
-  border-radius: $euiBorderRadius;
-
-  &:focus {
-    background: shadeOrTint($euiColorLightestShade, 10%, 10%);
-  }
-}
-
-.euiDataGrid__controlBtn--active,
-.euiDataGrid__controlBtn--active:focus {
-  font-weight: $euiFontWeightSemiBold;
-  color: $euiColorFullShade;
-}
-
-@include euiDataGridStyles(bordersNone) {
-  .euiDataGrid__controls {
-    border: none;
-    background: $euiColorEmptyShade;
-  }
-}
-
-@include euiDataGridStyles(bordersHorizontal) {
-  .euiDataGrid__controls {
-    border-right: none;
-    border-left: none;
-    border-top: none;
-    background: $euiColorEmptyShade;
-  }
-}
-
 .euiDataGrid__pagination {
 
   padding-top: $euiSizeXS;

src/components/datagrid/_index.scss

@@ -5,5 +5,6 @@
 @import 'body/data_grid_footer_row';
 @import 'body/header/data_grid_column_resizer';
 @import 'data_grid_data_row';
+@import 'controls/data_grid_toolbar';
 @import 'controls/data_grid_column_selector';
 @import 'controls/data_grid_column_sorting';

src/components/datagrid/controls/_data_grid_column_selector.scss

@@ -17,13 +17,3 @@
 .euiDataGridColumnSelector__itemLabel {
   @include euiFontSizeXS;
 }
-
-.euiDataGridColumnSelectorPopover {
-  // Hack because the fixed positions of drag and drop don't work inside of transformed elements
-  // sass-lint:disable-block no-important
-  transform: none !important;
-  transition: none !important;
-  margin-top: -$euiSizeS;
-  // IE11 needs a min-width
-  min-width: $euiSize * 12;
-}

src/components/datagrid/controls/_data_grid_column_sorting.scss

@@ -6,16 +6,6 @@
   }
 }
 
-.euiDataGridColumnSortingPopover {
-  // Hack because the fixed positions of drag and drop don't work inside of transformed elements
-  // sass-lint:disable-block no-important
-  transform: none !important;
-  transition: none !important;
-  margin-top: -$euiSizeS;
-  // IE11 needs a min-width
-  min-width: $euiSize * 12;
-}
-
 .euiDataGridColumnSorting__fieldList {
   @include euiYScrollWithShadows;
   padding-top: $euiSizeXS;

src/components/datagrid/controls/_data_grid_toolbar.scss

@@ -0,0 +1,52 @@
+.euiDataGrid__controls {
+  background: $euiPageBackgroundColor;
+  position: relative;
+  z-index: 3; // Needs to sit above the content blow that sits below it
+  border: $euiBorderThin;
+  padding: $euiSizeXS;
+  flex-grow: 0;
+
+  > * {
+    margin-left: $euiSizeXS / 2;
+  }
+}
+
+.euiDataGrid__controlBtn {
+  border-radius: $euiBorderRadius;
+
+  &:focus {
+    background: shadeOrTint($euiColorLightestShade, 10%, 10%);
+  }
+}
+
+.euiDataGrid__controlBtn--active,
+.euiDataGrid__controlBtn--active:focus {
+  font-weight: $euiFontWeightSemiBold;
+  color: $euiColorFullShade;
+}
+
+@include euiDataGridStyles(bordersNone) {
+  .euiDataGrid__controls {
+    border: none;
+    background: $euiColorEmptyShade;
+  }
+}
+
+@include euiDataGridStyles(bordersHorizontal) {
+  .euiDataGrid__controls {
+    border-right: none;
+    border-left: none;
+    border-top: none;
+    background: $euiColorEmptyShade;
+  }
+}
+
+.euiDataGrid__controlPopover {
+  // Hack because the fixed positions of drag and drop don't work inside of transformed elements
+  // sass-lint:disable-block no-important
+  transform: none !important;
+  transition: none !important;
+  margin-top: -$euiSizeS;
+  // IE11 needs a min-width
+  min-width: $euiSize * 12;
+}

src/components/datagrid/controls/column_selector.tsx

@@ -155,7 +155,7 @@ export const useDataGridColumnSelector = (
       closePopover={() => setIsOpen(false)}
       anchorPosition="downLeft"
       panelPaddingSize="s"
-      panelClassName="euiDataGridColumnSelectorPopover"
+      panelClassName="euiDataGrid__controlPopover"
       button={
         <EuiButtonEmpty
           size="xs"

src/components/datagrid/controls/column_sorting.tsx

@@ -141,7 +141,7 @@ export const useDataGridColumnSorting = (
       closePopover={() => setIsOpen(false)}
       anchorPosition="downLeft"
       panelPaddingSize="s"
-      panelClassName="euiDataGridColumnSortingPopover"
+      panelClassName="euiDataGrid__controlPopover"
       button={
         <EuiButtonEmpty
           size="xs"

src/components/datagrid/controls/style_selector.tsx

@@ -69,7 +69,7 @@ export const useDataGridStyleSelector = (
       closePopover={() => setIsOpen(false)}
       anchorPosition="downCenter"
       panelPaddingSize="s"
-      panelClassName="euiDataGridColumnSelectorPopover"
+      panelClassName="euiDataGrid__controlPopover"
       button={
         <EuiButtonEmpty
           size="xs"