Merge branch 'master' into mkirova/row-pinning-editing

Author: ChronosSF

CHANGELOG.md

@@ -108,10 +108,6 @@ All notable changes for each version of this project will be documented in this
     - `IgxGridExcelStyleFilteringComponent` and `IgxAdvancedFilteringDialogComponent` can now be hosted outside of the grid in order to provide the same experience as the built-in filtering UI.
     - `expandRow(rowID)`/`collapseRow(rowID)`/`toggleRow(rowID)` API methods are added for the `igxHierarchicalGrid`. They allow expanding/collapsing a row by its id.
     - `onRowToggle` event is added for the `igxHierarchicalGrid`. It is emitted when the expanded state of a row is changed.
-    - `IgxOverlayService`:
-        - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
-    - `IgxToggleDirective`:
-        - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
     - `IgxRowDragGhost` directive is added. It allows providing a custom template for the drag ghost when dragging a row.
     ```html
     <igx-grid #grid1 [data]="remote | async" primaryKey="ProductID"
@@ -171,6 +167,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxDropDown`:
     - `clearSelection` method is added, which can be used to deselect the selected dropdown item
 
+- `IgxToggleDirective`:
+    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+
+- `IgxOverlayService`:
+    - `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
+
 - `IgxCircularProgressBar`:
     - added `IgxProgressBarGradientDirective` to allow providing custom circular progress SVG gradients. Providing a custom gradient via a template is as easy as writing:
     ```html

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));
     }