refactor(grid): Remove deprecated usage of display density

CHANGELOG.md

@@ -7,14 +7,17 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`, `IgxSimpleCombo`:
  - Introduced abillity for hiding the clear icon button when the custom clear icon template is empty.
 - `IgxDateTimeEditor`, `IgxTimePicker`:
-  - Now accept the following custom `inputFormat` options, as Angular's DatePipe:
-  - Fractional seconds: S, SS, SSS.
-  - Period (Am/Pm): a, aa, aaa, aaaa, aaaaa
+ - Now accept the following custom `inputFormat` options, as Angular's DatePipe:
+ - Fractional seconds: S, SS, SSS.
+ - Period (Am/Pm): a, aa, aaa, aaaa, aaaaa
 - `IgxPivotGrid`
  - Added templatable row dimension headers displayed on the top, above all row headers.
  - Replace the `showPivotConfigurationUI` property with `pivotUI` property, adding ability now to enable/disable the configuration UI and/or the new row dimension headers.
  - Added `sortable` property for each IPivotDimension.
 
+### General
+- Removed deprecated property `displayDensity`. Size is now controlled only through the custom CSS property `--ig-size`. Refer to the [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide) and components documentation for usage details.
+
 ## 17.2.0
 ### New Features
 - `IgxAvatar`

projects/igniteui-angular/migrations/update-18_0_0/changes/inputs.json

@@ -1,6 +1,46 @@
 {
  "$schema": "../../common/schema/binding.schema.json",
  "changes": [
+ {
+ "name": "displayDensity",
+ "remove": true,
+ "owner": {
+ "selector": "igx-grid",
+ "type": "component"
+ }
+ },
+ {
+ "name": "displayDensity",
+ "remove": true,
+ "owner": {
+ "selector": "igx-tree-grid",
+ "type": "component"
+ }
+ },
+ {
+ "name": "displayDensity",
+ "remove": true,
+ "owner": {
+ "selector": "igx-pivot-grid",
+ "type": "component"
+ }
+ },
+ {
+ "name": "displayDensity",
+ "remove": true,
+ "owner": {
+ "selector": "igx-hierarchical-grid",
+ "type": "component"
+ }
+ },
+ {
+ "name": "displayDensity",
+ "remove": true,
+ "owner": {
+ "selector": "igx-row-island",
+ "type": "component"
+ }
+ },
  {
  "name": "showPivotConfigurationUI",
  "replaceWith": "pivotUI",

projects/igniteui-angular/migrations/update-18_0_0/index.spec.ts

@@ -30,6 +30,170 @@ describe(`Update to ${version}`, () => {
 
  const migrationName = 'migration-38';
 
+ it('should remove displayDensity property from igx-grid and replace it with inline style if its value is not set to a component member', async () => {
+ appTree.create(
+ '/testSrc/appPrefix/component/test.component.html', `
+ <igx-grid [data]="data" [displayDensity]="'cosy'" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-grid>
+ <igx-grid [data]="data" displayDensity="cosy" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-grid>`);
+
+ const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+ expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+ .toEqual(`
+ <igx-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-medium)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-grid>
+ <igx-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-medium)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-grid>`);
+ });
+
+ it('should only remove and not replace displayDensity property from igx-grid if it is bound to something different than a value', async () => {
+ appTree.create(
+ '/testSrc/appPrefix/component/test.component.html', `
+ <igx-grid [data]="data" [displayDensity]="density" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-grid>`);
+
+ const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+ expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+ .toEqual(`
+ <igx-grid [data]="data" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-grid>`);
+ });
+
+ it('should remove displayDensity property from igx-tree-grid and replace it with inline style if its value is not set to a component member', async () => {
+ appTree.create(
+ '/testSrc/appPrefix/component/test.component.html', `
+ <igx-tree-grid [data]="data" [displayDensity]="'comfortable'" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-tree-grid>
+ <igx-tree-grid [data]="data" displayDensity="compact" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-tree-grid>`);
+
+ const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+ expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+ .toEqual(`
+ <igx-tree-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-large)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-tree-grid>
+ <igx-tree-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-small)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-tree-grid>`);
+ });
+
+ it('should remove displayDensity property from igx-pivot-grid and replace it with inline style if its value is not set to a component member', async () => {
+ appTree.create(
+ '/testSrc/appPrefix/component/test.component.html', `
+ <igx-pivot-grid [data]="data" [displayDensity]="'comfortable'" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-pivot-grid>
+ <igx-pivot-grid [data]="data" displayDensity="compact" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-pivot-grid>`);
+
+ const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+ expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+ .toEqual(`
+ <igx-pivot-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-large)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-pivot-grid>
+ <igx-pivot-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-small)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ </igx-pivot-grid>`);
+ });
+
+ it('should remove displayDensity property from igx-hierarchical-grid and igx-row-island and replace it with inline style if its value is not set to a component member', async () => {
+ appTree.create(
+ '/testSrc/appPrefix/component/test.component.html', `
+ <igx-hierarchical-grid [data]="data" [displayDensity]="'comfortable'" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ <igx-row-island [displayDensity]="'comfortable'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-row-island [displayDensity]="'compact'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-row-island/>
+ <igx-row-island/>
+ </igx-hierarchical-grid>
+ <igx-hierarchical-grid [data]="data" displayDensity="compact" height="300px" width="300px">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ <igx-row-island displayDensity="comfortable">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-row-island displayDensity="cosy">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-row-island/>
+ <igx-row-island/>
+ </igx-hierarchical-grid>`);
+
+ const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+ expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+ .toEqual(`
+ <igx-hierarchical-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-large)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ <igx-row-island [style.--ig-size]="'var(--ig-size-large)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-row-island [style.--ig-size]="'var(--ig-size-small)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-row-island/>
+ <igx-row-island/>
+ </igx-hierarchical-grid>
+ <igx-hierarchical-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-small)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-column field="TrackProgress" header="Track Progress"></igx-column>
+ <igx-column field="CountryFlag" header="Country"></igx-column>
+ <igx-row-island [style.--ig-size]="'var(--ig-size-large)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-row-island [style.--ig-size]="'var(--ig-size-medium)'">
+ <igx-column field="Name" header="Athlete"></igx-column>
+ <igx-row-island/>
+ <igx-row-island/>
+ </igx-hierarchical-grid>`);
+ });
+
  it('should replace PivotGrid property `showPivotConfigurationUI` with `pivotUI`', async () => {
  appTree.create(`/testSrc/appPrefix/component/test.component.html`,
  `

