chore(*): Fix border styles for cell merging.

Author: MKirova

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

@@ -276,6 +276,10 @@
             @extend %igx-grid__tr--merged !optional;
         }
 
+        @include e(tr, $m: merged-top) {
+            @extend %igx-grid__tr--merged-top !optional;
+        }
+
         @include e(tr, $m: pinned-top) {
             @extend %igx-grid__tr--pinned-top !optional;
         }

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

@@ -1341,6 +1341,10 @@
     }
 
     %igx-grid__tr--merged {
+        border-bottom: 0px;
+    }
+
+    %igx-grid__tr--merged-top {
         position: absolute;
         width: 100%;
     }

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -128,6 +128,7 @@ export class IgxGridRowClassesPipe implements PipeTransform {
             [deleted, 'igx-grid__tr--deleted'],
             [dragging, 'igx-grid__tr--drag'],
             [mrl || merged, 'igx-grid__tr--mrl'],
+            [merged, 'igx-grid__tr--merged'],
             // Tree grid only
             [filteredOut, 'igx-grid__tr--filtered']
         ];

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -50,7 +50,7 @@
 
 
         @for (rowData of mergedDataInView; track rowData.record;) {
-            <igx-grid-row class="igx-grid__tr--merged" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
+            <igx-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
             [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):false:rowData.record:pipeTrigger"
             [ngStyle]="rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger" #row>
             </igx-grid-row>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -33,7 +33,7 @@
         }
 
         @for (rowData of mergedDataInView; track rowData.record;) {
-            <igx-hierarchical-grid-row class="igx-grid__tr--merged" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
+            <igx-hierarchical-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [data]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
             [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData.record):false:rowData.record:pipeTrigger"
             [ngStyle]="rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger" #row>
             </igx-hierarchical-grid-row>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -32,7 +32,7 @@
         }
 
         @for (rowData of mergedDataInView; track rowData.record;) {
-            <igx-tree-grid-row class="igx-grid__tr--merged" [gridID]="id" [index]="rowData.index" [treeRow]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
+            <igx-tree-grid-row class="igx-grid__tr--merged-top" [gridID]="id" [index]="rowData.index" [treeRow]="rowData.record.recordRef" [metaData]="rowData.record" [style.top.px]="getMergeCellOffset(rowData)"
             [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
             [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowData.index:pipeTrigger" #row>
         </igx-tree-grid-row>