Merge branch 'master' into ibarakov/fix-6619-9.1.x

Author: DiyanDimitrov

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/grid/_grid-component.scss

@@ -358,6 +358,10 @@
         @extend %igx-grid__td--editing !optional;
     }
 
+    @include e(tr, $m: disabled) {
+        @extend %igx-grid__tr--disabled !optional;
+    }
+
     @include e(td, $m: number) {
         @extend %grid-cell-number !optional;
     }
@@ -392,6 +396,10 @@
         @extend %grid-cell--pinned--column-selected !optional;
     }
 
+    @include e(td, $m: pinned-chip) {
+        @extend %grid-cell--pinned-chip !optional;
+    }
+
     @include e(td-text) {
         @extend %grid-cell-text !optional;
     }
@@ -558,6 +566,11 @@
         @extend %igx-grid__hierarchical-expander !optional;
     }
 
+    @include e(hierarchical-expander, $m: empty) {
+        @extend %igx-grid__hierarchical-expander !optional;
+        @extend %igx-grid__hierarchical-expander--empty !optional;
+    }
+
     @include e(hierarchical-expander, $m: header) {
         @extend %igx-grid__hierarchical-expander--header !optional;
     }
@@ -673,6 +686,11 @@
             @extend %igx-grid__hierarchical-expander--cosy !optional;
         }
 
+        @include e(hierarchical-expander, $m: empty) {
+            @extend %igx-grid__hierarchical-expander--cosy !optional;
+            @extend %igx-grid__hierarchical-expander--empty !optional;
+        }
+
         @include e(hierarchical-expander, $m: push) {
             @extend %igx-grid__hierarchical-expander--push--cosy !optional;
         }
@@ -688,6 +706,10 @@
                 @extend %igx-grid__tree-cell-cosy--padding-level-#{$i} !optional;
             }
         }
+
+        @include e(td, $m: pinned-chip) {
+            @extend %grid-cell--pinned-chip--cosy !optional;
+        }
     }
 
     @include m(compact) {
@@ -772,6 +794,11 @@
         @include e(hierarchical-expander) {
             @extend %igx-grid__hierarchical-expander--compact !optional;
         }
+        
+        @include e(hierarchical-expander, $m: empty) {
+            @extend %igx-grid__hierarchical-expander--compact !optional;
+            @extend %igx-grid__hierarchical-expander--empty !optional;
+        }
 
         @include e(hierarchical-expander, $m: push) {
             @extend %igx-grid__hierarchical-expander--push--compact !optional;
@@ -788,6 +815,10 @@
                 @extend %igx-grid__tree-cell-compact--padding-level-#{$i} !optional;
             }
         }
+
+        @include e(td, $m: pinned-chip) {
+            @extend %grid-cell--pinned-chip--compact !optional;
+        }
     }
 
     @include _excel-filtering-partial();

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

@@ -49,7 +49,8 @@
 /// @param {Color} $cell-selected-background [null] - The selected cell background color.
 /// @param {Color} $cell-selected-text-color [null] - The selected cell text color.
 /// @param {Color} $cell-editing-background [null] - The background color of the cell being edited.
-/// @param {Color} $cell-edited-value-color [null] - The text color of a sell that has been edited.
+/// @param {Color} $cell-edited-value-color [null] - The text color of a cell that has been edited.
+/// @param {Color} $cell-disabled-color [null] - The text color of a disabled cell.
 ///
 /// @param {Color} $edit-mode-color [null] - The color applied around the row when in editing mode.
 /// @param {Color} $edited-row-indicator [null] - The color applied to the edited row indicator line.
@@ -160,6 +161,7 @@
     $cell-selected-text-color: null,
     $cell-editing-background: null,
     $cell-edited-value-color: null,
+    $cell-disabled-color: null,
 
     $edit-mode-color: null,
     $edited-row-indicator: null,
@@ -505,6 +507,8 @@
         edited-row-indicator: $edited-row-indicator,
         cell-edited-value-color: $cell-edited-value-color,
 
+        cell-disabled-color: $cell-disabled-color,
+
         resize-line-color: $resize-line-color,
 
         drop-indicator-color: $drop-indicator-color,
@@ -1352,6 +1356,12 @@
         }
     }
 
+    %igx-grid__tr--disabled {
+        %grid-cell-text {
+            color: --var($theme, 'cell-disabled-color');
+        }
+    }
+
     %igx-grid__td--editing {
         background: --var($theme, 'cell-editing-background') !important;
         box-shadow: inset 0 0 0 rem(2px) --var($theme, 'edit-mode-color');
@@ -1407,6 +1417,17 @@
         }
     }
 
+    %grid-cell--pinned-chip {
+        margin-#{$right}: rem(12px);
+    }
+
+    %grid-cell--pinned-chip--cosy {
+        margin-#{$right}: rem(8px);
+    }
+
+    %grid-cell--pinned-chip--compact {
+        margin-#{$right}: rem(4px);
+    }
 
     %grid-cell-header {
         flex-flow: row nowrap;
@@ -2495,6 +2516,11 @@
         @include if-rtl() {
             transform: scaleX(-1);
         }
+
+        &--empty {
+            cursor: default;
+            pointer-events: none;
+        }
     }
 
     %igx-grid__hierarchical-expander--cosy {

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/_grid.scss

@@ -47,6 +47,7 @@
 /// @prop {Map} edit-mode-color [igx-color: ('secondary', 500)] - The text color in edit mode.
 /// @prop {Map} edited-row-indicator [igx-color: ('grays', 400)] - The indicator's color of edited row.
 /// @prop {Map} cell-edited-value-color [igx-color: ('grays', 600)] - The color of cell edited value.
+/// @prop {Map} cell-disabled-color [igx-color: ('grays', 500)] - The text color of a disabled cell.
 /// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color.
 /// @prop {Map} drop-indicator-color [igx-color: ('secondary', 500)] - The color of the drop indicator.
 /// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group area background color.
@@ -233,6 +234,10 @@ $_light-grid: extend(
             igx-color: ('grays', 600)
         ),
 
+        cell-disabled-color: (
+            igx-color: ('grays', 500)
+        ),
+
         resize-line-color: (
             igx-color: ('secondary', 500)
         ),