refactor(*): update samples to reflect displayDensity changes

package.json

@@ -65,14 +65,13 @@
     "bootstrap": "5.3.1",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^16.0.17",
+    "igniteui-angular": "^16.1.0-beta.5",
     "igniteui-angular-charts": "^16.1.1",
     "igniteui-angular-core": "^16.1.1",
-    "igniteui-angular-extras": "^16.0.3",
+    "igniteui-angular-extras": "^16.1.0",
     "igniteui-angular-i18n": "^16.0.16",
     "igniteui-dockmanager": "^1.13.0",
     "igniteui-live-editing": "^2.0.9",
-    "igniteui-theming": "^2.1.1",
     "igniteui-webcomponents": "^4.3.1",
     "minireset.css": "0.0.6",
     "rxjs": "^6.6.7",
@@ -103,6 +102,7 @@
     "event-stream": "^4.0.1",
     "fs-extra": "^8.1.0",
     "gulp": "^4.0.2",
+    "igniteui-theming": "^3.0.3",
     "jasmine-core": "~4.2.0",
     "karma": "^6.4.2",
     "karma-chrome-launcher": "~3.2.0",
@@ -112,4 +112,4 @@
     "typescript": "4.9.5",
     "webpack-bundle-analyzer": "^4.5.0"
   }
-}
+}

projects/app-crm/src/app/grid-crm/grid-crm.component.html

@@ -1,5 +1,5 @@
 <div [ngClass]="{'grid__wrapper': true, 'dark_grid': dark === true }">
-    <igx-grid #grid1 [igxPreventDocumentScroll]="true" id="grid1" [data]="localData" [height]="'100%'" [moving]="true" [width]="'100%'" [rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true">
+    <igx-grid #grid1 [igxPreventDocumentScroll]="true" id="grid1" [data]="localData" [height]="'100%'" [moving]="true" [width]="'100%'" [rowSelection]="selectionMode" rowHeight="50" [allowFiltering]="true">
         <igx-grid-toolbar>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
@@ -15,7 +15,7 @@
                         <span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
                     </div>
                     <div class="sample-flex-container">
-                        <igx-input-group type="search" class="searchInputGroup" displayDensity="compact">
+                        <igx-input-group type="search">
                             <igx-prefix>
                                 <igx-icon class="prefixIcon" *ngIf="searchText.length === 0">search</igx-icon>
                                 <igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear

projects/app-crm/src/app/grid-crm/grid-crm.component.scss

@@ -47,10 +47,16 @@
 
 	$crm-input-drop-down: input-group-theme(
         $placeholder-color: color($light-palette, 'gray', 500),
-        $idle-text-color: color($light-palette, 'gray', 900)
+        $idle-text-color: color($light-palette, 'gray', 900),
+        $size: sizable(rem(24px), rem(32px), rem(40px))
     );
 
+    input-group[type="search"] {
+        --ig-size: var(--ig-size-small);
+    }
+
 	.grid__wrapper {
+        --ig-size: var(--ig-size-medium);
 		width: inherit;
 		position: relative;
 		height: 100%;
@@ -59,6 +65,8 @@
 	}
 
 	.avatar-cell {
+        --ig-size: var(--ig-size-small);
+
 		width: 100%;
 		display: flex;
 		justify-content: center;
@@ -197,10 +205,8 @@
 		box-shadow: none;
 	}
 
-
     @include css-vars($crm-input-drop-down);
 
