refactor(input): use the same design as web components. (#12453)

* refactor(input): use the same design as web components
---------

Co-authored-by: Simeon Simeonoff <[email protected]>
Co-authored-by: Silvia Ivanova <[email protected]>
Co-authored-by: Boris Penkov <[email protected]>
Co-authored-by: Nikolay Alipiev <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>

Author: 6 people

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 15.1.1
+- **Breaking Changes** - ` $label-floated-background` and `$label-floated-disabled-background` properties of `IgxInputGroupComponent` theme has been removed.
+- `IgxInputGroupComponent` The input group has been refactored so that the floating label for the input of `type="border"` does not require a background to match the surface background under the input field. Also, suffixes and prefixes are refactored to take the full height of the input which makes it easy to add background to them.
+- 
+- **Breaking Changes** - `$size` property of `scrollbar-theme` theme has been renamed to `$scrollbar-size`.
+
 ## 15.1.0
 
 ### New Features

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

@@ -0,0 +1,23 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$size",
+      "replaceWith": "$scrollbar-size",
+      "owner": "scrollbar-theme",
+      "type":"property"
+    },
+    {
+      "name": "$label-floated-background",
+      "remove": true,
+      "owner": "input-group-theme",
+      "type":"property"
+    },
+    {
+      "name": "$label-floated-disabled-background",
+      "remove": true,
+      "owner": "input-group-theme",
+      "type":"property"
+    }
+  ]
+}

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

@@ -138,4 +138,34 @@ describe(`Update to ${version}`, () => {
         `
         );
     });
+
+    it('should rename the $size property to the $scrollbar-size', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-scrollbar: scrollbar-theme($size: 10px);`
+        );
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-scrollbar: scrollbar-theme($scrollbar-size: 10px);`
+        );
+    });
+
+    it('should remove the $label-floated-background amd $label-floated-disabled-background properties from the input-group-theme', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.scss`,
+            `$custom-input: input-group-theme($label-floated-background: transparent, $label-floated-disabled-background: transparent);`
+        );
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(
+            `$custom-input: input-group-theme();`
+        );
+    });
 });

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -1,7 +1,10 @@
 import {
+    AfterContentChecked,
+    AfterViewChecked,
     AfterViewInit,
     ChangeDetectorRef,
     ContentChild,
+    ContentChildren,
     Directive,
     DoCheck,
     ElementRef,
@@ -16,6 +19,7 @@ import {
     OnInit,
     Optional,
     Output,
+    QueryList,
     TemplateRef,
     ViewChild
 } from '@angular/core';
@@ -30,7 +34,7 @@ import { SortingDirection } from '../data-operations/sorting-strategy';
 import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxIconService } from '../icon/public_api';
 import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/inputGroupType';
-import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective } from '../input-group/public_api';
+import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api';
 import { AbsoluteScrollStrategy, AutoPositionStrategy, OverlaySettings } from '../services/public_api';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
 import { IgxComboAPIService } from './combo.api';
@@ -124,8 +128,8 @@ export interface IComboFilteringOptions {
 }
 
 @Directive()
