Merge branch '20.1.x' into bpachilova/number-cols-alignment-fix-16828-20.1.x

Author: MonikaKirkova

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -59,8 +59,8 @@
     $material-box-top-padding: sizable(rem(16px), rem(20px), rem(24px));
     $material-border-top-padding: sizable(rem(8px), rem(12px), rem(16px));
 
-    $textarea-top-padding: map.get((
-        'material': rem(0px),
+    $textarea-padding: map.get((
+        'material': sizable(rem(8px), rem(12px), rem(16px)),
         'fluent': sizable(rem(6px), rem(10px), rem(14px)),
         'bootstrap': sizable(rem(4px), rem(8px), rem(12px)),
         'indigo': sizable(rem(4px), rem(6px), rem(8px)),
@@ -1289,7 +1289,7 @@
 
         %textarea-group-label--focused {
             transform: translateY(0);
-            top: calc(#{$material-box-top-padding} / 4);
+            top: calc(#{$textarea-padding} / 4);
         }
 
         %textarea-group-label--filled--border,
@@ -1465,9 +1465,10 @@
         resize: vertical;
         overflow: hidden;
         z-index: 1;
+        padding-block-end: $textarea-padding;
 
         @if $material-theme {
-            padding: 0;
+            padding-block-start: 0;
         }
     }
 
@@ -2023,14 +2024,14 @@
     }
 
     %indigo-textarea {
-        padding-block: $textarea-top-padding 0;
+        padding-block: $textarea-padding;
         padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
         inset-block-end: rem(2px);
     }
 
     %fluent-textarea {
         padding-inline: pad-inline(rem(8px));
-        padding-block: $textarea-top-padding 0;
+        padding-block: $textarea-padding;
     }
 
     %fluent-input-disabled {
@@ -2292,7 +2293,7 @@
         );
 
         &:is(textarea) {
-            padding-block: $textarea-top-padding 0;
+            padding-block: $textarea-padding;
         }
     }
 

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

@@ -350,6 +350,7 @@
 
     %igx-stepper__step-content-wrapper {
         margin-inline-start: $v-line-indent;
+        padding-inline-start: $v-line-indent;
         position: relative;
         min-height: if($variant == 'indigo', rem(24px), rem(32px));
 
@@ -364,12 +365,6 @@
         }
     }
 
-    [aria-selected='true'] {
-        %igx-stepper__step-content-wrapper {
-            padding-inline-start: $v-line-indent;
-        }
-    }
-
     @if $variant == 'indigo' {
         [aria-selected='true'] {
             %igx-stepper__step-content-wrapper {

projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts

@@ -355,7 +355,8 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
 
     private hasNextVerticalPosition(prev = false) {
         if ((prev && this.activeNode.row === 0 && (!this.isDataRow(this.activeNode.row) || this.activeNode.layout.rowStart === 1)) ||
-            (!prev && this.activeNode.row >= this.grid.dataView.length - 1 && this.activeNode.column === this.lastColIndexPerMRLBlock())) {
+            (!prev && this.activeNode.row >= this.grid.dataView.length - 1 &&
+                this.activeNode.layout.rowStart === this.lastRowStartPerBlock())) {
             return false;
         }
         return true;

projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts

@@ -12,6 +12,7 @@ import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.s
 import { CellType } from '../common/grid.interface';
 import { IgxColumnLayoutComponent } from '../columns/column-layout.component';
 import { IGridCellEventArgs, IgxColumnComponent } from '../public_api';
+import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
 
 const DEBOUNCE_TIME = 30;
 const CELL_CSS_CLASS = '.igx-grid__td';
@@ -297,6 +298,40 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 GridFunctions.verifyGridContentActiveDescendant(GridFunctions.getGridContent(fix), cell.nativeElement.id);
             });
 
+            it('should not return an out of bounds row index when navigating down from the last layout row', () => {
+                fix.componentInstance.data = SampleTestData.contactInfoDataFull().slice(0, 10);
+                fix.componentInstance.colGroups = [{
+                    group: 'group1',
+                    columns: [
+                        { field: 'ID', rowStart: 1, colStart: 1 },
+                        { field: 'CompanyName', rowStart: 1, colStart: 2 },
+                        { field: 'ContactName', rowStart: 1, colStart: 3 },
+                        { field: 'ContactTitle', rowStart: 1, colStart: 4 },
+                        { field: 'Address', rowStart: 1, colStart: 5 },
+                        { field: 'City', rowStart: 2, colStart: 1 },
+                        { field: 'Region', rowStart: 2, colStart: 2 },
+                        { field: 'PostalCode', rowStart: 2, colStart: 3 },
+                        { field: 'Phone', rowStart: 2, colStart: 4 },
+                        { field: 'Fax', rowStart: 2, colStart: 5 }
+                    ]
+                }];
+                fix.detectChanges();
+
+                const grid = fix.componentInstance.grid;
+                const lastRowIndex = grid.dataView.length - 1;
+                const navService = grid.navigation as IgxGridMRLNavigationService;
+                const col = grid.getColumnByName('City');
+                navService.setActiveNode({
+                    row: lastRowIndex,
+                    column: col.visibleIndex,
+                    layout: navService.layout(col.visibleIndex)
+                });
+
+                const nextPos = navService.getNextVerticalPosition();
+                expect(nextPos.row).toBe(lastRowIndex);
+                expect(nextPos.column).toBe(navService.activeNode.column);
+            });
+
             it('should navigate up correctly', () => {
                 fix.componentInstance.colGroups = [{
                     group: 'group1',

projects/igniteui-angular/src/lib/stepper/stepper.component.spec.ts

@@ -738,6 +738,32 @@ describe('Rendering Tests', () => {
             expect(Math.abs(width - height)).toBeLessThan(1.5);
             expect(Math.abs(width - parseFloat(minWidth))).toBeLessThan(1.5);
         }));
+
+        it('should not shift step content horizontally when navigating between steps in vertical mode', fakeAsync(() => {
+            const indicatorFix = TestBed.createComponent(IgxStepperIndicatorNoShrinkComponent);
+            indicatorFix.detectChanges();
+            const indicatorStepper = indicatorFix.componentInstance.stepper;
+
+            const getContentWrapperStyles = (stepIndex: number) => {
+                const contentWrapper = indicatorStepper.steps[stepIndex].nativeElement.querySelector('.igx-stepper__step-content-wrapper') as HTMLElement;
+                const styles = window.getComputedStyle(contentWrapper);
+                return {
+                    paddingInlineStart: styles.paddingInlineStart || styles.paddingLeft,
+                    marginInlineStart: styles.marginInlineStart || styles.marginLeft
+                };
+            };
+
+            const step0ActiveStyles = getContentWrapperStyles(0);
+
+            indicatorStepper.navigateTo(1);
+            indicatorFix.detectChanges();
+            tick(500);
+
+            const step0InactiveStyles = getContentWrapperStyles(0);
+
+            expect(step0InactiveStyles.paddingInlineStart).toBe(step0ActiveStyles.paddingInlineStart);
+            expect(step0InactiveStyles.marginInlineStart).toBe(step0ActiveStyles.marginInlineStart);
+        }));
     });
 
     describe('Keyboard navigation', () => {