themes(all): remove param from component themes (#15191)

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

@@ -206,6 +206,11 @@
             "version": "18.2.3",
             "description": "Updates Ignite UI for Angular from v18.2.0 to v18.2.3",
             "factory": "./update-18_2_3"
+        },
+        "migration-42": {
+            "version": "19.1.0",
+            "description": "Updates Ignite UI for Angular from v18.2.3 to v19.1.0",
+            "factory": "./update-19_1_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-19_1_0/changes/theme-changes.json

@@ -0,0 +1,119 @@
+{
+    "$schema": "../../common/schema/theme-changes.schema.json",
+    "changes": [
+      {
+        "name": "$elevations",
+        "owner": "badge-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "bottom-nav-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "button-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "card-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "carousel-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "chip-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "column-actions-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "dialog-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "drop-down-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "grid-toolbar-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "grid-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "icon-button-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "input-group-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "navbar-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "navdrawer-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "query-builder-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "snackbar-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "splitter-theme",
+        "remove": true,
+        "type": "property"
+      },
+      {
+        "name": "$elevations",
+        "owner": "time-picker-theme",
+        "remove": true,
+        "type": "property"
+      }
+    ]
+  }

projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts

@@ -0,0 +1,39 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '19.1.0';
+const themes = [
+    'badge-theme', 'bottom-nav-theme', 'button-theme', 'card-theme', 'carousel-theme',
+    'chip-theme', 'column-actions-theme', 'dialog-theme', 'drop-down-theme', 'grid-toolbar-theme',
+    'grid-theme', 'icon-button-theme', 'input-group-theme', 'navbar-theme', 'navdrawer-theme',
+    'query-builder-theme', 'snackbar-theme', 'splitter-theme', 'time-picker-theme'
+];
+const testFilePath = '/testSrc/appPrefix/component/${theme}.component.scss';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-42';
+
+    themes.forEach(theme => {
+        it('should remove the $elevations property from all component themes', async () => {
+            appTree.create(
+                testFilePath,
+                `$custom-${theme}: ${theme}($elevations: $my-elevations);`
+            );
+
+            const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+            expect(tree.readContent(testFilePath)).toEqual(
+                `$custom-${theme}: ${theme}();`
+            );
+        });
+    });
+});

projects/igniteui-angular/migrations/update-19_1_0/index.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '19.1.0';
+
+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.applyChanges();
+};

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -13,7 +13,6 @@
 /// will be assigned automatically to a contrasting color.
 ///
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {Color} $icon-color [null] - The icon color used.
 /// @param {Color} $text-color [null] - The text color used.
 /// @param {Color} $border-color [null] - The border color used.
