Skip to content

Commit 78eef0c

Browse files
dkamburovdkamburov
authored
Merge pull request #14163 from IgniteUI/mdragnev/refactor-density
refactor(grid): Remove deprecated usage of display density
2 parents a2ad989 + 358d6df commit 78eef0c

File tree

170 files changed

+1233
-1063
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

170 files changed

+1233
-1063
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,17 @@ All notable changes for each version of this project will be documented in this
77
- `IgxCombo`, `IgxSimpleCombo`:
88
- Introduced abillity for hiding the clear icon button when the custom clear icon template is empty.
99
- `IgxDateTimeEditor`, `IgxTimePicker`:
10-
- Now accept the following custom `inputFormat` options, as Angular's DatePipe:
11-
- Fractional seconds: S, SS, SSS.
12-
- Period (Am/Pm): a, aa, aaa, aaaa, aaaaa
10+
- Now accept the following custom `inputFormat` options, as Angular's DatePipe:
11+
- Fractional seconds: S, SS, SSS.
12+
- Period (Am/Pm): a, aa, aaa, aaaa, aaaaa
1313
- `IgxPivotGrid`
1414
- Added templatable row dimension headers displayed on the top, above all row headers.
1515
- Replace the `showPivotConfigurationUI` property with `pivotUI` property, adding ability now to enable/disable the configuration UI and/or the new row dimension headers.
1616
- Added `sortable` property for each IPivotDimension.
1717

