feat: grid column header and footer part names (#6629)

vaadin · Oct 11, 2023 · 553cb9e · 553cb9e
1 parent 35d02a5
commit 553cb9e
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 0 deletions.
diff --git a/packages/grid/src/vaadin-grid-column-mixin.d.ts b/packages/grid/src/vaadin-grid-column-mixin.d.ts
@@ -93,6 +93,20 @@ export declare class ColumnBaseMixinClass<TItem, Column extends ColumnBaseMixinC
    * - `column` The `<vaadin-grid-column>` element.
    */
   footerRenderer: GridHeaderFooterRenderer<TItem, Column> | null | undefined;
+
+  /**
+   * Custom part name for the header cell.
+   *
+   * @attr {string} header-part-name
+   */
+  headerPartName: string | null | undefined;
+
+  /**
+   * Custom part name for the footer cell.
+   *
+   * @attr {string} footer-part-name
+   */
+  footerPartName: string | null | undefined;
 }
 
 export interface GridColumnMixin<TItem, Column extends GridColumnMixinClass<TItem, Column>>

diff --git a/packages/grid/src/vaadin-grid-column-mixin.js b/packages/grid/src/vaadin-grid-column-mixin.js
@@ -101,6 +101,24 @@ export const ColumnBaseMixin = (superClass) =>
           type: String,
         },
 
