refactor!: remove deprecated classNameGenerator API (#10502)

Author: vursen

packages/grid/src/vaadin-grid-mixin.d.ts

@@ -31,15 +31,10 @@ import type { GridRowDetailsRenderer, RowDetailsMixinClass } from './vaadin-grid
 import type { ScrollMixinClass } from './vaadin-grid-scroll-mixin.js';
 import type { SelectionMixinClass } from './vaadin-grid-selection-mixin.js';
 import type { SortMixinClass } from './vaadin-grid-sort-mixin.js';
-import type {
-  GridCellClassNameGenerator,
-  GridCellPartNameGenerator,
-  StylingMixinClass,
-} from './vaadin-grid-styling-mixin.js';
+import type { GridCellPartNameGenerator, StylingMixinClass } from './vaadin-grid-styling-mixin.js';
 
 export {
   GridBodyRenderer,
-  GridCellClassNameGenerator,
   GridCellPartNameGenerator,
   GridDataProvider,
   GridDataProviderCallback,

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

@@ -753,7 +753,6 @@ export const GridMixin = (superClass) =>
       this._resetKeyboardNavigation();
       this.__a11yUpdateHeaderRows();
       this.__a11yUpdateFooterRows();
-      this.generateCellClassNames();
       this.generateCellPartNames();
       this.__updateHeaderAndFooter();
     }
@@ -788,7 +787,6 @@ export const GridMixin = (superClass) =>
 
       if (loading) {
         // Run style generators for the loading row to have custom names cleared
-        this._generateCellClassNames(row);
         this._generateCellPartNames(row);
       }
     }
@@ -819,7 +817,6 @@ export const GridMixin = (superClass) =>
 
       this.__updateRowStateParts(row, model);
 
-      this._generateCellClassNames(row, model);
       this._generateCellPartNames(row, model);
       this._filterDragAndDrop(row, model);
       this.__updateDragSourceParts(row, model);

packages/grid/src/vaadin-grid-styling-mixin.d.ts

@@ -9,36 +9,11 @@ import type { GridColumn } from './vaadin-grid-column.js';
 
 export type GridCellPartNameGenerator<TItem> = (column: GridColumn<TItem>, model: GridItemModel<TItem>) => string;
 