projects/igniteui-angular/migrations/update-18_0_0/index.ts

@@ -1,4 +1,7 @@
 import { Rule, SchematicContext, Tree } from "@angular-devkit/schematics";
+import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
+import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
+import type { Element } from '@angular/compiler';
 import { BoundPropertyObject, InputPropertyType, UpdateChanges } from "../common/UpdateChanges";
 
 const version = "18.0.0";
@@ -7,7 +10,55 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
  context.logger.info(
  `Applying migration for Ignite UI for Angular to version ${version}`,
  );
+ const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
  const update = new UpdateChanges(__dirname, host, context);
+ const changes = new Map<string, FileChange[]>();
+ const prop = ["displayDensity", "[displayDensity]"];
+ const tags = ["igx-grid", "igx-hierarchical-grid", "igx-row-island", "igx-tree-grid", "igx-pivot-grid"]
+
+ const applyChanges = () => {
+ for (const [path, change] of changes.entries()) {
+ let buffer = host.read(path).toString();
+ change.sort((c, c1) => c.position - c1.position)
+ .reverse()
+ .forEach(c => buffer = c.apply(buffer));
+
+ host.overwrite(path, buffer);
+ }
+ };
+
+ const addChange = (path: string, change: FileChange) => {
+ if (changes.has(path)) {
+ changes.get(path).push(change);
+ } else {
+ changes.set(path, [change]);
+ }
+ };
+
+ for (const path of update.templateFiles) {
+ const grid = findElementNodes(parseFile(new HtmlParser(), host, path), tags);
+ grid
+ .filter(node => hasAttribute(node as Element, prop))
+ .map(node => getSourceOffset(node as Element))
+ .forEach(offset => {
+ const { startTag, file, node } = offset;
+ const { value } = getAttribute(node, prop)[0];
+ // using includes and not the value itself because the value might be either [displayDensity]='comfortable' or displayDensity="'comfortable'"
+ if (value.includes('comfortable')) {
+ const newProp = ` [style.--ig-size]="'var(--ig-size-large)'"`;
+ addChange(file.url, new FileChange(startTag.end - 1, newProp, '', "insert"));
+ }
+ else if (value.includes('cosy')) {
+ const newProp = ` [style.--ig-size]="'var(--ig-size-medium)'"`;
+ addChange(file.url, new FileChange(startTag.end - 1, newProp, '', "insert"));
+ } else if (value.includes('compact')) {
+ const newProp = ` [style.--ig-size]="'var(--ig-size-small)'"`;
+ addChange(file.url, new FileChange(startTag.end - 1, newProp, '', "insert"));
+ }
+ // We don`t have else because if density it set like this: [displayDensity]="customDensity"
+ // then we can`t do anything and we just remove the property.
+ });
+ }
 
  update.addValueTransform('pivotConfigurationUI_to_pivotUI', (args: BoundPropertyObject): void => {
  args.bindingType = InputPropertyType.EVAL;
@@ -24,5 +75,6 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
  }
  });
 
+ applyChanges();
  update.applyChanges();
 };

projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-component.scss

@@ -47,23 +47,5 @@
  @include m(fw) {
  @extend %grid-summary--fixed-width !optional;
  }
-
- @include m(cosy) {
- @extend %igx-grid-summary !optional;
- @extend %igx-grid-summary--cosy !optional;
-
- @include e(item) {
- @extend %igx-grid-summary__item--cosy !optional;
- }
- }
-
- @include m(compact) {
- @extend %igx-grid-summary !optional;
- @extend %igx-grid-summary--compact !optional;
-
- @include e(item) {
- @extend %igx-grid-summary__item--compact !optional;
- }
- }
  }
 }

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss

@@ -53,15 +53,5 @@
  @include e(dd-list){
  @extend %igx-grid-toolbar__dd-list !optional;
  }
-
- @include m(cosy){
- @extend %igx-grid-toolbar !optional;
- @extend %igx-grid-toolbar--cosy !optional;
- }
-
- @include m(compact){
- @extend %igx-grid-toolbar !optional;
- @extend %igx-grid-toolbar--compact !optional;
- }
  }
 }

projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss

@@ -134,6 +134,8 @@
  );
 
  %igx-grid-toolbar {
+ @include sizable();
+ --component-size: var(--ig-size, var(--ig-size-large));
  position: relative;
  width: 100%;
  display: flex;

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss

@@ -10,6 +10,10 @@
  @extend %igx-excel-filter__loading !optional;
  }
 
+ @include e(sizing) {
+ @extend %igx-excel-filter__sizing !optional;
+ }
+
  @include e(tree) {
  @extend %igx-excel-filter__tree !optional;
  }