Grid with hideHeaders:true omits extraneous header border (#3435)

+ Fixes #3309
xh · Aug 4, 2023 · 9d180fa · 9d180fa
1 parent b89945f
commit 9d180fa
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@
 ### 🐞 Bug Fixes
 
 * Fixed bug where `manuallySized` was not being set properly on column state
+* Grid header bottom border still rendering when hiding grid headers fix.
 
 ### 📚 Libraries
 

diff --git a/cmp/ag-grid/AgGrid.scss b/cmp/ag-grid/AgGrid.scss
@@ -57,6 +57,10 @@
       color: var(--xh-grid-header-text-color);
     }
   }
+  &--hide-headers .ag-header {
+    border-bottom-width: 0;
+    min-height: 0 !important;
+  }
 
   //------------------------
   // Core Row Classes

diff --git a/cmp/ag-grid/AgGrid.ts b/cmp/ag-grid/AgGrid.ts
@@ -4,24 +4,24 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {placeholder, frame} from '@xh/hoist/cmp/layout';
+import {frame, placeholder} from '@xh/hoist/cmp/layout';
 import {
+    createElement,
+    hoistCmp,
     HoistModel,
+    HoistProps,
     LayoutProps,
+    lookup,
     useLocalModel,
     uses,
-    hoistCmp,
-    createElement,
-    XH,
-    lookup,
-    HoistProps
+    XH
 } from '@xh/hoist/core';
+import {AgGridReact, GridOptions} from '@xh/hoist/kit/ag-grid';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {isNil} from 'lodash';
 import './AgGrid.scss';
 import {AgGridModel} from './AgGridModel';
-import {AgGridReact, GridOptions} from '@xh/hoist/kit/ag-grid';
 
 export interface AgGridProps extends HoistProps<AgGridModel>, GridOptions, LayoutProps {}
 
@@ -63,7 +63,15 @@ export const [AgGrid, agGrid] = hoistCmp.withFactory<AgGridProps>({
         }
 
         const [layoutProps, agGridProps] = splitLayoutProps(props),
-            {sizingMode, showHover, rowBorders, stripeRows, cellBorders, showCellFocus} = model,
+            {
+                sizingMode,
+                showHover,
+                rowBorders,
+                stripeRows,
+                cellBorders,
+                showCellFocus,
+                hideHeaders
+            } = model,
             {darkTheme, isDesktop} = XH;
 
         const impl = useLocalModel(AgGridLocalModel);
@@ -78,7 +86,8 @@ export const [AgGrid, agGrid] = hoistCmp.withFactory<AgGridProps>({
                 stripeRows ? 'xh-ag-grid--stripe-rows' : 'xh-ag-grid--no-stripe-rows',
                 cellBorders ? 'xh-ag-grid--cell-borders' : 'xh-ag-grid--no-cell-borders',
                 showCellFocus ? 'xh-ag-grid--show-cell-focus' : 'xh-ag-grid--no-cell-focus',
-                isDesktop && showHover ? 'xh-ag-grid--show-hover' : 'xh-ag-grid--no-hover'
+                isDesktop && showHover ? 'xh-ag-grid--show-hover' : 'xh-ag-grid--no-hover',
+                hideHeaders ? 'xh-ag-grid--hide-headers' : null
             ),
             ...layoutProps,
             item: createElement(AgGridReact, {