@@ -29,7 +28,6 @@
 ///   @include css-vars($my-badge-theme);
 @function badge-theme(
     $schema: $light-material-schema,
-    $elevations: null,
 
     $icon-color: null,
     $text-color: null,

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -14,7 +14,6 @@
 /// If only background color is specified,
 /// the label and icon colors will be assigned automatically to a contrasting color.
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {Color} $background [null] - The background color used for the toast.
 /// @param {Color} $label-color [null] - The label color used in idle state.
 /// @param {Color} $icon-color [null] - The icon color used in idle state.
@@ -31,7 +30,6 @@
 ///   @include css-vars($my-bottom-nav-theme);
 @function bottom-nav-theme(
     $schema: $light-material-schema,
-    $elevations: null,
     $background: null,
     $icon-color: null,
     $icon-selected-color: null,

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -14,7 +14,6 @@
 /// will be assigned automatically to a contrasting color.
 /// Does ___not___ apply for disabled state colors.
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 ///
 /// @param {box-shadow} $shadow [null] - The shadow to be applied for the button group.
 /// @param {Color} $item-text-color [null]- The text color for button group items.
@@ -69,7 +68,6 @@
 ///   @include css-vars($my-button-group-theme);
 @function button-group-theme(
     $schema: $light-material-schema,
-    $elevations: null,
     $shadow: null,
 
     $item-text-color: null,

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -15,7 +15,6 @@
 /// will be assigned automatically to a contrasting color.
 /// Does ___not___ apply for disabled state colors.
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
 /// @param {Color} $background [null] - The background color of the button.
 /// @param {Color} $foreground [null] - The text color of the button.
 /// @param {Color} $icon-color [null] - The icon color in the button.
@@ -57,7 +56,6 @@
 ///   @include css-vars($my-button-theme);
 @function button-theme(
     $schema: $light-material-schema,
-    $elevations: null,
 
     $background: null,
     $foreground: null,

projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

@@ -12,7 +12,6 @@
 
 ///
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
 /// @param {Color} $background [null] - The card background color.
 /// @param {Color} $outline-color [null] - The color of the outline for outlined type cards.
 /// @param {Color} $header-text-color [null] - The text color of the card title.
@@ -32,7 +31,6 @@
 ///   @include css-vars($my-card-theme);
 @function card-theme(
     $schema: $light-material-schema,
-    $elevations: null,
 
     $border-radius: null,
     $background: null,

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -12,7 +12,6 @@
 ////
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {Color} $slide-background [null] - The slide background color.
 /// @param {Color} $button-background [null] - The previous/next buttons idle background color.
 /// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color.
@@ -44,7 +43,6 @@
 ///   @include css-vars($my-carousel-theme);
 @function carousel-theme(
     $schema: $light-material-schema,
-    $elevations: null,
 
     $border-radius: null,
     $button-shadow: null,

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -13,7 +13,6 @@
 
 /// Chip Theme
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {List} $border-radius [null] - The chip border-radius.
 ///
 /// @param {Color} $text-color [null] - The chip text color.
@@ -58,7 +57,6 @@
 ///   @include css-vars($my-chip-theme);
 @function chip-theme(
     $schema: $light-material-schema,
-    $elevations: null,
     $border-radius: null,
 
     $text-color: null,

projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss

@@ -11,7 +11,6 @@
 
 /// Column actions Theme
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {Color} $title-color [null]- The text color used for the title of the list.
 /// @param {Color} $background-color [null] - The background color of the panel.
 ///
@@ -24,7 +23,6 @@
 ////
 @function column-actions-theme(
     $schema: $light-material-schema,
-    $elevations: null,
 
     $title-color: null,
     $background-color: null
@@ -47,7 +45,6 @@
 
     @return extend($theme, (
         name: $name,
-        elevations: $elevations,
         title-color: $title-color,
         background-color: $background-color,
         theme: map.get($schema, '_meta', 'theme'),

projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss

@@ -12,7 +12,6 @@
 
 /// Dialog Theme
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {Color} $background [null] - The dialog background color.
 /// @param {Color} $title-color [null] - The dialog title text color.
 /// @param {Color} $message-color [null] - The dialog message text color.
@@ -26,7 +25,6 @@
 ///   @include css-vars($my-dialog-theme);
 @function dialog-theme(
     $schema: $light-material-schema,
-    $elevations: null,
 
     $border-radius: null,
     $border-color: null,

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -12,7 +12,6 @@
 
 /// Generates a drop-down theme.
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {Color} $background-color [null] - The drop-down background color.
 /// @param {Color} $header-text-color [null] - The drop-down header text color.
 /// @param {Color} $item-text-color [null] - The drop-down item text color.
@@ -45,7 +44,6 @@
 ///   @include css-vars($my-dropdown-theme);
 @function drop-down-theme(
     $schema: $light-material-schema,
-    $elevations: null,
 
     $border-radius: null,
     $item-border-radius: null,

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

@@ -10,7 +10,6 @@
 ////
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {Color} $background-color [null] - The toolbar background color.
 /// @param {Color} $title-text-color [null] - The toolbar title text color.
 /// @param {Color} $dropdown-background [null] - The toolbar drop-down background color.
@@ -29,7 +28,6 @@
 ///   @include css-vars($my-toolbar-theme);
 @function grid-toolbar-theme(
     $schema: $light-material-schema,
-    $elevations: null,
 
     $background-color: null,
     $title-text-color: null,
@@ -83,7 +81,6 @@
     @return extend($theme, (
         name: $name,
         selector: $selector,
-        elevations: $elevations,
         background-color: $background-color,
         title-text-color: $title-text-color,
         item-text-color: $item-text-color,

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

@@ -15,7 +15,6 @@
 ////
 
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Map} $elevations [null] - The elevations (shadows) map to be used.
 /// @param {Color} $header-background [null] - The table header background color.
 /// @param {Color} $header-text-color [null] - The table header text color.
 /// @param {String} $header-border-width [null] - The border width used for header borders.
@@ -110,7 +109,6 @@
 ///   @include css-vars($my-grid-theme);
 @function grid-theme(
     $schema: $light-material-schema,
-    $elevations: null,
 
     $header-background: null,
     $header-text-color: null,