From 30c6f9bccec1ccc8bf7e6209030a2880c8df05de Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Sat, 31 Aug 2024 10:39:29 -0700
Subject: [PATCH] Fix clashing border CSS from gridStyle props

- grid borders and header/footer underline/overlines were conflicting with one another

- borders on header/footer cells were adding extra height to the cells themselves (unlike regular row cells)
---
 .../components/datagrid/data_grid.styles.ts   | 57 +++++++++++++------
 1 file changed, 39 insertions(+), 18 deletions(-)

diff --git a/packages/eui/src/components/datagrid/data_grid.styles.ts b/packages/eui/src/components/datagrid/data_grid.styles.ts
index db32789f068..2a4b8b3166c 100644
--- a/packages/eui/src/components/datagrid/data_grid.styles.ts
+++ b/packages/eui/src/components/datagrid/data_grid.styles.ts
@@ -122,29 +122,37 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
       horizontal: css`
         label: borders;
 
-        .euiDataGridRowCell {
+        .euiDataGridRowCell:not(.euiDataGridFooterCell),
+        .euiDataGridFooter,
+        &:not(.euiDataGrid--headerUnderline) .euiDataGridHeader {
           ${logicalCSS('border-bottom', euiTheme.border.thin)}
         }
 
-        .euiDataGridHeaderCell {
+        &:not(.euiDataGrid--footerOverline) .euiDataGridFooter {
+          ${logicalCSS('border-top', euiTheme.border.thin)}
+          ${logicalCSS('margin-top', `-${euiTheme.border.width.thin}`)}
+        }
+
+        .euiDataGridHeader {
           ${logicalCSS('border-top', euiTheme.border.thin)}
-          ${logicalCSS('border-bottom', euiTheme.border.thin)}
         }
       `,
       all: css`
         label: borders;
 
         .euiDataGridRowCell {
-          ${logicalCSS('border-bottom', euiTheme.border.thin)}
-          ${logicalCSS(
-            'border-right',
-            // Visually lighten vertical borders
-            `${euiTheme.border.width.thin} solid ${tintOrShade(
-              euiTheme.border.color,
-              0.3,
-              colorMode
-            )}`
-          )}
+          &:not(.euiDataGridFooterCell) {
+            ${logicalCSS('border-bottom', euiTheme.border.thin)}
+            ${logicalCSS(
+              'border-right',
+              // Visually lighten vertical borders
+              `${euiTheme.border.width.thin} solid ${tintOrShade(
+                euiTheme.border.color,
+                0.3,
+                colorMode
+              )}`
+            )}
+          }
 
           &--firstColumn {
             ${logicalCSS('border-left', euiTheme.border.thin)}
@@ -155,12 +163,8 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
           }
         }
 
-        .euiDataGridFooterCell:first-of-type {
-          ${logicalCSS('border-left', euiTheme.border.thin)}
-        }
-
+        .euiDataGridFooterCell,
         .euiDataGridHeaderCell {
-          ${logicalCSS('border-bottom', euiTheme.border.thin)}
           ${logicalCSS('border-right', euiTheme.border.thin)}
 
           &:first-of-type {
@@ -168,6 +172,23 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
           }
         }
 
+        .euiDataGridFooter {
+          ${logicalCSS('border-bottom', euiTheme.border.thin)}
+        }
+
+        &:not(.euiDataGrid--footerOverline) .euiDataGridFooter {
+          ${logicalCSS('border-top', euiTheme.border.thin)}
+          ${logicalCSS('margin-top', `-${euiTheme.border.width.thin}`)}
+        }
+
+        &:not(.euiDataGrid--headerUnderline) .euiDataGridHeader {
+          ${logicalCSS('border-bottom', euiTheme.border.thin)}
+        }
+
+        &:is(.euiDataGrid--noControls) .euiDataGridHeader {
+          ${logicalCSS('border-top', euiTheme.border.thin)}
+        }
+
         .euiDataGrid__controls {
           border: ${euiTheme.border.thin};
           background-color: ${euiTheme.colors.body};