-
 	.sample-flex-container {
 		.igx-input-group,
 		.igx-input-group--focused {

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.html

@@ -1,8 +1,7 @@
 <igc-dockmanager #dock class="light-theme dock-m-position" [layout]="docLayout">
     <div slot="grid" igxOverlayOutlet style="height: 100%">
         <igx-grid #grid columnSelection="multiple" [moving]="true" igxChartIntegration igxConditionalFormatting igxContextMenu
-            [chartData]="chartData" primaryKey="id" displayDensity="compact" [data]="data"
-            [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
+            [chartData]="chartData" primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
             <igx-column [sortable]="true"  [disablePinning]="true" [disableHiding]="true" field="id" [hidden]="true"></igx-column>
             <igx-column [sortable]="true"  [disablePinning]="true" [disableHiding]="true" field="category" [width]="'110px'"></igx-column>
             <igx-column [sortable]="true"  [disablePinning]="true" [disableHiding]="true" field="type" [filterable]="false" [width]="'130px'"></igx-column>

projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss

@@ -17,6 +17,10 @@
     height: 100vh;
     padding: 0 rem(8px) rem(8px) rem(8px);
     --igc-pane-content-background: #{contrast-color($color: 'gray', $variant: 900)};
+
+    igx-grid {
+        --ig-size: var(--ig-size-small);
+    }
 }
 
 .chart-types-container {

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html

@@ -3,7 +3,7 @@
     Excel like data analysis showcase application with Ignite UI Angular components and extras
 </app-page-header>
 <div class="grid-chart-contextmenu-wrapper">
-    <igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' displayDensity="compact" [data]="data">
+    <igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' [data]="data">
         <igx-column field="id" [hidden]="true"></igx-column>
         <igx-column field="category" [editable]="true" [width]="'110px'"></igx-column>
         <igx-column field="type" [editable]="true" [filterable]="false" [width]="'130px'"></igx-column>

projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.scss

@@ -1,5 +1,6 @@
 :host ::ng-deep {
     .grid-chart-contextmenu-wrapper {
+        --ig-size: var(--ig-size-small);
         width: 90%;
         margin: 50px auto;
         height: 80%;

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.html

@@ -9,7 +9,7 @@
         </div>
         <div class="actionItem">
             <!-- Change volume -->
-            <igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings" [displayDensity]="'compact'">
+            <igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings">
                 <label igxLabel>Change data volume</label>
                 <igx-prefix>
                     <igx-icon>view_list</igx-icon>
@@ -21,7 +21,7 @@
         </div>
         <div class="actionItem">
             <!-- Change frequency -->
-            <igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" [displayDensity]="'compact'" #freq>
+            <igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" #freq>
                 <label igxLabel>Change update frequency</label>
                 <igx-prefix>
                     <igx-icon>cell_wifi</igx-icon>
@@ -35,7 +35,7 @@
         <div igxOverlayOutlet #outlet></div>
     </div>
     <div slot="gridStockPrices" style="height: 100%;">
-        <igx-grid #grid1 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
+        <igx-grid #grid1 [data]="data | async" [isLoading]="isLoading"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'"
             [columnSelection]="'multiple'" [cellSelection]="'none'" [outlet]="filteringOverlayOutlet">
             <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
@@ -67,7 +67,7 @@
         </igx-grid>
     </div>
     <div slot="forexMarket" style="height: 100%;">
-        <igx-grid #grid2 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
+        <igx-grid #grid2 [data]="data | async" [isLoading]="isLoading"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
             [columnSelection]="'multiple'" [cellSelection]="'none'">
             <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
@@ -99,7 +99,7 @@
         </igx-grid>
     </div>
     <div slot="content4" style="height: 100%;">
-        <igx-grid #grid3 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
+        <igx-grid #grid3 [data]="data | async" [isLoading]="isLoading"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
             [columnSelection]="'multiple'" [cellSelection]="'none'">
             <igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
@@ -131,7 +131,7 @@
         </igx-grid>
     </div>
     <div slot="etfStockPrices" style="height: 100%;">
-        <igx-grid #grid4 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
+        <igx-grid #grid4 [data]="data | async" [isLoading]="isLoading"
             [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
             [columnSelection]="'multiple'" [cellSelection]="'none'">
             <igx-paginator></igx-paginator>

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss

@@ -128,6 +128,8 @@
 }
 
 igx-grid {
+    --ig-size: var(--ig-size-small);
+
 	.grid-area {
 		margin-block-start: 1rem;
 		overflow-y: hidden;
@@ -181,3 +183,8 @@ igx-grid {
 		}
 	}
 }
+
+igx-select {
+    --ig-size: var(--ig-size-small);
+}
+

projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.ts

@@ -300,7 +300,6 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
         });
         grid.columnSelection = 'multiple';
         grid.cellSelection = 'none';
-        grid.displayDensity = 'compact';
 
         // Use detectChanges because of ExpressionChangedAfterItHasBeenChecked Error when creating a dynamic pane
         this.cdr.detectChanges();

projects/app-lob/src/app/grid-finjs/grid-finjs.component.html

@@ -2,7 +2,6 @@
     <igx-grid #grid1
         [igxPreventDocumentScroll]="true"
         width="100%" height="100%"
-        displayDensity="compact"
         hiddenColumnsText="Hidden"
         primaryKey="id"
         [autoGenerate]="false"

projects/app-lob/src/app/grid-finjs/grid-finjs.component.scss

@@ -1,6 +1,8 @@
 @use '../../variables' as *;
 
 .grid__wrapper {
+    --ig-size: var(--ig-size-small);
+
 	position: relative;
 	width: 100%;
 	height: 98%;

projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html

@@ -10,7 +10,7 @@ <h5 class="switch-sample__title">Boston Marathon 2023</h5>
         </igx-input-group>
     </div>
     <div class="grid__wrapper__inner">
-        <igx-grid #grid1 [igxPreventDocumentScroll]="true" [data]="localData" height="600px" displayDensity="cosy" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true">
+        <igx-grid #grid1 [igxPreventDocumentScroll]="true" [data]="localData" height="600px" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true">
             <igx-paginator [perPage]="10"></igx-paginator>
             <igx-column header="Rank" [width]="'12%'" field="Id" [sortable]="true" [filterable]="false">
                 <ng-template igxCell let-cell="cell">

projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.scss

@@ -27,6 +27,14 @@ $progressBar-sample-theme: progress-linear-theme(
     justify-content: center;
 }
 
+igx-grid {
+    --ig-size: var(--ig-size-medium);
+}
+
+igx-avatar {
+    --ig-size: var(--ig-size-small);
+}
+
 :host {
     ::ng-deep {
         .igx-paginator > * {