From af30824761ef47926fb8e9886aba4dcfb1c8f212 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Wed, 11 Oct 2023 11:18:25 +0300
Subject: [PATCH] fix: do not override custom header footer part names (#6632)

---
 packages/grid/src/vaadin-grid-mixin.js           |  2 +-
 .../test/dom/__snapshots__/grid.test.snap.js     |  8 ++++----
 packages/grid/test/styling.common.js             | 16 ++++++++++++++++
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
index 9fcadbdb76..0cd2ab5694 100644
--- a/packages/grid/src/vaadin-grid-mixin.js
+++ b/packages/grid/src/vaadin-grid-mixin.js
@@ -700,7 +700,7 @@ export const GridMixin = (superClass) =>
                 column._emptyCells.push(cell);
               }
             }
-            cell.setAttribute('part', `cell ${section}-cell`);
+            cell.part.add('cell', `${section}-cell`);
           }
 
           if (!cell._content.parentElement) {
diff --git a/packages/grid/test/dom/__snapshots__/grid.test.snap.js b/packages/grid/test/dom/__snapshots__/grid.test.snap.js
index da573f508b..8e0959aa81 100644
--- a/packages/grid/test/dom/__snapshots__/grid.test.snap.js
+++ b/packages/grid/test/dom/__snapshots__/grid.test.snap.js
@@ -715,7 +715,7 @@ snapshots["vaadin-grid shadow hidden column"] =
           first-column=""
           id="vaadin-grid-cell-1"
           last-column=""
-          part="cell header-cell first-column-cell last-column-cell first-header-row-cell last-header-row-cell"
+          part="cell header-cell last-column-cell first-header-row-cell last-header-row-cell first-column-cell"
           role="columnheader"
           style="width: 100px; flex-grow: 1; order: 20000000;"
           tabindex="0"
@@ -799,7 +799,7 @@ snapshots["vaadin-grid shadow hidden column"] =
           first-column=""
           id="vaadin-grid-cell-3"
           last-column=""
-          part="cell footer-cell first-column-cell last-column-cell first-footer-row-cell last-footer-row-cell"
+          part="cell footer-cell last-column-cell first-footer-row-cell last-footer-row-cell first-column-cell"
           role="gridcell"
           style="width: 100px; flex-grow: 1; order: 20000000;"
           tabindex="-1"
@@ -873,7 +873,7 @@ snapshots["vaadin-grid shadow hidden column selected"] =
           first-column=""
           id="vaadin-grid-cell-1"
           last-column=""
-          part="cell header-cell first-column-cell last-column-cell first-header-row-cell last-header-row-cell"
+          part="cell header-cell last-column-cell first-header-row-cell last-header-row-cell first-column-cell"
           role="columnheader"
           style="width: 100px; flex-grow: 1; order: 20000000;"
           tabindex="0"
@@ -958,7 +958,7 @@ snapshots["vaadin-grid shadow hidden column selected"] =
           first-column=""
           id="vaadin-grid-cell-3"
           last-column=""
-          part="cell footer-cell first-column-cell last-column-cell first-footer-row-cell last-footer-row-cell"
+          part="cell footer-cell last-column-cell first-footer-row-cell last-footer-row-cell first-column-cell"
           role="gridcell"
           style="width: 100px; flex-grow: 1; order: 20000000;"
           tabindex="-1"
diff --git a/packages/grid/test/styling.common.js b/packages/grid/test/styling.common.js
index bc6ce3fd23..e2eb1520a8 100644
--- a/packages/grid/test/styling.common.js
+++ b/packages/grid/test/styling.common.js
@@ -283,5 +283,21 @@ describe('styling', () => {
       expect(headerCell.getAttribute('part')).to.not.contain('foobar');
       expect(footerCell.getAttribute('part')).to.not.contain('bazqux');
     });
+
+    it('should not override custom part names', () => {
+      const newColumn = document.createElement('vaadin-grid-column');
+      newColumn.path = 'value';
+      newColumn.headerPartName = 'foobar';
+      newColumn.footerPartName = 'bazqux';
+      grid.appendChild(newColumn);
+
+      flushGrid(grid);
+
+      const newHeaderCell = getContainerCell(grid.$.header, 0, 2);
+      const newFooterCell = getContainerCell(grid.$.footer, 0, 2);
+
+      expect(newHeaderCell.getAttribute('part')).to.contain('foobar');
+      expect(newFooterCell.getAttribute('part')).to.contain('bazqux');
+    });
   });
 });