Merge master into SKrastev/fix-5940-8.2.x

Author: skrustev

CHANGELOG.md

@@ -1,10 +1,12 @@
-# Ignite UI for Angular Change Log
+# Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
 
 ## 8.2.3
+- `IgxTextHighlightDirective` - The default highlight directive styles have been moved to a Sass theme - `igx-highlight-theme`; You can modify the resting and active background and text color styles of the directive by passing the respective properties to the Sass theme. You can still pass your own CSS classes to the highlight directive via the cssClass and activeCssClass inputs.
+
 - `IgxChip`
-    - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provide the events passed from the `igxDrag` directive. The passed ones are the original events for the `igxChip` component events instead of the first events in the whole chain, which are usually PointerEvent, MouseEvent and etc.
+    - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provide the events passed from the `igxDrag` directive. The passed original events are in other words the previous events that triggered the `igxChip` ones. They also have original events until a browser event is reached..
 
 ## 8.2.0
 ### New theme

projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss

@@ -0,0 +1,20 @@
+////
+/// @group components
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(igx-highlight) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+
+    @extend %igx-highlight !optional;
+
+    @include m(active) {
+        @extend %igx-highlight !optional;
+        @extend %igx-highlight--active !optional;
+    }
+}
+

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

@@ -0,0 +1,70 @@
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// If only background color(s) specified, text color(s) will be assigned automatically to a contrasting color.
+/// @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 {Color} $resting-background [null]- The background color used for the highlight in its resting state.
+/// @param {Color} $resting-color [null] - The text color used for the highlight in its resting state.
+/// @param {Color} $active-background [null] - The background color used for the highlight in its active state.
+/// @param {Color} $active-color [null] - The text color used for the highlight in its active state.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires text-contrast
+/// @requires extend
+///
+/// @example scss Change the background and icon colors in icon highlight
+///   $my-avatar-theme: igx-avatar-theme($icon-background: black, $icon-color: white);
+///   // Pass the theme to the igx-avatar component mixin
+///   @include igx-avatar($my-avatar-theme);
+@function igx-highlight-theme(
+    $palette: $default-palette,
+    $schema: $light-schema,
+    $resting-background: null,
+    $resting-color: null,
+    $active-background: null,
+    $active-color: null,
+) {
+    $name: 'igx-highlight';
+    $theme: apply-palette(map-get($schema, $name), $palette);
+
+    @if not($resting-color) and $resting-background {
+        $resting-color: text-contrast($resting-background);
+    }
+
+    @if not($active-color) and $active-background {
+        $active-color: text-contrast($active-background);
+    }
+
+    @return extend($theme, (
+        name: $name,
+        palette: $palette,
+        resting-background: $resting-background,
+        resting-color: $resting-color,
+        active-background: $active-background,
+        active-color: $active-color,
+    ));
+}
+
+/// @param {Map} $theme - The theme used to style the component.
+/// @requires {mixin} igx-root-css-vars
+/// @requires rem
+/// @requires --var
+@mixin igx-highlight($theme) {
+    @include igx-root-css-vars($theme);
+
+    %igx-highlight {
+        color: --var($theme, 'resting-color');
+        background: --var($theme, 'resting-background');
+    }
+
+    %igx-highlight--active {
+        color: --var($theme, 'active-color');
+        background: --var($theme, 'active-background');
+    }
+}
+

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -42,6 +42,7 @@
 @import '../components/grid-summary/grid-summary-component';
 @import '../components/grid-paginator/grid-paginator-component';
 @import '../components/grid-toolbar/grid-toolbar-component';
+@import '../components/highlight/highlight-component';
 @import '../components/icon/icon-component';
 @import '../components/input/input-group-component';
 @import '../components/list/list-component';

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -29,6 +29,7 @@
 @import '../components/grid-summary/grid-summary-theme';
 @import '../components/grid-paginator/grid-paginator-theme';
 @import '../components/grid-toolbar/grid-toolbar-theme';
+@import '../components/highlight/highlight-theme';
 @import '../components/overlay/overlay-theme';
 @import '../components/toast/toast-theme';
 @import '../components/tooltip/tooltip-theme';
@@ -278,6 +279,10 @@
         @include igx-grid-toolbar(igx-grid-toolbar-theme($palette, $schema));
     }
 
+    @if not(index($exclude, 'igx-highlight')) {
+        @include igx-highlight(igx-highlight-theme($palette, $schema));
+    }
+
     @if not(index($exclude, 'igx-icon')) {
         @include igx-icon(igx-icon-theme($palette, $schema));
     }

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss

@@ -0,0 +1,20 @@
+@import '../light/highlight';
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a dark highlight schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-highlight
+/// @see $default-palette
+$_dark-highlight: extend($_light-highlight);
+
+/// Generates a dark fluent highlight schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-highlight
+$_dark-fluent-highlight: extend($_fluent-highlight);
+

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss

@@ -25,6 +25,7 @@
 @import './grid-pagination';
 @import './grid-summary';
 @import './grid-toolbar';
+@import './highlight';
 @import './icon';
 @import './input-group';
 @import './list';
@@ -66,6 +67,7 @@
 /// @property {Map} igx-grid-paginator [$_dark-grid-pagination]
 /// @property {Map} igx-grid-summary [$_dark-grid-summary]
 /// @property {Map} igx-grid-toolbar [$_dark-grid-toolbar]
+/// @property {Map} igx-highlight [$_dark-highlight]
 /// @property {Map} igx-icon [$_dark-icon]
 /// @property {Map} igx-input-group [$_dark-input-group]
 /// @property {Map} igx-list [$_dark-list]