18+
### General
19+
- 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.
20+
1821
## 17.2.0
1922
### New Features
2023
- `IgxAvatar`

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,46 @@
11
{
22
"$schema": "../../common/schema/binding.schema.json",
33
"changes": [
4+
{
5+
"name": "displayDensity",
6+
"remove": true,
7+
"owner": {
8+
"selector": "igx-grid",
9+
"type": "component"
10+
}
11+
},
12+
{
13+
"name": "displayDensity",
14+
"remove": true,
15+
"owner": {
16+
"selector": "igx-tree-grid",
17+
"type": "component"
18+
}
19+
},
20+
{
21+
"name": "displayDensity",
22+
"remove": true,
23+
"owner": {
24+
"selector": "igx-pivot-grid",
25+
"type": "component"
26+
}
27+
},
28+
{
29+
"name": "displayDensity",
30+
"remove": true,
31+
"owner": {
32+
"selector": "igx-hierarchical-grid",
33+
"type": "component"
34+
}
35+
},
36+
{
37+
"name": "displayDensity",
38+
"remove": true,
39+
"owner": {
40+
"selector": "igx-row-island",
41+
"type": "component"
42+
}
43+
},
444
{
545
"name": "showPivotConfigurationUI",
646
"replaceWith": "pivotUI",

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

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,170 @@ describe(`Update to ${version}`, () => {
3030

3131
const migrationName = 'migration-38';
3232

33+
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 () => {
34+
appTree.create(
35+
'/testSrc/appPrefix/component/test.component.html', `
36+
<igx-grid [data]="data" [displayDensity]="'cosy'" height="300px" width="300px">
37+
<igx-column field="Name" header="Athlete"></igx-column>
38+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
39+
<igx-column field="CountryFlag" header="Country"></igx-column>
40+
</igx-grid>
41+
<igx-grid [data]="data" displayDensity="cosy" height="300px" width="300px">
42+
<igx-column field="Name" header="Athlete"></igx-column>
43+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
44+
<igx-column field="CountryFlag" header="Country"></igx-column>
45+
</igx-grid>`);
46+
47+
const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
48+
49+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
50+
.toEqual(`
51+
<igx-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-medium)'">
52+
<igx-column field="Name" header="Athlete"></igx-column>
53+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
54+
<igx-column field="CountryFlag" header="Country"></igx-column>
55+
</igx-grid>
56+
<igx-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-medium)'">
57+
<igx-column field="Name" header="Athlete"></igx-column>
58+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
59+
<igx-column field="CountryFlag" header="Country"></igx-column>
60+
</igx-grid>`);
61+
});
62+
63+
it('should only remove and not replace displayDensity property from igx-grid if it is bound to something different than a value', async () => {
64+
appTree.create(
65+
'/testSrc/appPrefix/component/test.component.html', `
66+
<igx-grid [data]="data" [displayDensity]="density" height="300px" width="300px">
67+
<igx-column field="Name" header="Athlete"></igx-column>
68+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
69+
<igx-column field="CountryFlag" header="Country"></igx-column>
70+
</igx-grid>`);
71+
72+
const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
73+
74+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
75+
.toEqual(`
76+
<igx-grid [data]="data" height="300px" width="300px">
77+
<igx-column field="Name" header="Athlete"></igx-column>
78+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
79+
<igx-column field="CountryFlag" header="Country"></igx-column>
80+
</igx-grid>`);
81+
});
82+
83+
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 () => {
84+
appTree.create(
85+
'/testSrc/appPrefix/component/test.component.html', `
86+
<igx-tree-grid [data]="data" [displayDensity]="'comfortable'" height="300px" width="300px">
87+
<igx-column field="Name" header="Athlete"></igx-column>
88+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
89+
<igx-column field="CountryFlag" header="Country"></igx-column>
90+
</igx-tree-grid>
91+
<igx-tree-grid [data]="data" displayDensity="compact" height="300px" width="300px">
92+
<igx-column field="Name" header="Athlete"></igx-column>
93+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
94+
<igx-column field="CountryFlag" header="Country"></igx-column>
95+
</igx-tree-grid>`);
96+
97+
const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
98+
99+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
100+
.toEqual(`
101+
<igx-tree-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-large)'">
102+
<igx-column field="Name" header="Athlete"></igx-column>
103+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
104+
<igx-column field="CountryFlag" header="Country"></igx-column>
105+
</igx-tree-grid>
106+
<igx-tree-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-small)'">
107+
<igx-column field="Name" header="Athlete"></igx-column>
108+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
109+
<igx-column field="CountryFlag" header="Country"></igx-column>
110+
</igx-tree-grid>`);
111+
});
112+
113+
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 () => {
114+
appTree.create(
115+
'/testSrc/appPrefix/component/test.component.html', `
116+
<igx-pivot-grid [data]="data" [displayDensity]="'comfortable'" height="300px" width="300px">
117+
<igx-column field="Name" header="Athlete"></igx-column>
118+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
119+
<igx-column field="CountryFlag" header="Country"></igx-column>
120+
</igx-pivot-grid>
121+
<igx-pivot-grid [data]="data" displayDensity="compact" height="300px" width="300px">
122+
<igx-column field="Name" header="Athlete"></igx-column>
123+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
124+
<igx-column field="CountryFlag" header="Country"></igx-column>
125+
</igx-pivot-grid>`);
126+
127+
const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
128+
129+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
130+
.toEqual(`
131+
<igx-pivot-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-large)'">
132+
<igx-column field="Name" header="Athlete"></igx-column>
133+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
134+
<igx-column field="CountryFlag" header="Country"></igx-column>
135+
</igx-pivot-grid>
136+
<igx-pivot-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-small)'">
137+
<igx-column field="Name" header="Athlete"></igx-column>
138+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
139+
<igx-column field="CountryFlag" header="Country"></igx-column>
140+
</igx-pivot-grid>`);
141+
});
142+
143+
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 () => {
144+
appTree.create(
145+
'/testSrc/appPrefix/component/test.component.html', `
146+
<igx-hierarchical-grid [data]="data" [displayDensity]="'comfortable'" height="300px" width="300px">
147+
<igx-column field="Name" header="Athlete"></igx-column>
148+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
149+
<igx-column field="CountryFlag" header="Country"></igx-column>
150+
<igx-row-island [displayDensity]="'comfortable'">
151+
<igx-column field="Name" header="Athlete"></igx-column>
152+
<igx-row-island [displayDensity]="'compact'">
153+
<igx-column field="Name" header="Athlete"></igx-column>
154+
<igx-row-island/>
155+
<igx-row-island/>
156+
</igx-hierarchical-grid>
157+
<igx-hierarchical-grid [data]="data" displayDensity="compact" height="300px" width="300px">
158+
<igx-column field="Name" header="Athlete"></igx-column>
159+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
160+
<igx-column field="CountryFlag" header="Country"></igx-column>
161+
<igx-row-island displayDensity="comfortable">
162+
<igx-column field="Name" header="Athlete"></igx-column>
163+
<igx-row-island displayDensity="cosy">
164+
<igx-column field="Name" header="Athlete"></igx-column>
165+
<igx-row-island/>
166+
<igx-row-island/>
167+
</igx-hierarchical-grid>`);
168+
169+
const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
170+
171+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
172+
.toEqual(`
173+
<igx-hierarchical-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-large)'">
174+
<igx-column field="Name" header="Athlete"></igx-column>
175+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
176+
<igx-column field="CountryFlag" header="Country"></igx-column>
177+
<igx-row-island [style.--ig-size]="'var(--ig-size-large)'">
178+
<igx-column field="Name" header="Athlete"></igx-column>
179+
<igx-row-island [style.--ig-size]="'var(--ig-size-small)'">
180+
<igx-column field="Name" header="Athlete"></igx-column>
181+
<igx-row-island/>
182+
<igx-row-island/>
183+
</igx-hierarchical-grid>
184+
<igx-hierarchical-grid [data]="data" height="300px" width="300px" [style.--ig-size]="'var(--ig-size-small)'">
185+
<igx-column field="Name" header="Athlete"></igx-column>
186+
<igx-column field="TrackProgress" header="Track Progress"></igx-column>
187+
<igx-column field="CountryFlag" header="Country"></igx-column>
188+
<igx-row-island [style.--ig-size]="'var(--ig-size-large)'">
189+
<igx-column field="Name" header="Athlete"></igx-column>
190+
<igx-row-island [style.--ig-size]="'var(--ig-size-medium)'">
191+
<igx-column field="Name" header="Athlete"></igx-column>
192+
<igx-row-island/>
193+
<igx-row-island/>
194+
</igx-hierarchical-grid>`);
195+
});
196+
33197
it('should replace PivotGrid property `showPivotConfigurationUI` with `pivotUI`', async () => {
34198
appTree.create(`/testSrc/appPrefix/component/test.component.html`,
35199
`

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { Rule, SchematicContext, Tree } from "@angular-devkit/schematics";
2+
import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
3+
import { nativeImport } from 'igniteui-angular/migrations/common/import-helper.js';
4+
import type { Element } from '@angular/compiler';
25
import { BoundPropertyObject, InputPropertyType, UpdateChanges } from "../common/UpdateChanges";
36

47
const version = "18.0.0";
@@ -7,7 +10,55 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
710
context.logger.info(
811
`Applying migration for Ignite UI for Angular to version ${version}`,
912
);
13+
const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
1014
const update = new UpdateChanges(__dirname, host, context);
15+
const changes = new Map<string, FileChange[]>();
16+
const prop = ["displayDensity", "[displayDensity]"];
17+
const tags = ["igx-grid", "igx-hierarchical-grid", "igx-row-island", "igx-tree-grid", "igx-pivot-grid"]
18+
19+
const applyChanges = () => {
20+
for (const [path, change] of changes.entries()) {
21+
let buffer = host.read(path).toString();
22+
change.sort((c, c1) => c.position - c1.position)
23+
.reverse()
24+
.forEach(c => buffer = c.apply(buffer));
25+
26+
host.overwrite(path, buffer);
27+
}
28+
};
29+
30+
const addChange = (path: string, change: FileChange) => {
31+
if (changes.has(path)) {
32+
changes.get(path).push(change);
33+
} else {
34+
changes.set(path, [change]);
35+
}
36+
};
37+
38+
for (const path of update.templateFiles) {
39+
const grid = findElementNodes(parseFile(new HtmlParser(), host, path), tags);
40+
grid
41+
.filter(node => hasAttribute(node as Element, prop))
42+
.map(node => getSourceOffset(node as Element))
43+
.forEach(offset => {
44+
const { startTag, file, node } = offset;
45+
const { value } = getAttribute(node, prop)[0];
46+
// using includes and not the value itself because the value might be either [displayDensity]='comfortable' or displayDensity="'comfortable'"
47+
if (value.includes('comfortable')) {
48+
const newProp = ` [style.--ig-size]="'var(--ig-size-large)'"`;
49+
addChange(file.url, new FileChange(startTag.end - 1, newProp, '', "insert"));
50+
}
51+
else if (value.includes('cosy')) {
52+
const newProp = ` [style.--ig-size]="'var(--ig-size-medium)'"`;
53+
addChange(file.url, new FileChange(startTag.end - 1, newProp, '', "insert"));
54+
} else if (value.includes('compact')) {
55+
const newProp = ` [style.--ig-size]="'var(--ig-size-small)'"`;
56+
addChange(file.url, new FileChange(startTag.end - 1, newProp, '', "insert"));
57+
}
58+
// We don`t have else because if density it set like this: [displayDensity]="customDensity"
59+
// then we can`t do anything and we just remove the property.
60+
});
61+
}
1162

1263
update.addValueTransform('pivotConfigurationUI_to_pivotUI', (args: BoundPropertyObject): void => {
1364
args.bindingType = InputPropertyType.EVAL;
@@ -24,5 +75,6 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
2475
}
2576
});
2677

