Merge branch 'mkirova/row-pinning-base' of https://github.com/IgniteUI/igniteui-angular into pbozhinov/row-pinning-tree-grid

Author: 3phase

projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html

@@ -11,10 +11,10 @@
         [igxLabel]="button.label"
         [igxRipple]="button.ripple"
     >
-        <div class="igx-button-group__item-content {{ itemContentCssClass }}">
+        <span class="igx-button-group__item-content {{ itemContentCssClass }}">
             <igx-icon *ngIf="button.icon" fontSet="material">{{button.icon}}</igx-icon>
-            <span *ngIf="button.label">{{button.label}}</span>
-        </div>
+            <span class="igx-button-group__button-text" *ngIf="button.label">{{button.label}}</span>
+        </span>
     </button>
     <ng-content></ng-content>
 </div>

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-display-container.scss

@@ -1,4 +1,4 @@
-%display-container {
+%display-container {
     display: inherit;
     position: relative;
     width: 100%;

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -12,7 +12,6 @@
 
     %vhelper--vertical {
         position: absolute;
-        width: 18px;
         top: 0;
         #{$right}: 0;
     }

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

@@ -15,6 +15,10 @@
         @extend %igx-group-item !optional;
     }
 
+    @include e(button-text) {
+        @extend %igx-button-group__button-text !optional;
+    }
+
     @include e(item, $m: selected) {
         @extend %igx-group-item !optional;
         @extend %igx-group-item-selected !optional;

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

@@ -186,11 +186,10 @@
         display: flex;
         box-shadow: --var($theme, 'shadow');
         transition: $transition;
-        border-radius: --var($theme, 'border-radius')
+        border-radius: --var($theme, 'border-radius');
     }
 
     %igx-group-item {
-        @include ellipsis();
         border: $group-item-border-thickness solid --var($theme, 'item-border-color');
         color: --var($theme, 'item-text-color');
         background: --var($theme, 'item-background');
@@ -308,13 +307,16 @@
     %igx-group-item-content {
         display: flex;
         flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
+        min-width: 0;
 
         * ~ * {
             margin-#{$left}: $group-items-margin;
         }
     }
+
+    %igx-button-group__button-text {
+        width: 100%;
+        @include ellipsis();
+    }
 }
 

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

@@ -0,0 +1,15 @@
+////
+/// @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-scrollbar) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+
+    @extend %scrollbar-display !optional;
+}
+

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

@@ -0,0 +1,75 @@
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// If only background color is specified, text/icon color 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} $thumb-background [null] - The background color used for the thumb.
+/// @param {Color} $track-background [null] - The background color used for the track.
+/// @param {Number | String} $size [null] - The size of the track.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires text-contrast
+/// @requires extend
+///
+/// @example scss Change the background and track colors
+///   $my-scrollbar-theme: igx-scrollbar-theme($thumb-background: black, $track-background: gray);
+///   // Pass the theme to the igx-scrollbar component mixin
+///   @include igx-scrollbar($my-avatar-theme);
+@function igx-scrollbar-theme(
+    $palette: $default-palette,
+    $schema: $light-schema,
+    $size: null,
+    $thumb-background: null,
+    $track-background: null,
+) {
+    $name: 'igx-scrollbar';
+    $scrollbar-schema: ();
+
+    @if map-has-key($schema, $name) {
+        $scrollbar-schema: map-get($schema, $name);
+    } @else {
+        $scrollbar-schema: $schema;
+    }
+
+    $theme: apply-palette($scrollbar-schema, $palette);
+
+    @return extend($theme, (
+        name: $name,
+        palette: $palette,
+        thumb-background: $thumb-background,
+        track-background: $track-background,
+        size: $size
+    ));
+}
+
+/// @param {Map} $theme - The theme used to style the component.
+/// @requires {mixin} igx-root-css-vars
+/// @requires rem
+/// @requires --var
+@mixin igx-scrollbar($theme) {
+    @include igx-root-css-vars($theme);
+
+    %scrollbar-display {
+        @if type-of(map-get($theme, 'size') == 'string') {
+            scrollbar-width: --var($theme, 'size');
+        }
+
+        scrollbar-color: --var($theme, 'thumb-background') --var($theme, 'track-background');
+
+        ::-webkit-scrollbar {
+            width: --var($theme, 'size');
+            height: --var($theme, 'size');
+            background: --var($theme, 'track-background');
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: --var($theme, 'thumb-background');
+        }
+    }
+}
+

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

