fix: do not override custom header footer part names (#6632)

vaadin · Oct 11, 2023 · af30824 · af30824
1 parent 8f31475
commit af30824
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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');
+    });
   });
 });