refactor: rework grid borders implementation in base styles

packages/grid/src/vaadin-grid-column-group-mixin.js

@@ -313,12 +313,14 @@ export const GridColumnGroupMixin = (superClass) =>
     _colSpanChanged(colSpan, headerCell, footerCell) {
       if (headerCell) {
         headerCell.setAttribute('colspan', colSpan);
+        headerCell.style.setProperty('--_colspan', colSpan);
         if (this._grid) {
           this._grid._a11yUpdateCellColspan(headerCell, colSpan);
         }
       }
       if (footerCell) {
         footerCell.setAttribute('colspan', colSpan);
+        footerCell.style.setProperty('--_colspan', colSpan);
         if (this._grid) {
           this._grid._a11yUpdateCellColspan(footerCell, colSpan);
         }

packages/grid/src/vaadin-grid-column-mixin.js

@@ -374,32 +374,44 @@ export const ColumnBaseMixin = (superClass) =>
     }
 
     /** @private */
-    _flexGrowChanged(flexGrow) {
+    _flexGrowChanged(_flexGrow) {
       if (this.parentElement && this.parentElement._columnPropChanged) {
         this.parentElement._columnPropChanged('flexGrow');
       }
 
-      this._allCells.forEach((cell) => {
-        cell.style.flexGrow = flexGrow;
-      });
+      if (this._grid && this._grid.__updateCSSGridTemplateColumns) {
+        this._grid.__updateCSSGridTemplateColumns();
+      }
+
+      // this._allCells.forEach((cell) => {
+      //   cell.style.flexGrow = flexGrow;
+      // });
     }
 
     /** @private */
     _orderChanged(order) {
       this._allCells.forEach((cell) => {
         cell.style.order = order;
       });
+
+      if (this._grid && this._grid._cellOrderChanged) {
+        this._grid._cellOrderChanged();
+      }
     }
 
     /** @private */
-    _widthChanged(width) {
+    _widthChanged(_width) {
       if (this.parentElement && this.parentElement._columnPropChanged) {
         this.parentElement._columnPropChanged('width');
       }
 
-      this._allCells.forEach((cell) => {
-        cell.style.width = width;
-      });
+      // this._allCells.forEach((cell) => {
+      //   cell.style.width = width;
+      // });
+
+      if (this._grid && this._grid.__updateCSSGridTemplateColumns) {
+        this._grid.__updateCSSGridTemplateColumns();
+      }
     }
 
     /** @private */
@@ -419,9 +431,9 @@ export const ColumnBaseMixin = (superClass) =>
 
     /** @private */
     _frozenToEndChanged(frozenToEnd) {
-      if (this.parentElement && this.parentElement._columnPropChanged) {
-        this.parentElement._columnPropChanged('frozenToEnd', frozenToEnd);
-      }
+      // if (this.parentElement && this.parentElement._columnPropChanged) {
+      //   this.parentElement._columnPropChanged('frozenToEnd', frozenToEnd);
+      // }
 
       this._allCells.forEach((cell) => {
         // Skip sizer cells to keep correct scrollWidth.

packages/grid/src/vaadin-grid-mixin.js

@@ -585,6 +585,24 @@ export const GridMixin = (superClass) =>
       this._updateFirstAndLastColumnForRow(row);
     }
 
+    /** @private */
+    __updateCSSGridTemplateColumns() {
+      if (!this._columnTree) {
+        return;
+      }
+
+      const templateColumns = this._columnTree[this._columnTree.length - 1]
+        .map((column) => {
+          if (column.flexGrow > 0) {
+            return `minmax(${column.width}, ${column.flexGrow}fr)`;
+          }
+          return column.width;
+        })
+        .join(' ');
+
+      this.$.table.style.setProperty('--_template-columns', templateColumns);
+    }
+
     /**
      * @param {HTMLTableRowElement} row
      * @protected
@@ -639,6 +657,14 @@ export const GridMixin = (superClass) =>
         row.hidden = !visibleRowCells.length;
       }
 
+      if (row.parentElement === this.$.header) {
+        this.$.table.toggleAttribute('has-header', this.$.header.querySelector('tr:not([hidden])'));
+      }
+
+      if (row.parentElement === this.$.footer) {
+        this.$.table.toggleAttribute('has-footer', this.$.footer.querySelector('tr:not([hidden])'));
+      }
+
       // Make sure the section has a tabbable element
       this._resetKeyboardNavigation();
       this._a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
@@ -746,6 +772,7 @@ export const GridMixin = (superClass) =>
       // Sizer rows
       this.__initRow(this.$.sizer, columnTree[columnTree.length - 1]);
 
+      this.__updateCSSGridTemplateColumns();
       this._resizeHandler();
       this._frozenCellsChanged();
       this._updateFirstAndLastColumn();

packages/grid/src/vaadin-grid-row-details-mixin.js

@@ -157,9 +157,11 @@ export const RowDetailsMixin = (superClass) =>
     /** @private */
     __updateDetailsRowPadding(row, cell) {
       if (cell.hidden) {
-        row.style.removeProperty('padding-bottom');
+        row.style.removeProperty('--_details-cell-height', '0px');
+        // row.style.removeProperty('padding-bottom');
       } else {
-        row.style.setProperty('padding-bottom', `${cell.offsetHeight}px`);
+        row.style.setProperty('--_details-cell-height', `${cell.offsetHeight}px`);
+        // row.style.setProperty('padding-bottom', `${cell.offsetHeight}px`);
       }
     }
 

packages/grid/test/column-rendering.test.js

@@ -193,9 +193,13 @@ import { flushGrid, getCellContent, getHeaderCellContent } from './helpers.js';
     });
 
     it('should have a larger row height when details opened', () => {
-      // Disable cell padding for this test
+      // Disable cell padding and row borders for this test
       fixtureSync(`
         <style>
+          vaadin-grid {
+            --vaadin-grid-row-border-width: 0px;
+          }
+
           vaadin-grid-cell-content {
             padding: 0;
           }

packages/grid/test/grid-test-styles.js

@@ -11,6 +11,7 @@ style.textContent = css`
     max-width: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    --vaadin-grid-row-border-width: 0px;
   }
 
   vaadin-grid::part(cell) {

packages/grid/test/row-details.test.js

@@ -119,7 +119,7 @@ describe('row details', () => {
       const bounds = cells[1].getBoundingClientRect();
       expect(bounds.top).to.be.closeTo(cells[0].getBoundingClientRect().bottom, 1);
       expect(bounds.left).to.equal(cells[0].getBoundingClientRect().left);
-      expect(bounds.right).to.equal(grid.$.items.getBoundingClientRect().right);
+      expect(bounds.right).to.equal(cells[0].getBoundingClientRect().right);
       expect(bounds.bottom).to.be.closeTo(bodyRows[2].getBoundingClientRect().top, 1);
       expect(bounds.height).to.be.above(10);
     };