+        /**
+         * Custom part name for the header cell.
+         *
+         * @attr {string} header-part-name
+         */
+        headerPartName: {
+          type: String,
+        },
+
+        /**
+         * Custom part name for the footer cell.
+         *
+         * @attr {string} footer-part-name
+         */
+        footerPartName: {
+          type: String,
+        },
+
         /**
          * @type {boolean}
          * @protected
@@ -238,6 +256,7 @@ export const ColumnBaseMixin = (superClass) =>
         '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells.*)',
         '_hiddenChanged(hidden, _headerCell, _footerCell, _cells.*)',
         '_rowHeaderChanged(rowHeader, _cells.*)',
+        '__headerFooterPartNameChanged(_headerCell, _footerCell, headerPartName, footerPartName)',
       ];
     }
 
@@ -631,6 +650,22 @@ export const ColumnBaseMixin = (superClass) =>
       this._renderHeaderCellContent(headerRenderer, headerCell);
     }
 
+    /** @private */
+    __headerFooterPartNameChanged(headerCell, footerCell, headerPartName, footerPartName) {
+      [
+        { cell: headerCell, partName: headerPartName },
+        { cell: footerCell, partName: footerPartName },
+      ].forEach(({ cell, partName }) => {
+        if (cell) {
+          const customParts = cell.__customParts || [];
+          cell.part.remove(...customParts);
+
+          cell.__customParts = partName ? partName.trim().split(' ') : [];
+          cell.part.add(...cell.__customParts);
+        }
+      });
+    }
+
     /**
      * Renders the content of body cells using a renderer.
      *

diff --git a/packages/grid/test/styling.common.js b/packages/grid/test/styling.common.js
@@ -197,4 +197,91 @@ describe('styling', () => {
 
     runStylingTest('parts', 'cellPartNameGenerator', 'generateCellPartNames', assertPartNames);
   });
+
+  describe('header and footer part name', () => {
+    let column;
+    let headerCell;
+    let footerCell;
+
+    beforeEach(() => {
+      column = grid.querySelector('vaadin-grid-column');
+      column.footerRenderer = (root) => {
+        root.textContent = 'footer';
+      };
+      headerCell = getContainerCell(grid.$.header, 0, 0);
+      footerCell = getContainerCell(grid.$.footer, 0, 0);
+    });
+
+    it('should add a header and footer part name', () => {
+      column.headerPartName = 'foobar';
+      column.footerPartName = 'bazqux';
+
+      expect(headerCell.getAttribute('part')).to.contain('foobar');
+      expect(footerCell.getAttribute('part')).to.contain('bazqux');
+    });
+
+    it('should clear the header and footer part name', () => {
+      column.headerPartName = 'foobar';
+      column.footerPartName = 'bazqux';
+
+      column.headerPartName = '';
+      column.footerPartName = '';
+
+      expect(headerCell.getAttribute('part')).to.not.contain('foobar');
+      expect(footerCell.getAttribute('part')).to.not.contain('bazqux');
+    });
+
+    it('should add multiple header and footer part names', () => {
+      column.headerPartName = 'foobar bazqux';
+      column.footerPartName = 'bazqux foobar';
+
+      expect(headerCell.getAttribute('part')).to.contain('foobar');
+      expect(headerCell.getAttribute('part')).to.contain('bazqux');
+      expect(footerCell.getAttribute('part')).to.contain('foobar');
+      expect(footerCell.getAttribute('part')).to.contain('bazqux');
+    });
+
+    it('should remove one header and footer part name', () => {
+      column.headerPartName = 'foobar bazqux';
+      column.footerPartName = 'bazqux foobar';
+
+      column.headerPartName = 'foobar';
+      column.footerPartName = 'bazqux';
+
+      expect(headerCell.getAttribute('part')).to.contain('foobar');
+      expect(headerCell.getAttribute('part')).to.not.contain('bazqux');
+      expect(footerCell.getAttribute('part')).to.contain('bazqux');
+      expect(footerCell.getAttribute('part')).to.not.contain('foobar');
+    });
+
+    it('should add a header and footer part name with trailing whitespace', () => {
+      column.headerPartName = 'foobar ';
+      column.footerPartName = ' bazqux';
+
+      expect(headerCell.getAttribute('part')).to.contain('foobar');
+      expect(footerCell.getAttribute('part')).to.contain('bazqux');
+    });
+
+    it('should clear the header and footer part name with null', () => {
+      column.headerPartName = 'foobar';
+      column.footerPartName = 'bazqux';
+
+      column.headerPartName = null;
+      column.footerPartName = null;
+
+      expect(headerCell.getAttribute('part')).to.not.contain('foobar');
+      expect(footerCell.getAttribute('part')).to.not.contain('bazqux');
+    });
+
+    it('should clear the header and footer part name with undefined', () => {
+      column.headerPartName = 'foobar';
+      column.footerPartName = 'bazqux';
+
+      column.headerPartName = undefined;
+      column.footerPartName = undefined;
+
+      expect(headerCell.getAttribute('part')).to.not.contain('foobar');
+      expect(footerCell.getAttribute('part')).to.not.contain('bazqux');
+    });
+  });
 });
diff --git a/packages/grid/test/typings/grid.types.ts b/packages/grid/test/typings/grid.types.ts
@@ -250,6 +250,8 @@ assertType<string | null | undefined>(narrowedColumn.header);
 assertType<GridColumnTextAlign | null | undefined>(narrowedColumn.textAlign);
 assertType<string | null | undefined>(narrowedColumn.path);
 assertType<boolean>(narrowedColumn.autoWidth);
+assertType<string | null | undefined>(narrowedColumn.headerPartName);
+assertType<string | null | undefined>(narrowedColumn.footerPartName);
 
 /* GridColumnGroup */
 const genericColumnGroup = document.createElement('vaadin-grid-column-group');
@@ -258,6 +260,8 @@ assertType<GridColumnGroup>(genericColumnGroup);
 const narrowedColumnGroup = genericColumnGroup as GridColumnGroup<TestGridItem>;
 assertType<HTMLElement>(narrowedColumnGroup);
 assertType<ColumnBaseMixinClass<TestGridItem, GridColumnGroup>>(narrowedColumnGroup);
+assertType<string | null | undefined>(narrowedColumnGroup.headerPartName);
+assertType<string | null | undefined>(narrowedColumnGroup.footerPartName);
 
 narrowedColumnGroup.headerRenderer = (root, column) => {
   assertType<HTMLElement>(root);