Merge pull request #12492 from IgniteUI/skrastev/fix-12488-master

fix(toolbar): Reflect group by area styles when toolbar is enabled.

Author: ChronosSF

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

@@ -92,6 +92,17 @@
     ));
 }
 
+@mixin _offset-sibling-elements($offset) {
+    + igx-grid-header-row,
+    + igx-grid-group-by-area {
+        margin-top: $offset;
+    }
+
+    + igx-grid-group-by-area {
+        height: auto;
+    }
+}
+
 /// @param {Map} $theme - The theme used to style the component.
 @mixin grid-toolbar($theme) {
     @include css-vars($theme);
@@ -121,6 +132,9 @@
     );
 
     %igx-grid-toolbar {
+        $height: map.get($grid-toolbar-height, 'comfortable');
+        @include _offset-sibling-elements($height);
+
         position: absolute;
         width: 100%;
         display: flex;
@@ -137,7 +151,7 @@
 
         background: var-get($theme, 'background-color');
         height: auto;
-        min-height: map.get($grid-toolbar-height, 'comfortable');
+        min-height: $height;
         padding-block: 0;
         padding-inline: map.get($grid-toolbar-padding, 'comfortable');
 
@@ -165,37 +179,30 @@
                 }
             }
         }
-
-        + igx-grid-header-row {
-            margin-top: map.get($grid-toolbar-height, 'comfortable');
-        }
     }
 
-
     %igx-grid-toolbar--cosy {
-        min-height: map.get($grid-toolbar-height, 'cosy');
+        $height: map.get($grid-toolbar-height, 'cosy');
+        @include _offset-sibling-elements($height);
+
+        min-height: $height;
         padding-inline: map.get($grid-toolbar-padding, 'cosy');
 
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'cosy');
         }
-
-        + igx-grid-header-row {
-            margin-top: map.get($grid-toolbar-height, 'cosy');
-        }
     }
 
     %igx-grid-toolbar--compact {
-        min-height: map.get($grid-toolbar-height, 'compact');
+        $height: map.get($grid-toolbar-height, 'compact');
+        @include _offset-sibling-elements($height);
+
+        min-height: $height;
         padding-inline: map.get($grid-toolbar-padding, 'compact');
 
         [igxButton] {
             margin-inline-start: map.get($grid-toolbar-spacer, 'compact');
         }
-
-        + igx-grid-header-row {
-            margin-top: map.get($grid-toolbar-height, 'compact');
-        }
     }
 
     %igx-grid-toolbar__title {