@@ -51,6 +51,7 @@
 @import '../components/overlay/overlay-component';
 @import '../components/progress/progress-component';
 @import '../components/radio/radio-component';
+@import '../components/scrollbar/scrollbar-component';
 @import '../components/slider/slider-component';
 @import '../components/snackbar/snackbar-component';
 @import '../components/switch/switch-component';

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

@@ -34,6 +34,7 @@
 @import '../components/toast/toast-theme';
 @import '../components/tooltip/tooltip-theme';
 @import '../components/tabs/tabs-theme';
+@import '../components/scrollbar/scrollbar-theme';
 @import '../components/switch/switch-theme';
 @import '../components/snackbar/snackbar-theme';
 @import '../components/slider/slider-theme';
@@ -347,6 +348,10 @@
         @include igx-radio(igx-radio-theme($palette, $schema));
     }
 
+    @if not(index($exclude, 'igx-scrollbar')) {
+        @include igx-scrollbar(igx-scrollbar-theme($palette, $schema));
+    }
+
     @if not(index($exclude, 'igx-slider')) {
         @include igx-slider(igx-slider-theme($palette, $schema));
     }

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

@@ -91,11 +91,11 @@ $green-palette: igx-palette(
 /// Dark green palette,
 /// @type {Map}
 /// @group palettes
-$green-dark-palette: extend(
-    $green-palette,
-    (
-        surface: (500: #222)
-    )
+$green-dark-palette: igx-palette(
+    $primary: igx-color($green-palette, 'primary'),
+    $secondary: igx-color($green-palette, 'secondary'),
+    $surface: #222,
+    $grays: #fff
 ) !default;
 
 /// Purple palette
@@ -109,11 +109,11 @@ $purple-palette: igx-palette(
 /// Dark purple palette
 /// @type {Map}
 /// @group palettes
-$purple-dark-palette: extend(
-    $purple-palette,
-    (
-        surface: (500: #333)
-    )
+$purple-dark-palette: igx-palette(
+    $primary: igx-color($purple-palette, 'primary'),
+    $secondary: igx-color($purple-palette, 'secondary'),
+    $surface: #333,
+    $grays: #fff
 ) !default;
 
 /// Fluent Excel palette
@@ -130,11 +130,14 @@ $fluent-excel-palette: igx-palette(
 /// Fluent Excel dark palette
 /// @type {Map}
 /// @group palettes
-$fluent-excel-dark-palette: extend(
-    $fluent-excel-palette,
-    (
-        surface: (500: #222)
-    )
+$fluent-excel-dark-palette: igx-palette(
+    $primary: igx-color($fluent-excel-palette, 'primary'),
+    $secondary: igx-color($fluent-excel-palette, 'secondary'),
+    $success: igx-color($fluent-excel-palette, 'success'),
+    $warn: igx-color($fluent-excel-palette, 'warn'),
+    $error: igx-color($fluent-excel-palette, 'error'),
+    $surface: #222,
+    $grays: #fff
 ) !default;
 
 /// Fluent Word palette
@@ -151,11 +154,14 @@ $fluent-word-palette: igx-palette(
 /// Fluent Word dark palette
 /// @type {Map}
 /// @group palettes
-$fluent-word-dark-palette: extend(
-    $fluent-word-palette,
-    (
-        surface: (500: #222)
-    )
+$fluent-word-dark-palette: igx-palette(
+    $primary: igx-color($fluent-word-palette, 'primary'),
+    $secondary: igx-color($fluent-word-palette, 'secondary'),
+    $success: igx-color($fluent-word-palette, 'success'),
+    $warn: igx-color($fluent-word-palette, 'warn'),
+    $error: igx-color($fluent-word-palette, 'error'),
+    $surface: #222,
+    $grays: #fff
 ) !default;
 
 /// Bootstrap palette
@@ -174,10 +180,14 @@ $bootstrap-palette: igx-palette(
 /// Bootstrap dark palette
 /// @type {Map}
 /// @group palettes
-$bootstrap-dark-palette: extend(
-    $bootstrap-palette,
-    (
-        surface: (500: #333)
-    )
+$bootstrap-dark-palette: igx-palette(
+    $primary: igx-color($bootstrap-palette, 'primary'),
+    $secondary: igx-color($bootstrap-palette, 'secondary'),
+    $info: igx-color($bootstrap-palette, 'info'),
+    $success: igx-color($bootstrap-palette, 'success'),
+    $warn: igx-color($bootstrap-palette, 'warn'),
+    $error: igx-color($bootstrap-palette, 'error'),
+    $surface: #333,
+    $grays: #fff
 ) !default;