Merge pull request #8228 from IgniteUI/simeonoff/add-row-styling

themes(grid): add new cell styling when in add row mode

Author: ChronosSF

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

@@ -378,6 +378,10 @@
         @extend %igx-grid__tree-loading-indicator !optional;
     }
 
+    @include e(td, $m: new) {
+        @extend %igx-grid__td--new !optional;
+    }
+
     @include e(td, $m: edited) {
         @extend %igx-grid__td--edited !optional;
     }

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

@@ -50,6 +50,7 @@
 /// @param {Color} $cell-selected-text-color [null] - The selected cell text color.
 /// @param {Color} $cell-editing-background [null] - The background color of the cell being edited.
 /// @param {Color} $cell-edited-value-color [null] - The text color of a cell that has been edited.
+/// @param {Color} $cell-new-color [null] - The text color of a new, unedited cell. Used when adding new row in a grid.
 /// @param {Color} $cell-disabled-color [null] - The text color of a disabled cell.
 ///
 /// @param {Color} $edit-mode-color [null] - The color applied around the row when in editing mode.
@@ -161,6 +162,7 @@
     $cell-selected-text-color: null,
     $cell-editing-background: null,
     $cell-edited-value-color: null,
+    $cell-new-color: null,
     $cell-disabled-color: null,
 
     $edit-mode-color: null,
@@ -506,6 +508,7 @@
         edit-mode-color: $edit-mode-color,
         edited-row-indicator: $edited-row-indicator,
         cell-edited-value-color: $cell-edited-value-color,
+        cell-new-color: $cell-new-color,
 
         cell-disabled-color: $cell-disabled-color,
 
@@ -1366,6 +1369,12 @@
         background: --var($theme, 'row-selected-cell-background');
     }
 
+    %igx-grid__td--new {
+        %grid-cell-text {
+            color: --var($theme, 'cell-new-color');
+        }
+    }
+
     %igx-grid__td--edited {
         %grid-cell-text {
             font-style: italic;

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss

@@ -46,6 +46,7 @@
 /// @prop {Color} cell-editing-background [#fff] - The editing background color of a cell.
 /// @prop {Map} edit-mode-color [igx-color: ('secondary', 500)] - The text color in edit mode.
 /// @prop {Map} edited-row-indicator [igx-color: ('grays', 400)] - The indicator's color of edited row.
+/// @prop {Map} cell-new-color [igx-color: ('grays', 500)] - The text color of a new, unedited cell. Used when adding new row in a grid.
 /// @prop {Map} cell-edited-value-color [igx-color: ('grays', 600)] - The color of cell edited value.
 /// @prop {Map} cell-disabled-color [igx-color: ('grays', 500)] - The text color of a disabled cell.
 /// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color.
@@ -230,6 +231,10 @@ $_light-grid: extend(
             igx-color: ('grays', 400)
         ),
 
+        cell-new-color: (
+            igx-color: ('grays', 500)
+        ),
+
         cell-edited-value-color: (
             igx-color: ('grays', 600)
         ),

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

@@ -93,6 +93,7 @@
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number'"
         [class.igx-grid__td--bool]="col.dataType === 'boolean'"
+        [class.igx-grid__td--new]="addRow && !rowData[col.field]"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [editMode]="col.editable && crudService.isInEditMode(index, col.index)"
@@ -159,6 +160,7 @@
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number'"
+        [class.igx-grid__td--new]="addRow && !rowData[col.field]"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [editMode]="col.editable && crudService.isInEditMode(index, col.index)"