Merge master into ddavidkov/treegrid

Author: DDavidkov

.stylelintrc.json

@@ -1,6 +1,6 @@
 {
     "plugins": ["stylelint-scss"],
-    "ignoreFiles": ["projects/igniteui-angular/src/lib/core/styles/*.md"],
+    "ignoreFiles": ["projects/igniteui-angular/src/lib/core/styles/**/*.md"],
     "rules": {
         "at-rule-blacklist": ["debug", {
             "severity": "warning"

CHANGELOG.md

@@ -3,11 +3,16 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 6.2.0
+- `igx-datePicker` selector is deprecated. Use `igx-date-picker` selector instead.
 - `igxOverlay`: `OverlaySettings` now also accepts an optional `outlet` to specify the container where the overlay should be attached.
 - `igxToggleAction` new `outlet` input controls the target overlay element should be attached. Provides a shortcut for `overlaySettings.outlet`.
 - `IgxOverlayOutlet` directive introducedto mark an element as an `igxOverlay` outlet container. [ReadMe](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/toggle/README.md)
 - `igxButtonGroup`
     - Added the ability to define buttons directly in the template
+- `igx-time-picker`:
+    - `igxTimePickerTemplate` - new directive which should be applied on the child `<ng-template>` element when `IgxTimePickerComponent`'s input group is retemplated. 
+- `igx-datePicker`:
+    - `igxDatePickerTemplate` - new directive which should be applied on the child `<ng-template>` element when `IgxDatePickerComponent`'s input group is retemplated. 
 - `IgxTextHighlightDirective`: The `highlight` method now has a new optional parameter called `exactMatch` (defaults to false).
     - If its value is false, all occurrences of the search text will be highlighted in the group's value.
     - If its value is true, the entire group's value should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

ROADMAP.md

@@ -53,16 +53,16 @@
 
 ## Milestone 3 (by July 6th, 2018)
 
-1. **[DONE]**Grouping
-2. **[DONE]**Grid Multi-column Headers [issue](https://github.com/IgniteUI/igniteui-angular/issues/488)
-3. **[DONE]**Combo
-4. **[DONE]**Column Hiding UI
-5. **[DONE]**Operations UI - column chooser
-6. **[DONE]**Advanced Filtering
-7. **[DONE]**Column Moving
+1. **[DONE]** Grouping
+2. **[DONE]** Grid Multi-column Headers [issue](https://github.com/IgniteUI/igniteui-angular/issues/488)
+3. **[DONE]** Combo
+4. **[DONE]** Column Hiding UI
+5. **[DONE]** Operations UI - column chooser
+6. **[DONE]** Advanced Filtering
+7. **[DONE]** Column Moving
 8. **[DONE]** Update to Angular 6
 9. **[DONE]** Design: Release Updated Design System (Sketch UI kits, UI patterns, screens, documentation)
-10.**[DONE]**Design: Data dense theme for data grid 
+10.**[DONE]** Design: Data dense theme for data grid 
 
 
 # Postponed

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

@@ -20,6 +20,11 @@
             "version": "6.1.0",
             "description": "Updates Ignite UI for Angular from v6.0.x to v6.1.0",
             "factory": "./update-6_1"
+        },
+        "migration-05": {
+            "version": "6.2.0",
+            "description": "Updates Ignite UI for Angular from v6.1.x to v6.2.0",
+            "factory": "./update-6_2"
         }
     }
 }

projects/igniteui-angular/migrations/update-6_2/changes/selectors.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../common/schema/selector.schema.json",
+    "changes": [
+        {
+            "type": "component",
+            "selector": "igx-datePicker",
+            "replaceWith": "igx-date-picker"
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-6_2/index.spec.ts

@@ -0,0 +1,41 @@
+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 6.2.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 igxDatePicker selector', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.html',
+            `<igx-datePicker></igx-datePicker>`
+        );
+        const tree = schematicRunner.runSchematic('migration-05', {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`<igx-date-picker></igx-date-picker>`);
+        done();
+    });
+});

projects/igniteui-angular/migrations/update-6_2/index.ts

@@ -0,0 +1,25 @@
+import * as path from 'path';
+
+// tslint:disable:no-implicit-dependencies
+import { normalize } from '@angular-devkit/core';
+import {
+    chain,
+    Rule,
+    SchematicContext,
+    SchematicsException,
+    Tree
+} from '@angular-devkit/schematics';
+import { filterSourceDirs } from '../common/filterSourceDirs';
+import { getImportModulePositions } from '../common/tsUtils';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '6.2.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/combo/combo.component.spec.ts

@@ -1628,37 +1628,37 @@ describe('igxCombo', () => {
             tick();
             fix.detectChanges();
             expect(combo.collapsed).toBeFalsy();
-            // NOTE: Minimum itemHeight is 2 rem, per Material Design Guidelines
+            // NOTE: Minimum itemHeight is 2 rem, per Material Design Guidelines (for mobile only)
             expect(combo.itemHeight).toEqual(32); // Default value for itemHeight
             expect(combo.itemsMaxHeight).toEqual(320); // Default value for itemsMaxHeight
             const dropdownItems = fix.debugElement.queryAll(By.css('.' + CSS_CLASS_DROPDOWNLISTITEM));
             const dropdownList = fix.debugElement.query(By.css('.' + CSS_CLASS_CONTENT));
             expect(dropdownList.nativeElement.clientHeight).toEqual(320);
-            expect(dropdownItems[0].nativeElement.clientHeight).toEqual(32);
+            expect(dropdownItems[0].nativeElement.clientHeight).toEqual(48);
 
-            combo.itemHeight = 47;
+            combo.itemHeight = 48;
             tick();
             fix.detectChanges();
-            expect(combo.itemHeight).toEqual(47);
+            expect(combo.itemHeight).toEqual(48);
             expect(combo.itemsMaxHeight).toEqual(320);
             expect(dropdownList.nativeElement.clientHeight).toEqual(320);
-            expect(dropdownItems[0].nativeElement.clientHeight).toEqual(47);
+            expect(dropdownItems[0].nativeElement.clientHeight).toEqual(48);
 
             combo.itemsMaxHeight = 438;
             tick();
             fix.detectChanges();
-            expect(combo.itemHeight).toEqual(47);
+            expect(combo.itemHeight).toEqual(48);
             expect(combo.itemsMaxHeight).toEqual(438);
             expect(dropdownList.nativeElement.clientHeight).toEqual(438);
-            expect(dropdownItems[0].nativeElement.clientHeight).toEqual(47);
+            expect(dropdownItems[0].nativeElement.clientHeight).toEqual(48);
 
             combo.itemsMaxHeight = 1171;
             tick();
             fix.detectChanges();
-            expect(combo.itemHeight).toEqual(47);
+            expect(combo.itemHeight).toEqual(48);
             expect(combo.itemsMaxHeight).toEqual(1171);
             expect(dropdownList.nativeElement.clientHeight).toEqual(1171);
-            expect(dropdownItems[0].nativeElement.clientHeight).toEqual(47);
+            expect(dropdownItems[0].nativeElement.clientHeight).toEqual(48);
 
             combo.itemHeight = 83;
             tick();

projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

@@ -245,3 +245,40 @@
 @mixin igx-css-vars($theme) {
     @include css-vars-from-theme($theme);
 }
+
+/// Scopes CSS rules to a predefined top-level parent selector.
+/// Respects specificity and selector scopes.
+/// @access private
+/// @param {String} $parent - The selector to be used as top level scope.
+/// @example scss Apply mixin style rules only when '.igx-typography' selector is present.
+///    @mixin igx-card-typography {
+///       @include igx-scope('.igx-typography') {
+///         // style rules...
+///       }
+///    }
+///
+///    // Later
+///    .my-selector {
+///      @include igx-card-typography();
+///    }
+///
+///    // Generated CSS
+///    // .igx-typography .my-selector {
+///    //    ...styles rules as output by igx-card-typography mixin
+///    // }
+@mixin igx-scope($parent) {
+    @each $selector in & {
+        $len: length($selector);
+        @if $len == null {
+            $parent: $parent;
+        } @else {
+            @for $i from 1 through $len {
+                $parent: append($parent, nth($selector, $i));
+            }
+        }
+
+        @at-root #{$parent} {
+            @content;
+        }
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -74,10 +74,6 @@
     $item-max-width: 168px;
     $item-padding: 0 rem(12px, 16px);
 
-    $label-font-size: rem(12px, 16px);
-    $label-line-height: rem(12px, 16px);
-
-
     %igx-tab-panel {
         display: none;
     }
@@ -142,8 +138,6 @@
     %igx-tab-label {
         @include ellipsis();
         padding-top: 4px;
-        font-size: $label-font-size;
-        line-height: $label-line-height;
         max-width: 100%;
         text-align: center;
         transform: translateZ(0);
@@ -179,3 +173,20 @@
         transform: translateY(-2px) scale(1.166667);
     }
 }
+
+/// Adds typography styles for the igx-bottom-nav component.
+/// Uses the 'caption'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
+/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
+/// @requires {mixin} igx-type-style
+@mixin igx-bottom-nav-typography($type-scale, $categories: (label: 'caption')) {
+    $label: map-get($categories, 'label');
+
+    @include igx-scope('.igx-typography') {
+        %igx-tab-label {
+            @include igx-type-style($type-scale, $label);
+        }
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -2,6 +2,7 @@
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
 /// If only background color is specified, text/icon color
@@ -221,9 +222,6 @@
     @include igx-root-css-vars($theme);
 
     $button-border: none;
-    $button-font-size: rem(14px, 16px);
-    $button-line-height: 1;
-    $button-font-weight: 600;
     $button-width: rem(88px);
     $button-height: rem(36px);
     $button-padding: 0 rem(16px, 16px);
@@ -247,20 +245,15 @@
     $button-icon-padding: 0;
 
     %igx-button-display {
+        position: relative;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        position: relative;
         min-width: $button-width;
         height: $button-height;
         padding: $button-padding;
-        font-size: $button-font-size;
-        font-weight: $button-font-weight;
-        line-height: $button-line-height;
-        text-align: center;
         border: $button-border;
         border-radius: --var($theme, 'button-roundness');
-        text-transform: uppercase;
         cursor: pointer;
         user-select: none;
         outline: none;
@@ -375,3 +368,20 @@
     }
 }
 
+/// Adds typography styles for the igx-button component.
+/// Uses the 'button' category from the typographic scale.
+/// @group typography
+/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
+/// @param {String} $categories [(text: 'button')] - The category from the typographic scale used for type styles.
+/// @requires {mixin} igx-type-style
+@mixin igx-button-typography($type-scale, $categories: (text: 'button')) {
+    $text: map-get($categories, 'text');
+
+    @include igx-scope('.igx-typography') {
+        %igx-button-display {
+            @include igx-type-style($type-scale, $text) {
+                text-align: center
+            }
+        }
+    }
+}