Merge branch 'pivot-grid-master' of https://github.com/IgniteUI/igniteui-angular into mdragnev/pivot-selection

Author: 3phase

CHANGELOG.md

@@ -846,7 +846,7 @@ All notable changes for each version of this project will be documented in this
 
         Changed the how the grid toolbar is instantiated in the grids. The
         toolbar is now templated rather than being activated through a property on the parent grid. The toolbar features are also exposed as templatable
-        components and the old properties are deprecated.
+        components and the old properties are deprecated. The implementation of the Column Hiding UI has been changed in order to select which columns should be displayed, instead of hidden.
 
         Refer to the official documentation for more information.
 - `FilteringStrategy`

projects/igniteui-angular/migrations/update-13_0_0/changes/inputs.json

@@ -0,0 +1,14 @@
+{
+    "@scheme": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "color",
+            "remove": "true",
+            "owner": {
+                "selector": "igx-icon",
+                "type": "component"
+            }
+        }
+    ]
+}
+

projects/igniteui-angular/package.json

@@ -87,7 +87,7 @@
         "@angular/forms": "^13.0.0"
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~13.0.900-rc.2"
+        "@igniteui/angular-schematics": "~13.0.900"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json"

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

@@ -1023,6 +1023,7 @@
         border-bottom: 1px solid var-get($theme, 'row-border-color');
         outline-style: none;
         position: relative;
+        background-clip: content-box !important;
 
         &:hover {
             background: var-get($theme, 'row-hover-background');
@@ -1106,35 +1107,6 @@
         color: var-get($theme, 'row-even-text-color');
     }
 
-    %grid-row--selected {
-        color: var-get($theme, 'row-selected-text-color');
-        background: var-get($theme, 'row-selected-background');
-
-        %grid-cell--selected,
-        %grid-cell--pinned-selected {
-            color: var-get($theme, 'cell-selected-within-text-color');
-            background: var-get($theme, 'cell-selected-within-background');
-        }
-
-        &:hover {
-            background: var-get($theme, 'row-selected-hover-background');
-            color: var-get($theme, 'row-selected-hover-text-color');
-
-            %grid-cell--column-selected {
-                color: var-get($theme, 'row-selected-hover-text-color');
-                background: var-get($theme, 'row-selected-hover-background');
-            }
-        }
-
-        %igx-grid__tree-grouping-indicator {
-            color: var-get($theme, 'row-selected-text-color');
-
-            &:hover {
-                color: var-get($theme, 'row-selected-text-color');
-            }
-        }
-    }
-
     %igx-grid__tr--expanded {
         border-bottom: none;
     }
@@ -1357,6 +1329,7 @@
         line-height: $grid-cell-lh;
         color: inherit;
         text-align: #{$left};
+        background-clip: border-box !important;
     }
 
     %igx-grid__td--tree-cell {
@@ -1390,6 +1363,7 @@
         }
     }
 
+    %grid-cell--pinned-selected,
     %grid-cell--selected {
         color: var-get($theme, 'cell-selected-text-color');
         background: var-get($theme, 'cell-selected-background');
@@ -1403,6 +1377,35 @@
         }
     }
 
+    %grid-row--selected {
+        color: var-get($theme, 'row-selected-text-color');
+        background: var-get($theme, 'row-selected-background');
+
+        %grid-cell--selected,
+        %grid-cell--pinned-selected {
+            color: var-get($theme, 'cell-selected-within-text-color');
+            background: var-get($theme, 'cell-selected-within-background');
+        }
+
+        &:hover {
+            background: var-get($theme, 'row-selected-hover-background');
+            color: var-get($theme, 'row-selected-hover-text-color');
+
+            %grid-cell--column-selected {
+                color: var-get($theme, 'row-selected-hover-text-color');
+                background: var-get($theme, 'row-selected-hover-background');
+            }
+        }
+
+        %igx-grid__tree-grouping-indicator {
+            color: var-get($theme, 'row-selected-text-color');
+
+            &:hover {
+                color: var-get($theme, 'row-selected-text-color');
+            }
+        }
+    }
+
     %grid-cell--column-selected {
         color: var-get($theme, 'row-selected-text-color');
         background: var-get($theme, 'row-selected-background');
@@ -1498,13 +1501,6 @@
         z-index: 9999;
     }
 
-    %grid-cell--pinned-selected {
-        color: var-get($theme, 'cell-selected-text-color');
-        background: var-get($theme, 'cell-selected-background');
-        // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981
-        // border-bottom: 0;
-    }
-
     %grid-cell--pinned--column-selected {
         color: var-get($theme, 'row-selected-text-color');
         background: var-get($theme, 'row-selected-background');
@@ -1670,8 +1666,23 @@
         background: var-get($theme, 'header-selected-background');
         opacity: if($variant != 'indigo-design', .7, 1);
 
-        .sort-icon::after {
-            background: var-get($theme, 'header-selected-background');
+        .sort-icon {
+            color: var-get($theme, 'header-selected-text-color');
+
+            ::after {
+                background: var-get($theme, 'header-selected-background');
+            }
+        }
+
+        &%igx-grid-th--sorted {
+            .sort-icon {
+                color: var-get($theme, 'header-selected-text-color');
+
+                &:focus,
+                &:hover {
+                    color: var-get($theme, 'header-selected-text-color');
+                }
+            }
         }
     }
 
@@ -1682,6 +1693,17 @@
         .sort-icon::after {
             background: var-get($theme, 'header-selected-background');
         }
+
+        &%igx-grid-th--sorted {
+            .sort-icon {
+                color: var-get($theme, 'header-selected-text-color');
+
+                &:focus,
+                &:hover {
+                    color: var-get($theme, 'header-selected-text-color');
+                }
+            }
+        }
     }
 
     %igx-grid-th--active {
@@ -1836,7 +1858,6 @@
             border-bottom: none;
         }
 
-        // %igx-grid-summary__label,
         %igx-grid-summary__result {
             color: var-get($theme, 'body-summaries-text-color');
         }