78+
applyChanges();
2779
update.applyChanges();
2880
};

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

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -47,23 +47,5 @@
4747
@include m(fw) {
4848
@extend %grid-summary--fixed-width !optional;
4949
}
50-
51-
@include m(cosy) {
52-
@extend %igx-grid-summary !optional;
53-
@extend %igx-grid-summary--cosy !optional;
54-
55-
@include e(item) {
56-
@extend %igx-grid-summary__item--cosy !optional;
57-
}
58-
}
59-
60-
@include m(compact) {
61-
@extend %igx-grid-summary !optional;
62-
@extend %igx-grid-summary--compact !optional;
63-
64-
@include e(item) {
65-
@extend %igx-grid-summary__item--compact !optional;
66-
}
67-
}
6850
}
6951
}

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

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,5 @@
5353
@include e(dd-list){
5454
@extend %igx-grid-toolbar__dd-list !optional;
5555
}
56-
57-
@include m(cosy){
58-
@extend %igx-grid-toolbar !optional;
59-
@extend %igx-grid-toolbar--cosy !optional;
60-
}
61-
62-
@include m(compact){
63-
@extend %igx-grid-toolbar !optional;
64-
@extend %igx-grid-toolbar--compact !optional;
65-
}
6656
}
6757
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,8 @@
134134
);
135135

136136
%igx-grid-toolbar {
137+
@include sizable();
138+
--component-size: var(--ig-size, var(--ig-size-large));
137139
position: relative;
138140
width: 100%;
139141
display: flex;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
@extend %igx-excel-filter__loading !optional;
1111
}
1212

13+
@include e(sizing) {
14+
@extend %igx-excel-filter__sizing !optional;
15+
}
16+
1317
@include e(tree) {
1418
@extend %igx-excel-filter__tree !optional;
1519
}

0 commit comments

Comments
 (0)