IdsGridData: Row state flag

[fabiojpoli]

Is your feature request related to a problem or use case? Please describe. When adding a new row in the grid, change the state for that row to differentiate from other rows pointing that row is a new record.

Describe the solution you'd like Define CSS classes for different state, like creating part row-new and row-removed(when asked to remove from server but didn't happen locally yet), etc. Then create a method to grid.setRowState(rowIdx, stateName).

Describe alternatives you've considered JS:

setRowState(rowIdx, stateName) {
   const row = this.rowByIndex(rowIdx);

   if (row) {
      row.setAttribute('part', stateName);
   }
}

// using:
grid.setRowState(0, 'row-new');

SASS:

// IDS colors imported from IDS color palette
$ids-color-green-50: #4dcc86;
$ids-color-green-10: #ebf9f1;
$ids-color-red-50: #df3539;
$ids-color-red-10: #fbe7e8;

ids-data-grid::part(row-new) {
   background-color: $ids-color-green-10;
}

ids-data-grid::part(row-removed) {
   background-color: $ids-color-red-10;
}

ids-data-grid::part(row-new):before {
   border-color: $ids-color-green-50 transparent transparent $ids-color-green-50;
   border-style: solid;
   border-width: 5px;
   content: "";
   position: absolute;
   z-index: 1;
   margin: 2px;
}

ids-data-grid::part(row-removed):before {
   border-color: $ids-color-red-50 transparent transparent $ids-color-red-50;
   border-style: solid;
   border-width: 5px;
   content: "";
   position: absolute;
   z-index: 1;
   margin: 2px;
}

Additional context