Merge branch 'master' into pbozhinov/fix-9073

Author: ChronosSF

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

@@ -95,6 +95,11 @@
             "version": "11.1.0",
             "description": "Updates Ignite UI for Angular from v11.0.x to v11.1.0",
             "factory": "./update-11_1_0"
+        },
+        "migration-20": {
+            "version": "12.0.0",
+            "description": "Updates Ignite UI for Angular from v11.1.x to v12.0.0",
+            "factory": "./update-12_0_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-12_0_0/changes/theme-props.json

@@ -1,6 +1,41 @@
 {
     "$schema": "../../common/schema/theme-props.schema.json",
     "changes": [
+        {
+            "name": "$border-radius-round",
+            "replaceWith": "$border-radius",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$border-radius-square",
+            "replaceWith": "$border-radius",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$initials-background",
+            "replaceWith": "$background",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$initials-color",
+            "replaceWith": "$color",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$icon-background",
+            "replaceWith": "$background",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$icon-color",
+            "replaceWith": "$color",
+            "owner": "igx-avatar-theme"
+        },
+        {
+            "name": "$image-background",
+            "replaceWith": "$background",
+            "owner": "igx-avatar-theme"
+        },
         {
             "name": "$flat-border-radius",
             "replaceWith": "$border-radius",

projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts

@@ -0,0 +1,62 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update to 12.0.0', () => {
+    let appTree: UnitTestTree;
+    const runner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    const migrationName = 'migration-20';
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should update avatar theme args', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+`
+$theme: igx-avatar-theme(
+    $initials-background: white,
+    $icon-background: green,
+    $image-background: red,
+    $initials-color: black,
+    $icon-color: gold,
+    $border-radius-round: 14px,
+    $border-radius-square: 12px
+);
+`
+        );
+
+        const tree = await runner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.scss')
+        ).toEqual(
+`
+$theme: igx-avatar-theme(
+    $background: white,
+    $color: black,
+    $border-radius: 14px
+);
+`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-12_0_0/index.ts

@@ -0,0 +1,11 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '12.0.0';
+
+export default (): Rule => (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/base/utilities/_functions.scss

@@ -401,16 +401,17 @@
 @function --var($map, $key, $fallback: null) {
     $igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, false);
     $css-var: str-slice(#{map-get($map, $key)}, 1, 3) == 'var';
+    $name: map-get($map, 'name');
 
     @if map-has-key($map, $key) {
         @if $igx-legacy-support == false {
             @if $css-var {
                 @return map-get($map, $key);
             }
             @if not($fallback) {
-                @return var(--#{map-get($map, 'name')}-#{$key})
+                @return if($name, var(--#{map-get($map, 'name')}-#{$key}), var(--#{$key}));
             }
-            @return var(--#{map-get($map, 'name')}-#{$key}, #{$fallback})
+            @return if($name, var(--#{map-get($map, 'name')}-#{$key}, #{$fallback}), var(--#{$key}, #{$fallback}));
         } @else {
             @return map-get($map, $key);
         }

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-component.scss

@@ -13,12 +13,10 @@
     @extend %igx-avatar-display !optional;
 
     @include e(image) {
-        @extend %igx-avatar-inner !optional;
         @extend %igx-avatar-image !optional;
     }
 
     @include m(rounded) {
-        @extend %igx-avatar-display !optional;
         @extend %igx-avatar--rounded !optional;
     }
 
@@ -34,16 +32,7 @@
         @extend %igx-avatar--large !optional;
     }
 
-    @include m(image) {
-        @extend %igx-avatar--image !optional;
-    }
-
-    @include m(icon) {
-        @extend %igx-avatar--icon !optional;
-    }
-
     @include m(initials) {
-        @extend %igx-avatar--initials !optional;
         @extend %igx-avatar-initials--small !optional;
     }