Indigo: Add Updates for Navdrawer, Navbar, and Switch (#14231)

Author: simeonoff

package-lock.json

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

package.json

@@ -181,6 +181,11 @@
             "version": "17.2.2",
             "description": "Updates Ignite UI for Angular from v17.2.0 to v17.2.2",
             "factory": "./update-17_2_2"
+        },
+        "migration-37": {
+            "version": "17.2.3",
+            "description": "Updates Ignite UI for Angular from v17.2.2 to v17.2.3",
+            "factory": "./update-17_2_3"
         }
     }
 }

projects/igniteui-angular/migrations/migration-collection.json

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

projects/igniteui-angular/migrations/update-17_2_3/changes/theme-changes.json

@@ -0,0 +1,58 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '17.2.3';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    const configJson = {
+        projects: {
+            testProj: {
+                root: '/',
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    const migrationName = 'migration-37';
+
+    it('should rename the $idle-item-color property to the $label-color', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-bottom-nav: bottom-nav-theme($idle-item-color: red);`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-bottom-nav: bottom-nav-theme($label-color: red);`
+        );
+    });
+
+    it('should rename the $selected-item-color property to the $label-selected-color', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-bottom-nav: bottom-nav-theme($selected-item-color: red);`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-bottom-nav: bottom-nav-theme($label-selected-color: red);`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-17_2_3/index.spec.ts

@@ -0,0 +1,28 @@
+import { Rule, SchematicContext, Tree } from "@angular-devkit/schematics";
+import { BoundPropertyObject, InputPropertyType, UpdateChanges } from "../common/UpdateChanges";
+
+const version = "17.2.3";
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(
+        `Applying migration for Ignite UI for Angular to version ${version}`,
+    );
+    const update = new UpdateChanges(__dirname, host, context);
+
+    update.addValueTransform('vertical_to_orientation', (args: BoundPropertyObject): void => {
+        args.bindingType = InputPropertyType.STRING;
+
+        switch (args.value) {
+            case 'true':
+                args.value = 'vertical';
+                break;
+            case 'false':
+                args.value = 'horizontal';
+                break;
+            default:
+                args.value += ` ? 'vertical' : 'horizontal' `;
+        }
+    });
+
+    update.applyChanges();
+};

projects/igniteui-angular/migrations/update-17_2_3/index.ts

@@ -74,7 +74,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^6.2.0",
+        "igniteui-theming": "^6.3.0",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -62,10 +62,12 @@
 
             [igxBottomNavHeaderIcon] {
                 @extend %igx-tab-icon !optional;
+                @extend %igx-tab-icon--disabled !optional;
             }
 
             [igxBottomNavHeaderLabel] {
                 @extend %igx-tab-label !optional;
+                @extend %igx-tab-label--disabled !optional;
             }
         }
     }