feat(*): removing display density first pass (#14239)

* feat(*): removing display density first pass

* feat(*): removing display density second pass

* fix(theme): add a missing var in the drop down theme causing the drop down items to position bad

* chore(migrations): Add migrations for all the components that have displayDensity input

* fix(navbar): update component sizes in the context of the navbar (#14286)

* fix(navbar): default component sizes

* changelog(18.0.0): add section about sizing

* chore(*): add migration for $active-item-color in the bottom-nav

* feat(*): add migrations for global large size

* fix(query-builder): size components properly (#14287)
---------

Co-authored-by: Martin Dragnev <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>
Co-authored-by: desig9stein <[email protected]>

Author: 4 people

CHANGELOG.md

@@ -14,6 +14,24 @@ All notable changes for each version of this project will be documented in this
     - 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.
+### Changes
+- With the removal of the Display Density token, components now get their default sizes from the theme. Default sizes have changed for most components, with it now being medium (previously large). Here's an exhaustive list of all sizable components and their default sizes by theme:
+    - `Avatar` - Small (All Themes)
+    - `Button` - Large (Material), Medium (Bootstrap, Fluent, Indigo)
+    - `Button Group` - Large (Material), Medium (Bootstrap, Fluent, Indigo)
+    - `Card` - Medium (All Themes)
+    - `Combo` - Medium (All Themes)
+    - `Chip` - Medium (All Themes)
+    - `Date/Time Picker` - Medium (All Themes)
+    - `Dropdown` - Medium (All Themes)
+    - `Dialog` - Medium (All Themes)
+    - `Icon` - Large (All Themes)
+    - `Icon Button` - Large (Material), Medium (Bootstrap, Fluent, Indigo)
+    - `Input Group` - Medium (All Themes)
+    - `List` - Medium (All Themes)
+    - `Tree` - Medium (All Themes)
+    - `Rating` - Medium (All Themes)
+    - `Select` - Medium (All Themes)
 
 ### 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.

package-lock.json

@@ -70,7 +70,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.19.2",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^7.0.0",
+    "igniteui-theming": "^7.0.2",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

package.json

@@ -41,6 +41,118 @@
                 "type": "component"
             }
         },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-action-strip",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-button",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-buttongroup",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-chip",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-combo",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-simple-combo",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-drop-down",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-select",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-input-group",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-list",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-paginator",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-query-builder",
+                "type": "component"
+            }
+        },
+        {
+            "name": "displayDensity",
+            "remove": true,
+            "owner": {
+                "selector": "igx-tree",
+                "type": "component"
+            }
+        },
         {
             "name": "showPivotConfigurationUI",
             "replaceWith": "pivotUI",

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

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$active-item-color",
+      "replaceWith": "$icon-selected-color",
+      "owner": "bottom-nav-theme",
+      "type": "property"
+    }
+  ]
+}