Merge branch '20.0.x' into rivanova/fix-15848-master

Author: RivaIvanova

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.0.2
+
+### New Features
+- **Separating Button and Icon Button Themes** - The `button-theme` and `icon-button-theme` functions are still available, but for more targeted customization, you can now use the specific theme function for each button type.
+- **Component Themes Enchancements** - Component themes have been improved to automatically calculate all necessary states (e.g., hover, focus, active) based on just a few key values. For example, customizing a contained button requires only a background color:
+```scss
+    $custom-contained-button: contained-button-theme(
+        $background: #09f;
+    );
+```
+
 ## 20.0.0
 
 ### General

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts

@@ -16,7 +16,6 @@ export class TemplateWrapperComponent {
 
     public templateFunctions: TemplateFunction[] = [];
     public templateRendered = new Subject<HTMLElement>();
-
     private childParts: WeakMap<HTMLElement, RootPart> = new WeakMap();
 
     /**
@@ -28,7 +27,7 @@ export class TemplateWrapperComponent {
     public templateRefs: QueryList<TemplateRef<any>>;
 
     constructor(private cdr: ChangeDetectorRef) { }
-
+  
     protected litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
         const part = render(templateFunc(arg), container);
 

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

@@ -231,6 +231,11 @@
             "version": "20.0.0",
             "description": "Updates Ignite UI for Angular from v19.2.0 to v20.0.0",
             "factory": "./update-20_0_0"
+        },
+        "migration-47": {
+            "version": "20.0.2",
+            "description": "Updates Ignite UI for Angular from v20.0.0 to v20.0.2",
+            "factory": "./update-20_0_2"
         }
     }
 }

projects/igniteui-angular/migrations/update-20_0_2/changes/theme-changes.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$interim-bottom-line-color",
+      "remove": true,
+      "owner": "input-group-theme",
+      "type": "property"
+    }
+  ]
+}

projects/igniteui-angular/migrations/update-20_0_2/index.spec.ts

@@ -0,0 +1,37 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '20.0.2';
+
+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-47';
+
+    it('should remove the $interim-bottom-line-color property from the input-group theme', async () => {
+        const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
+
+        appTree.create(
+            testFilePath,
+            `$my-input-group-theme: input-group-theme(
+                $box-background: #ccc,
+                $interim-bottom-line-color: orange,
+            );`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent(testFilePath)).toEqual(
+            `$my-input-group-theme: input-group-theme(
+                $box-background: #ccc,
+            );`
+        );
+    });
+});

projects/igniteui-angular/migrations/update-20_0_2/index.ts

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

@@ -3,7 +3,7 @@
         <ng-content select="[igxLabel]"></ng-content>
     </ng-container>
     <ng-container ngProjectAs="igx-prefix">
-        <ng-content select="igx-prefix"></ng-content>
+        <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
     </ng-container>
     <ng-container ngProjectAs="igx-hint, [igxHint]">
         <ng-content select="igx-hint, [igxHint]"></ng-content>
@@ -15,7 +15,7 @@
         [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
         (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
-        <ng-content select="igx-suffix"></ng-content>
+        <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
     </ng-container>
     @if (displayValue) {
         <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -12,6 +12,7 @@
     position: absolute;
     top: 0;
     inset-inline-end: 0;
+    width: var(--vhelper-scrollbar-size);
 }
 
 %vhelper--horizontal {

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -41,10 +41,9 @@
     }
 
     $theme: digest-schema($action-strip-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($icon-color) and $actions-background {
-        $icon-color: text-contrast($actions-background);
+        $icon-color: adaptive-contrast(var(--actions-background));
     }
 
     @if not($actions-border-radius) {
@@ -58,10 +57,6 @@
         icon-color: $icon-color,
         delete-action: $delete-action,
         actions-border-radius: $actions-border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -71,7 +66,7 @@
 @mixin action-strip($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $icon-button-size: map.get((
         'material': rem(36px),
         'fluent': rem(32px),

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

@@ -41,10 +41,13 @@
     }
 
     $theme: digest-schema($avatar-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($color) and $background {
-        $color: text-contrast($background);
+        $color: adaptive-contrast(var(--background));
+    }
+
+    @if not($icon-color) and $background {
+        $icon-color: adaptive-contrast(var(--background));
     }
 
     @return extend($theme, (
@@ -54,10 +57,6 @@
         icon-color: $icon-color,
         border-radius: $border-radius,
         size: $size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -67,8 +66,8 @@
 @mixin avatar($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
- 
+    $variant: map.get($theme, '_meta', 'theme');
+
     %igx-avatar-display {
         @include sizable();