-/**
- * @deprecated Use `GridCellPartNameGenerator` type and `cellPartNameGenerator` API instead.
- */
-export type GridCellClassNameGenerator<TItem> = GridCellPartNameGenerator<TItem>;
-
 export declare function StylingMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
 ): Constructor<StylingMixinClass<TItem>> & T;
 
 export declare class StylingMixinClass<TItem> {
-  /**
-   * A function that allows generating CSS class names for grid cells
-   * based on their row and column. The return value should be the generated
-   * class name as a string, or multiple class names separated by whitespace
-   * characters.
-   *
-   * Receives two arguments:
-   * - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
-   * - `model` The object with the properties related with
-   *   the rendered item, contains:
-   *   - `model.index` The index of the item.
-   *   - `model.item` The item.
-   *   - `model.expanded` Sublevel toggle state.
-   *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
-   *   - `model.selected` Selected state.
-   *
-   * @deprecated Use `cellPartNameGenerator` instead.
-   */
-  cellClassNameGenerator: GridCellClassNameGenerator<TItem> | null | undefined;
-
   /**
    * A function that allows generating CSS `part` names for grid cells in Shadow DOM based
    * on their row and column, for styling from outside using the `::part()` selector.
@@ -58,16 +33,6 @@ export declare class StylingMixinClass<TItem> {
    */
   cellPartNameGenerator: GridCellPartNameGenerator<TItem> | null | undefined;
 
-  /**
-   * Runs the `cellClassNameGenerator` for the visible cells.
-   * If the generator depends on varying conditions, you need to
-   * call this function manually in order to update the styles when
-   * the conditions change.
-   *
-   * @deprecated Use `cellPartNameGenerator` and `generateCellPartNames()` instead.
-   */
-  generateCellClassNames(): void;
-
   /**
    * Runs the `cellPastNameGenerator` for the visible cells.
    * If the generator depends on varying conditions, you need to

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

@@ -12,30 +12,6 @@ export const StylingMixin = (superClass) =>
   class StylingMixin extends superClass {
     static get properties() {
       return {
-        /**
-         * A function that allows generating CSS class names for grid cells
-         * based on their row and column. The return value should be the generated
-         * class name as a string, or multiple class names separated by whitespace
-         * characters.
-         *
-         * Receives two arguments:
-         * - `column` The `<vaadin-grid-column>` element (`undefined` for details-cell).
-         * - `model` The object with the properties related with
-         *   the rendered item, contains:
-         *   - `model.index` The index of the item.
-         *   - `model.item` The item.
-         *   - `model.expanded` Sublevel toggle state.
-         *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
-         *   - `model.selected` Selected state.
-         *
-         * @type {GridCellClassNameGenerator | null | undefined}
-         * @deprecated Use `cellPartNameGenerator` instead.
-         */
-        cellClassNameGenerator: {
-          type: Function,
-          sync: true,
-        },
-
         /**
          * A function that allows generating CSS `part` names for grid cells in Shadow DOM based
          * on their row and column, for styling from outside using the `::part()` selector.
@@ -63,38 +39,14 @@ export const StylingMixin = (superClass) =>
     }
 
     static get observers() {
-      return [
-        '__cellClassNameGeneratorChanged(cellClassNameGenerator)',
-        '__cellPartNameGeneratorChanged(cellPartNameGenerator)',
-      ];
-    }
-
-    /** @private */
-    __cellClassNameGeneratorChanged() {
-      this.generateCellClassNames();
+      return ['__cellPartNameGeneratorChanged(cellPartNameGenerator)'];
     }
 
     /** @private */
     __cellPartNameGeneratorChanged() {
       this.generateCellPartNames();
     }
 
-    /**
-     * Runs the `cellClassNameGenerator` for the visible cells.
-     * If the generator depends on varying conditions, you need to
-     * call this function manually in order to update the styles when
-     * the conditions change.
-     *
-     * @deprecated Use `cellPartNameGenerator` and `generateCellPartNames()` instead.
-     */
-    generateCellClassNames() {
-      iterateChildren(this.$.items, (row) => {
-        if (!row.hidden) {
-          this._generateCellClassNames(row, this.__getRowModel(row));
-        }
-      });
-    }
-
     /**
      * Runs the `cellPartNameGenerator` for the visible cells.
      * If the generator depends on varying conditions, you need to
@@ -109,22 +61,6 @@ export const StylingMixin = (superClass) =>
       });
     }
 
-    /** @private */
-    _generateCellClassNames(row, model) {
-      iterateRowCells(row, (cell) => {
-        if (cell.__generatedClasses) {
-          cell.__generatedClasses.forEach((className) => cell.classList.remove(className));
-        }
-        if (this.cellClassNameGenerator && !row.hasAttribute('loading')) {
-          const result = this.cellClassNameGenerator(cell._column, model);
-          cell.__generatedClasses = result && result.split(' ').filter((className) => className.length > 0);
-          if (cell.__generatedClasses) {
-            cell.__generatedClasses.forEach((className) => cell.classList.add(className));
-          }
-        }
-      });
-    }
-
     /** @private */
     _generateCellPartNames(row, model) {
       iterateRowCells(row, (cell) => {

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

@@ -366,18 +366,6 @@ import { flushGrid, getCellContent, getHeaderCellContent } from './helpers.js';
         expectCellsVisualOrderToMatchColumnOrder();
       });
 
-      it('should have cell class names on the revealed cells', async () => {
-        // Add a class name generator
-        grid.cellClassNameGenerator = () => 'foo';
-        await nextFrame();
-        expect(getBodyCell(0, getLastVisibleColumnIndex()).classList.contains('foo')).to.be.true;
-
-        // Scroll back to the beginning
-        await scrollHorizontally(-grid.$.table.scrollWidth);
-        // Expect the cell that was previously not visible to have the class name
-        expect(getBodyCell(0, 0).classList.contains('foo')).to.be.true;
-      });
-
       it('should have cell part names on the revealed cells', async () => {
         // Add a part name generator
         grid.cellPartNameGenerator = () => 'foo';