-export abstract class IgxComboBaseDirective extends DisplayDensityBase implements IgxComboBase, OnInit, DoCheck,
-    AfterViewInit, OnDestroy, ControlValueAccessor {
+export abstract class IgxComboBaseDirective extends DisplayDensityBase implements IgxComboBase, AfterViewChecked, OnInit, DoCheck,
+    AfterViewInit, AfterContentChecked, OnDestroy, ControlValueAccessor {
     /**
      * Defines whether the caseSensitive icon should be shown in the search input
      *
@@ -752,6 +756,12 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     @ViewChild('complex', { read: TemplateRef, static: true })
     protected complexTemplate: TemplateRef<any>;
 
+    @ContentChildren(IgxPrefixDirective, { descendants: true })
+    protected prefixes: QueryList<IgxPrefixDirective>;
+
+    @ContentChildren(IgxSuffixDirective, { descendants: true })
+    protected suffixes: QueryList<IgxSuffixDirective>;
+
     /** @hidden @internal */
     public get searchValue(): string {
         return this._searchValue;
@@ -950,24 +960,39 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         super(_displayDensityOptions);
     }
 
-    /** @hidden @internal */
-    public ngOnInit() {
-        this.ngControl = this._injector.get<NgControl>(NgControl, null);
-        const targetElement = this.elementRef.nativeElement;
+    public ngAfterViewChecked() {
+        const targetElement = this.inputGroup.element.nativeElement.querySelector('.igx-input-group__bundle') as HTMLElement;
+
         this._overlaySettings = {
             target: targetElement,
             scrollStrategy: new AbsoluteScrollStrategy(),
             positionStrategy: new AutoPositionStrategy(),
             modal: false,
             closeOnOutsideClick: true,
-            excludeFromOutsideClick: [targetElement as HTMLElement]
+            excludeFromOutsideClick: [targetElement]
         };
+    }
+
+    /** @hidden @internal */
+    public ngAfterContentChecked(): void {
+        if (this.inputGroup && this.prefixes?.length > 0) {
+            this.inputGroup.prefixes = this.prefixes;
+        }
+
+        if (this.inputGroup && this.suffixes?.length > 0) {
+            this.inputGroup.suffixes = this.suffixes;
+        }
+    }
+
+    /** @hidden @internal */
+    public ngOnInit() {
+        this.ngControl = this._injector.get<NgControl>(NgControl, null);
         this.selectionService.set(this.id, new Set());
         this._iconService.addSvgIconFromText(caseSensitive.name, caseSensitive.value, 'imx-icons');
     }
 
     /** @hidden @internal */
-    public ngAfterViewInit() {
+    public ngAfterViewInit(): void {
         this.filteredData = [...this.data];
 
         if (this.ngControl) {
@@ -982,14 +1007,14 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     }
 
     /** @hidden @internal */
-    public ngDoCheck() {
+    public ngDoCheck(): void {
         if (this.data?.length && this.selection.length && !this._value) {
             this._value = this.createDisplayText(this.selection, []);
         }
     }
 
     /** @hidden @internal */
-    public ngOnDestroy() {
+    public ngOnDestroy(): void {
         this.destroy$.next();
         this.destroy$.complete();
         this.comboAPI.clear();
@@ -1068,6 +1093,26 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         return this.selectionService.is_item_selected(this.id, item);
     }
 
+    /** @hidden @internal */
+    public get toggleIcon(): string {
+        if (this.inputGroup.theme === 'material') {
+            return this.dropdown.collapsed
+                ? 'expand_more'
+                : 'expand_less';
+        }
+
+        return this.dropdown.collapsed
+            ? 'arrow_drop_down'
+            : 'arrow_drop_up';
+    }
+
+    /** @hidden @internal */
+    public get clearIcon(): string {
+        return this.inputGroup.theme === 'material'
+            ? 'cancel'
+            : 'clear';
+    }
+
     /** @hidden @internal */
     public addItemToCollection() {
         if (!this.searchValue) {

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -23,33 +23,35 @@
             <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
         </ng-container>
         <igx-icon *ngIf="!clearIconTemplate">
-            clear
+            {{ clearIcon }}
         </igx-icon>
     </igx-suffix>
     <igx-suffix class="igx-combo__toggle-button">
         <ng-container *ngIf="toggleIconTemplate">
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: this.collapsed}"></ng-container>
         </ng-container>
         <igx-icon *ngIf="!toggleIconTemplate">
-            {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}
+            {{ toggleIcon }}
         </igx-icon>
     </igx-suffix>
 </igx-input-group>
 <igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
     [labelledBy]="this.ariaLabelledBy || this.label?.id || this.placeholder || ''"
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
-    <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" theme="material" class="igx-combo__search">
-        <input class="igx-combo-input" igxInput #searchInput name="searchInput" autocomplete="off" type="text"
-            [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
-            (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
-            aria-autocomplete="list" role="searchbox" aria-label="search"/>
-        <igx-suffix *ngIf="showSearchCaseIcon">
-            <igx-icon family="imx-icons" name="case-sensitive" [active]="filteringOptions.caseSensitive"
-                (click)="toggleCaseSensitive()">
-            </igx-icon>
-        </igx-suffix>
-    </igx-input-group>
+    <div class="igx-combo__search">
+        <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" theme="material" >
+            <input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
+                   [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
+                   (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
+                   aria-autocomplete="list" role="searchbox" aria-label="search"/>
+            <igx-suffix *ngIf="showSearchCaseIcon" (click)="toggleCaseSensitive()">
+                <span [ngClass]="filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'">
+                    <igx-icon family="imx-icons" name="case-sensitive" [active]="filteringOptions.caseSensitive"></igx-icon>
+                </span>
+            </igx-suffix>
+        </igx-input-group>
+    </div>
     <ng-container *ngTemplateOutlet="headerTemplate">
     </ng-container>
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"