From 60eac2e7a85d0be7c115cfee2887cb3330252248 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 26 Jan 2022 09:45:55 -0800
Subject: [PATCH] Correctly account for gridStyle.border

---
 src/components/datagrid/_data_grid.scss          |  9 +++++++--
 src/components/datagrid/body/data_grid_body.tsx  |  2 +-
 src/components/datagrid/utils/scrolling.test.tsx | 10 ++++++++++
 src/components/datagrid/utils/scrolling.tsx      | 15 +++++++++++++--
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/datagrid/_data_grid.scss b/src/components/datagrid/_data_grid.scss
index 59ce98f71a0..d683f2d2de5 100644
--- a/src/components/datagrid/_data_grid.scss
+++ b/src/components/datagrid/_data_grid.scss
@@ -74,6 +74,9 @@
   bottom: 0;
   left: 0;
 
+  // Ensure the underlying grid is still interactable
+  pointer-events: none;
+
   // Ensure the scrolling data grid body always has border edges
   // regardless of cell position
   box-shadow: inset 0 0 0 $euiBorderWidthThin $euiBorderColor;
@@ -81,8 +84,10 @@
   // border will affect the relative position of the child scroll bar overlays
   // and cause them to be off by the width of the border
 
-  // Ensure the underlying grid is still interactable
-  pointer-events: none;
+  // For grids with horizontal-only borders, only render a bottom 'border'
+  .euiDataGrid--bordersHorizontal & {
+    box-shadow: inset 0 (-2 * $euiBorderWidthThin) 0 (-1 * $euiBorderWidthThin) $euiBorderColor;
+  }
 
   // Ensure the horizontal scrollbar has a top border
   .euiDataGrid__scrollBarOverlayBottom {
diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx
index 3ea813b376a..1f1193267d2 100644
--- a/src/components/datagrid/body/data_grid_body.tsx
+++ b/src/components/datagrid/body/data_grid_body.tsx
@@ -261,7 +261,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     hasVerticalScroll,
     hasHorizontalScroll,
     scrollBorderOverlay,
-  } = useScrollBars(outerGridRef);
+  } = useScrollBars(outerGridRef, gridStyles.border);
 
   /**
    * Widths
diff --git a/src/components/datagrid/utils/scrolling.test.tsx b/src/components/datagrid/utils/scrolling.test.tsx
index c6c8f43d182..7418317a837 100644
--- a/src/components/datagrid/utils/scrolling.test.tsx
+++ b/src/components/datagrid/utils/scrolling.test.tsx
@@ -393,6 +393,16 @@ describe('useScrollBars', () => {
       });
     });
 
+    describe('if the grid does not display borders', () => {
+      it('does not render anything', () => {
+        const { scrollBorderOverlay } = testCustomHook(() =>
+          useScrollBars(mockOuterGridRef, 'none')
+        );
+
+        expect(scrollBorderOverlay).toEqual(null);
+      });
+    });
+
     describe('if the grid scrolls but has inline scrollbars & no scrollbar width/height', () => {
       it('renders a single overlay with borders for the outermost grid', () => {
         const { scrollBorderOverlay } = testCustomHook(() =>
diff --git a/src/components/datagrid/utils/scrolling.tsx b/src/components/datagrid/utils/scrolling.tsx
index a3fe3e2bfd4..db34e2b4a1d 100644
--- a/src/components/datagrid/utils/scrolling.tsx
+++ b/src/components/datagrid/utils/scrolling.tsx
@@ -15,6 +15,7 @@ import React, {
   ReactNode,
 } from 'react';
 import { VariableSizeGrid as Grid } from 'react-window';
+import { EuiDataGridStyle } from '../data_grid_types';
 import { DataGridFocusContext } from './focus';
 
 interface ScrollCellIntoView {
@@ -178,7 +179,8 @@ export const useScrollCellIntoView = ({
  * Checks whether the current grid scrolls and/or has scrollbars
  */
 export const useScrollBars = (
-  outerGridRef: MutableRefObject<HTMLDivElement | null>
+  outerGridRef: MutableRefObject<HTMLDivElement | null>,
+  borderStyle: EuiDataGridStyle['border'] = 'all'
 ): {
   scrollBarHeight: number;
   scrollBarWidth: number;
@@ -210,6 +212,9 @@ export const useScrollBars = (
     if (!hasHorizontalScroll && !hasVerticalScroll) {
       return null; // Nothing to render if the grid doesn't scroll
     }
+    if (borderStyle === 'none') {
+      return null; // Nothing to render if the grid doesn't use borders
+    }
     return (
       <div className="euiDataGrid__scrollOverlay" role="presentation">
         {scrollBarHeight > 0 && (
@@ -226,7 +231,13 @@ export const useScrollBars = (
         )}
       </div>
     );
-  }, [hasHorizontalScroll, hasVerticalScroll, scrollBarHeight, scrollBarWidth]);
+  }, [
+    hasHorizontalScroll,
+    hasVerticalScroll,
+    scrollBarHeight,
+    scrollBarWidth,
+    borderStyle,
+  ]);
 
   return {
     scrollBarHeight,