Remove Display Density setters from custom samples. Use style instead. (#799)

Author: skrustev

samples/grids/grid/data-searching/index.html

@@ -32,7 +32,7 @@
         </igc-input>
       </div>
 
-      <igc-grid auto-generate="false" id="grid" name="grid" allow-filtering="true" display-density="compact" height="100%" width="100%">
+      <igc-grid class="gridSize" auto-generate="false" id="grid" name="grid" allow-filtering="true" height="100%" width="100%">
         <igc-column field="IndustrySector" data-type="string" sortable="true"></igc-column>        
         <igc-column field="IndustryGroup" data-type="string" sortable="true"></igc-column>        
         <igc-column field="SectorType" data-type="string" sortable="true"></igc-column>        

samples/grids/grid/data-searching/src/index.css

@@ -1,2 +1,6 @@
 /* shared styles are loaded from: */
-/* https://static.infragistics.com/xplatform/css/samples */
+/* https://static.infragistics.com/xplatform/css/samples */
+
+.gridSize {
+    --ig-size: var(--ig-size-small);
+}

samples/grids/grid/data-searching/src/index.ts

@@ -6,6 +6,8 @@ import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
 import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText } from 'igniteui-webcomponents';
 import { MarketData } from './MarketData';
 
+import "./index.css";
+
 defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent);
 
 export class Sample {

samples/grids/grid/finjs/index.html

@@ -47,7 +47,7 @@
         </div>
       </div>
       <div class="container fill">
-        <igc-grid row-selection="multiple" auto-generate="false" primary-key="id" display-density="cosy" hide-grouped-columns="true"
+        <igc-grid class="gridSize" row-selection="multiple" auto-generate="false" primary-key="id" hide-grouped-columns="true"
           allow-filtering="true" filter-mode="excelStyleFilter" name="grid1" id="grid1">
           <igc-grid-toolbar id="toolbar">
             <igc-grid-toolbar-actions>

samples/grids/grid/finjs/src/index.css

@@ -111,4 +111,8 @@
 .strongNegative2 > .igx-grid__td-text {
     border-inline-end: 4px solid rgb(255, 20, 75);
     padding-inline-end: 15px;
+}
+
+.gridSize {
+    --ig-size: var(--ig-size-medium);
 }

samples/grids/grid/keyboard-navigation-guide/index.html

@@ -21,7 +21,7 @@
 
             <div class="container fill">
                 <div class="grid_wrapper">
-                    <igc-grid display-density="compact" primary-key="CustomerID" allow-filtering="true" allow-advanced-filtering="true" filter-mode="excelStyleFilter" auto-generate="false" column-selection="true" name="grid" id="grid" id="grid">
+                    <igc-grid class="gridSize" primary-key="CustomerID" allow-filtering="true" allow-advanced-filtering="true" filter-mode="excelStyleFilter" auto-generate="false" column-selection="true" name="grid" id="grid" id="grid">
                         <igc-column-group header="Customer Information" collapsible="true">
                             <igc-column field="CustomerName" header="Customer Name" visible-when-collapsed="true" has-summary="true" sortable="true" groupable="true" editable="true">
                             </igc-column>

samples/grids/grid/keyboard-navigation-guide/src/index.css

@@ -1,6 +1,10 @@
 /* shared styles are loaded from: */
 /* https://static.infragistics.com/xplatform/css/samples */
 
+.gridSize {
+    --ig-size: var(--ig-size-small);
+}
+
 .grid_wrapper {
     width: 75%;
 }

samples/grids/tree-grid/data-summaries-custom/index.html

@@ -20,11 +20,11 @@
 
     <div class="container fill">
         <igc-tree-grid
+        class="gridSize"
         height="620px"
         auto-generate="false"
         name="treeGrid"
         id="treeGrid"
-        display-density="compact"
         primary-key="ID"
         foreign-key="ParentID">
             <igc-column

samples/grids/tree-grid/data-summaries-custom/src/index.css

@@ -1,2 +1,6 @@
 /* shared styles are loaded from: */
 /* https://static.infragistics.com/xplatform/css/samples */
+
+.gridSize {
+    --ig-size: var(--ig-size-small);
+}

samples/grids/tree-grid/finjs/index.html

@@ -44,7 +44,7 @@
         </div>
       </div>
       <div class="container fill">
-        <igc-tree-grid child-data-key="childDataKey" row-selection="multiple" auto-generate="false" primary-key="id" display-density="cosy" hide-grouped-columns="true"
+        <igc-tree-grid class="gridSize" child-data-key="childDataKey" row-selection="multiple" auto-generate="false" primary-key="id" hide-grouped-columns="true"
           allow-filtering="true" filter-mode="excelStyleFilter" name="grid1" id="grid1">
           <igc-grid-toolbar id="toolbar">
             <igc-grid-toolbar-actions>