@@ -106,6 +108,7 @@ $dark-schema: (
     igx-grid-paginator: $_dark-grid-pagination,
     igx-grid-summary: $_dark-grid-summary,
     igx-grid-toolbar: $_dark-grid-toolbar,
+    igx-highlight: $_dark-highlight,
     igx-icon: $_dark-icon,
     igx-input-group: $_dark-input-group,
     igx-list: $_dark-list,
@@ -149,6 +152,7 @@ $dark-schema: (
 /// @property {map} igx-grid-paginator: [$_dark-fluent-grid-pagination],
 /// @property {map} igx-grid-summary: [$_dark-fluent-grid-summary],
 /// @property {map} igx-grid-toolbar: [$_dark-fluent-grid-toolbar],
+/// @property {map} igx-highlight: [$_dark-fluent-highlight],
 /// @property {map} igx-icon: [$_dark-fluent-icon],
 /// @property {map} igx-input-group: [$_dark-fluent-input-group],
 /// @property {map} igx-list: [$_dark-fluent-list],
@@ -189,6 +193,7 @@ $dark-fluent-schema: (
     igx-grid-paginator: $_dark-fluent-grid-pagination,
     igx-grid-summary: $_dark-fluent-grid-summary,
     igx-grid-toolbar: $_dark-fluent-grid-toolbar,
+    igx-highlight: $_dark-fluent-highlight,
     igx-icon: $_dark-fluent-icon,
     igx-input-group: $_dark-fluent-input-group,
     igx-list: $_dark-fluent-list,

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

@@ -0,0 +1,39 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a light highlight schema.
+/// @type {Map}
+/// @property {Map} resting-background [igx-color: ('secondary', 400)] - The background color used for the highlight in its resting state.
+/// @property {Map} resting-color [igx-color: ('secondary', 400), text-contrast: ()] - The icon color used for the highlight in its resting state.
+/// @property {Map} active-background [igx-color: ('secondary', 600)] - The background color used for the highlight in its active state.
+/// @property {Map} active-color [igx-color: ('secondary', 400), text-contrast: ()] - The text color used for the highlight in its active state.
+/// @see $default-palette
+$_light-highlight: (
+    resting-background: (
+        igx-color: ('secondary', 50)
+    ),
+
+    resting-color: (
+        igx-color: ('secondary', 50),
+        text-contrast: ()
+    ),
+
+    active-background: (
+        igx-color: ('secondary', 200)
+    ),
+
+    active-color: (
+        igx-color: ('secondary', 200),
+        text-contrast: ()
+    ),
+);
+
+/// Generates a fluent highlight schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-highlight
+$_fluent-highlight: extend($_light-highlight);
+

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

@@ -26,6 +26,7 @@
 @import './grid-pagination';
 @import './grid-summary';
 @import './grid-toolbar';
+@import './highlight';
 @import './icon';
 @import './input-group';
 @import './list';
@@ -67,6 +68,7 @@
 /// @property {Map} igx-grid-paginator [$_light-grid-pagination]
 /// @property {Map} igx-grid-summary [$_light-grid-summary]
 /// @property {Map} igx-grid-toolbar [$_light-grid-toolbar]
+/// @property {Map} igx-highlight [$_light-highlight]
 /// @property {Map} igx-icon [$_light-icon]
 /// @property {Map} igx-input-group [$_light-input-group]
 /// @property {Map} igx-list [$_light-list]
@@ -110,6 +112,7 @@ $light-schema: (
     igx-grid-paginator: $_light-grid-pagination,
     igx-grid-summary: $_light-grid-summary,
     igx-grid-toolbar: $_light-grid-toolbar,
+    igx-highlight: $_light-highlight,
     igx-icon: $_light-icon,
     igx-input-group: $_light-input-group,
     igx-list: $_light-list,
@@ -153,6 +156,7 @@ $light-fluent-schema: (
     igx-grid-paginator: $_fluent-grid-pagination,
     igx-grid-summary: $_fluent-grid-summary,
     igx-grid-toolbar: $_fluent-grid-toolbar,
+    igx-highlight: $_fluent-highlight,
     igx-icon: $_fluent-icon,
     igx-input-group: $_fluent-input-group,
     igx-list: $_fluent-list,

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

@@ -26,6 +26,7 @@
 @import '../light/grid-pagination';
 @import '../light/grid-summary';
 @import '../light/grid-toolbar';
+@import '../light/highlight';
 @import '../light/icon';
 @import '../light/input-group';
 @import '../light/list';
@@ -67,6 +68,7 @@
 /// @property {Map} igx-grid-paginator [$_light-grid-pagination]
 /// @property {Map} igx-grid-summary [$_light-grid-summary]
 /// @property {Map} igx-grid-toolbar [$_light-grid-toolbar]
+/// @property {Map} igx-highlight [$_light-highlight]
 /// @property {Map} igx-icon [$_light-icon]
 /// @property {Map} igx-input-group [$_light-input-group]
 /// @property {Map} igx-list [$_light-list]
@@ -108,6 +110,7 @@ $light-round-schema: (
     igx-grid-paginator: extend($_light-grid-pagination, $_round-shape-grid-pagination),
     igx-grid-summary: extend($_light-grid-summary, $_round-shape-grid-summary),
     igx-grid-toolbar: extend($_light-grid-toolbar, $_round-shape-tooltip),
+    igx-highlight: $_light-highlight,
     igx-icon: extend($_light-icon, $_round-shape-icon),
     igx-input-group: extend($_light-input-group, $_round-shape-input-group),
     igx-list: extend($_light-list, $_round-shape-list),