Datagrid toolbar

src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`useDataGridStyleSelector styleSelector renders a toolbar button/popover
     hasArrow={true}
     isOpen={false}
     ownFocus={true}
-    panelClassName="euiDataGrid__controlPopover"
+    panelClassName="euiDataGrid__stylePopoverPanel"
     panelPaddingSize="s"
   >
     <EuiI18n

src/components/datagrid/controls/_data_grid_display.scss

@@ -1,3 +1,3 @@
-.euiDataGrid__displayFormRow {
-  width: $euiFormMaxWidth;
+.euiDataGrid__stylePopoverPanel {
+  width: $euiFormMaxWidth + $euiSize;
 }

src/components/datagrid/controls/_data_grid_toolbar.scss

@@ -3,7 +3,7 @@
   position: relative;
   z-index: 3; // Needs to sit above the content blow that sits below it
   border: $euiBorderThin;
-  padding: $euiSizeXS;
+  padding: $euiSizeXS $euiSizeXS $euiSizeXS 0;
   display: flex;
   justify-content: space-between;
 }
@@ -28,18 +28,9 @@
   }
 }
 
-.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) {

src/components/datagrid/controls/data_grid_toolbar.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { EuiButtonIcon } from '../../button';
 import { useEuiI18n } from '../../i18n';
 import {
@@ -48,11 +48,18 @@ export const EuiDataGridToolbar = ({
     ? true
     : gridWidth > minSizeForControls || isFullScreen;
 
-  // need to safely access those Web APIs
-  if (typeof document !== 'undefined') {
-    // When data grid is full screen, we add a class to the body to remove the extra scrollbar
-    document.body.classList.toggle(GRID_IS_FULLSCREEN_CLASSNAME, isFullScreen);
-  }
+  useEffect(() => {
+    // When data grid is full screen, we add a class to the body to remove the extra scrollbar and stay above any fixed headers
+    if (isFullScreen && typeof document !== 'undefined') {
+      document.body.classList.add(GRID_IS_FULLSCREEN_CLASSNAME);
+
+      return () => {
+        if (typeof document !== 'undefined') {
+          document.body.classList.remove(GRID_IS_FULLSCREEN_CLASSNAME);
+        }
+      };
+    }
+  }, [isFullScreen]);
 
   const fullScreenSelector = (
     <EuiButtonIcon

src/components/datagrid/controls/style_selector.tsx

@@ -71,7 +71,7 @@ export const useDataGridStyleSelector = (
       closePopover={() => setIsOpen(false)}
       anchorPosition="downRight"
       panelPaddingSize="s"
-      panelClassName="euiDataGrid__controlPopover"
+      panelClassName="euiDataGrid__stylePopoverPanel"
       button={
         <EuiButtonIcon
           size="xs"

src/components/datagrid/data_grid_types.ts

@@ -221,7 +221,7 @@ export type CommonGridProps = CommonProps &
      */
     gridStyle?: EuiDataGridStyle;
     /**
-     * Accepts either a boolean or #EuiDataGridToolbarVisibilityOptions object. When used as a boolean, defines the display of the toolbar entire. WHen passed an object allows you to turn off individual controls within the toolbar as well as add additional buttons.
+     * Accepts either a boolean or #EuiDataGridToolBarVisibilityOptions object. When used as a boolean, defines the display of the toolbar entire. WHen passed an object allows you to turn off individual controls within the toolbar as well as add additional buttons.
      */
     toolbarVisibility?: boolean | EuiDataGridToolBarVisibilityOptions;
     /**
@@ -609,20 +609,20 @@ export interface EuiDataGridToolBarVisibilityOptions {
   showFullScreenSelector?: boolean;
   /**
    * If passed a `ReactNode`, appends the passed custom control into the left side of the toolbar, after the column & sort controls.
-   * Use #EuiDataGridToolBarAdditionalControlsOptions to customize the location of your control.
+   * Or use #EuiDataGridToolBarAdditionalControlsOptions to customize the location of your control.
    */
   additionalControls?: ReactNode | EuiDataGridToolBarAdditionalControlsOptions;
 }
 
 export interface EuiDataGridToolBarAdditionalControlsOptions {
   /**
-   * Will append the passed node into the left side of the toolbar, after the column & sort controls.
-   * We recommend using `xs`-sized `EuiButtonEmpty`s to match the existing controls on the left.
+   * Will append the passed node into the left side of the toolbar, **after** the column & sort controls.
+   * We recommend using `<EuiButtonEmpty size="xs" />` to match the existing controls on the left.
    */
   left?: ReactNode;
   /**
-   * Will prepend the passed node into the right side of the toolbar, before the density & full screen controls.
-   * We recommend using `xs`-sized `EuiButtonIcons`s to match the existing controls on the right.
+   * Will prepend the passed node into the right side of the toolbar, **before** the density & full screen controls.
+   * We recommend using `<EuiButtonIcon size="xs" />` to match the existing controls on the right.
    */
   right?: ReactNode;
 }