Merge pull request #5933 from IgniteUI/#fix-5403

DiyanDimitrov · web-flow · commit e0a0eafbbc4b · 2019-10-10T11:37:14.000+03:00
feat(highlight): replace inline styles with theme
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,10 @@
-﻿# 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.
+
 ## 8.2.0
 ### New theme
 Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.  
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss b/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;
+    }
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss b/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');
+    }
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/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';
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/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));
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_highlight.scss b/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);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/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,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_highlight.scss b/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);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/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,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/round-light/_index.scss b/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),
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/square-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-square-schema: (
     igx-grid-paginator: extend($_light-grid-pagination, $_square-shape-grid-pagination),
     igx-grid-summary: extend($_light-grid-summary, $_square-shape-grid-summary),
     igx-grid-toolbar: extend($_light-grid-toolbar, $_square-shape-tooltip),
+    igx-highlight: $_light-highlight,
     igx-icon: extend($_light-icon, $_square-shape-icon),
     igx-input-group: extend($_light-input-group, $_square-shape-input-group),
     igx-list: extend($_light-list, $_square-shape-list),
diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts
@@ -288,21 +288,6 @@ describe('IgxHighlight', () => {
         const activeSpans = fix.debugElement.nativeElement.querySelectorAll('.' + component.activeHighlightClass);
         expect(spans.length).toBe(4);
         expect(activeSpans.length).toBe(1);
-
-        const activeSpan = activeSpans[0];
-        const activeStyle = getComputedStyle(activeSpan);
-        expect(activeStyle.background.indexOf('rgb(255, 165, 0)')).toBe(0);
-        expect(activeStyle.color).toBe('rgb(0, 0, 0)');
-        expect(activeStyle.fontWeight).toBe('400');
-
-        for (const span of spans) {
-            if (span !== activeSpan) {
-                const style = getComputedStyle(span);
-                expect(style.background.indexOf('rgb(255, 255, 0)')).toBe(0);
-                expect(style.color).toBe('rgb(0, 0, 0)');
-                expect(style.fontWeight).toBe('400');
-            }
-        }
     });
 });
 
diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts
@@ -9,7 +9,7 @@ import {
     OnDestroy,
     Renderer2,
     SimpleChanges,
-    AfterViewChecked
+    AfterViewChecked,
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
@@ -67,6 +67,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     private _forceEvaluation = false;
     private _activeElementIndex = -1;
     private _valueChanged: boolean;
+    private _defaultCssClass = 'igx-highlight';
+    private _defaultActiveCssClass = 'igx-highlight--active';
 
     /**
      * Determines the `CSS` class of the highlight elements.
@@ -391,8 +393,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
             }
 
             const elementToActivate = spans[index];
+            this.renderer.addClass(elementToActivate, this._defaultActiveCssClass);
             this.renderer.addClass(elementToActivate, this.activeCssClass);
-            this.renderer.setAttribute(elementToActivate, 'style', 'background:orange;color:black');
         }
     }
 
@@ -409,8 +411,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
         }
 
         const elementToDeactivate = spans[this._activeElementIndex];
+        this.renderer.removeClass(elementToDeactivate, this._defaultActiveCssClass);
         this.renderer.removeClass(elementToDeactivate, this.activeCssClass);
-        this.renderer.setAttribute(elementToDeactivate, 'style', 'background:yellow;color:black');
         this._activeElementIndex = -1;
     }
 
@@ -437,7 +439,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
         if (exactMatch) {
             if (contentStringResolved === searchTextResolved) {
                 // tslint:disable-next-line:max-line-length
-                this.appendSpan(`<span class="${this.cssClass}" style="background:yellow;color:black">${stringValue}</span>`);
+                this.appendSpan(`<span class="${this._defaultCssClass} ${this.cssClass ? this.cssClass : ''}">${stringValue}</span>`);
                 matchCount++;
             } else {
                 this.appendText(stringValue);
@@ -452,7 +454,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
 
                 this.appendText(stringValue.substring(previousMatchEnd, start));
                 // tslint:disable-next-line:max-line-length
-                this.appendSpan(`<span class="${this.cssClass}" style="background:yellow;color:black">${stringValue.substring(start, end)}</span>`);
+                this.appendSpan(`<span class="${this._defaultCssClass} ${this.cssClass ? this.cssClass : ''}">${stringValue.substring(start, end)}</span>`);
 
                 previousMatchEnd = end;
                 matchCount++;
diff --git a/src/styles/igniteui-theme.scss b/src/styles/igniteui-theme.scss
