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)
elastic · Sep 6, 2024 · 30c6f9b · 30c6f9b
1 parent 4e8aa7d
commit 30c6f9b
Showing 1 changed file with 29 additions and 8 deletions.
diff --git a/packages/eui/src/components/datagrid/data_grid.styles.ts b/packages/eui/src/components/datagrid/data_grid.styles.ts
@@ -122,19 +122,26 @@ 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 {
+          &:not(.euiDataGridFooterCell) {
             ${logicalCSS('border-bottom', euiTheme.border.thin)}
             ${logicalCSS(
               'border-right',
@@ -145,6 +152,7 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
                 colorMode
               )}`
             )}
+          }
 
           &--firstColumn {
             ${logicalCSS('border-left', euiTheme.border.thin)}
@@ -155,19 +163,32 @@ 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 {
             ${logicalCSS('border-left', euiTheme.border.thin)}
           }
         }
 
+        .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};