Merge branch 'master' into SKrastev/fix-hgrid-test

Author: ChronosSF

CHANGELOG.md

@@ -8,6 +8,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
 
+- `IgxInputGroup`
+  - **Renamed** `supressInputAutofocus` input to `suppressInputAutofocus`
+
 ### Themes
 - **Breaking Change**  Change the default `$legacy-support` value to false in the `igx-theme` function.
 

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

@@ -70,6 +70,11 @@
             "version": "9.0.1",
             "description": "Updates Ignite UI for Angular from v9.0.0 to v9.0.1",
             "factory": "./update-9_0_1"
+        },
+        "migration-15": {
+            "version": "9.1.0",
+            "description": "Updates Ignite UI for Angular from v9.0.x to v9.1.0",
+            "factory": "./update-9_1_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-9_1_0/changes/inputs.json

@@ -0,0 +1,13 @@
+{
+    "@scheme": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "supressInputAutofocus",
+            "replaceWith": "suppressInputAutofocus",
+            "owner": {
+                "selector": "igx-input-group",
+                "type": "component"
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,44 @@
+import * as path from 'path';
+
+// tslint:disable:no-implicit-dependencies
+import { virtualFs } from '@angular-devkit/core';
+import { EmptyTree } from '@angular-devkit/schematics';
+// tslint:disable-next-line:no-submodule-imports
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update 9.1.0', () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+      };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should update igx-group supressInputAutofocus to suppressInputAutofocus', done => {
+        appTree.create(
+            `/testSrc/appPrefix/component/input.component.html`,
+            '<igx-input-group [supressInputAutofocus]="true"><input igxInput></igx-input-group>'
+        );
+
+        const tree = schematicRunner.runSchematic('migration-15', {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/input.component.html'))
+            .toEqual('<igx-input-group [suppressInputAutofocus]="true"><input igxInput></igx-input-group>');
+
+        done();
+    });
+});

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

@@ -0,0 +1,17 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '9.1.0';
+
+export default function(): Rule {
+    return (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/splitter/_splitter-component.scss

@@ -11,6 +11,12 @@
     $this: str-slice(bem--selector-to-string(&), 2, -1);
     @include register-component($this);
 
+    @include b(#{$this}-bar-host) {
+        &:focus {
+            @extend %igx-splitter-bar--focus !optional;
+        }
+    }
+
     @include b(#{$this}-bar) {
         @extend %igx-splitter-bar !optional;
 

projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss

@@ -1,5 +1,19 @@
 ////
 /// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+///
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
+///
+/// @param {color} $bar-color [null] - The background color of the bar.
+/// @param {color} $handle-color [null] - The color for the bar drag handle.
+/// @param {color} $expander-color [null] - The color for the arrow expander's.
+/// @param {number} $border-radius [null] - the border radios of the splitter bar drag handle
+/// @param {color} $focus-color [null] - The color used for focused splitter bar.
+/// @param {number} $size [null] - The size of the splitter, its width for vertical and height for horizontal splitter.
+///
 @function igx-splitter-theme(
     $palette: $default-palette,
     $schema: $light-schema,
@@ -9,6 +23,7 @@
     $handle-color: null,
     $expander-color: null,
     $border-radius: null,
+    $focus-color: null,
     $size: null
 ) {
     $name: 'igx-splitter';
@@ -41,6 +56,7 @@
         handle-color: $handle-color,
         expander-color: $expander-color,
         border-radius: $border-radius-handle,
+        focus-color: $focus-color,
         size: $size
     ));
 }
@@ -98,6 +114,12 @@
         }
     }
 
+    %igx-splitter-bar--focus {
+        // Remove the default browser outline styles
+        outline: transparent solid 1px;
+        box-shadow: inset 0 0 0 1px --var($theme, 'focus-color');
+    }
+
     %igx-splitter-bar--vertical {
         flex-direction: column;
         height: 100%;

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_splitter.scss

@@ -4,15 +4,18 @@
 /// @group schemas
 /// @access private
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
 /// Generates a light splitter schema.
 /// @type {Map}
 /// @property {Map} icon-background [igx-color: ('grays', 400)]- The background color used for splitters of type icon.
-/// @property {Map} icon-color [igx-color: ('grays', 800)] - The icon color used for splitters of type icon.
-/// @property {Map} initials-background [igx-color: ('grays', 400)] - The background color used for splitters of type initials.
-/// @property {Map} initials-color [igx-color: ('grays', 800)] - The text color used for splitters of type initials.
-/// @property {Color} image-background [transparent] - The background color used for splitters of type image.
+/// @property {Map} $bar-color [igx-color: 'surface', darken: 5%] - The background color of the bar.
+/// @property {Map} $handle-color [igx-color: 'surface', darken: 20%] - The color for the bar drag handle.
+/// @property {Map} $expander-color [igx-color: 'surface', darken: 20%] - The color for the arrow expander's.
+/// @property {Map} $border-radius [1] - The border radius fraction, between 0-1 to be used for the splitter component
+/// @property {Map} $focus-color [igx-color: ('secondary', 500)] - The color used for focused splitter bar.
+/// @property {Number} $size [4px] - The size of the splitter, it's width for vertical and height for horizontal splitter.
 /// @see $default-palette
 $_light-splitter: extend(
     $_default-shape-splitter,
@@ -22,6 +25,10 @@ $_light-splitter: extend(
             darken: 5%
         ),
 
+        focus-color: (
+            igx-color: ('secondary', 500)
+        ),
+
         handle-color: (
             igx-color: 'surface',
             darken: 20%

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -16,7 +16,7 @@
 </ng-template>
 
 <ng-template #editableDatePickerTemplate>
-    <igx-input-group #editableInputGroup [supressInputAutofocus]="true" (mousedown)="mouseDown($event)">
+    <igx-input-group #editableInputGroup [suppressInputAutofocus]="true" (mousedown)="mouseDown($event)">
         <igx-prefix (click)="openDialog(editableInputGroup.element.nativeElement)">
             <igx-icon>today</igx-icon>
         </igx-prefix>

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -184,7 +184,7 @@ <h6 class="igx-filter-empty__title">
                                  [locale]="grid.locale"
                                  [outlet]="grid.outletDirective">
                     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
-                        <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true">
+                        <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true">
                             <input #searchValueInput
                                     igxInput
                                     tabindex="0"