refactor(datagrid-web): change class semantics

Author: Illia Obukhau

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -351,7 +351,7 @@ $grid-selected-row-background: $brand-light;
 
 .widget-datagrid {
     &.widget-datagrid-selection-method-click {
-        .tr .td.td-selected {
+        .tr.tr-selected .td {
             background-color: $grid-selected-row-background;
         }
     }

packages/pluggableWidgets/datagrid-web/src/components/Table.tsx

@@ -217,8 +217,7 @@ export function Table<T extends ObjectItem>(props: TableProps<T>): ReactElement
                                   key={`row_${value.id}_cell_${column.id}`}
                                   className={classNames("td", { "td-borders": rowIndex === 0 }, className, {
                                       clickable: !!onClick,
-                                      "hidden-column-preview": preview && columnsHidable && column.hidden,
-                                      "td-selected": isSelected(value)
+                                      "hidden-column-preview": preview && columnsHidable && column.hidden
                                   })}
                                   onClick={onClick}
                                   onKeyDown={
@@ -242,7 +241,7 @@ export function Table<T extends ObjectItem>(props: TableProps<T>): ReactElement
                       Number(column.id)
                   )
                 : null,
-        [cellRenderer, columnsHidable, preview, visibleColumns, onSelect, rowClickSelectionOn, isSelected]
+        [cellRenderer, columnsHidable, preview, visibleColumns, onSelect, rowClickSelectionOn]
     );
 
     const rows = useMemo(() => data.map(item => ({ item })), [data]);
@@ -359,15 +358,16 @@ export function Table<T extends ObjectItem>(props: TableProps<T>): ReactElement
                         return (
                             <div
                                 key={`row_${row.item.id}`}
-                                className={classNames("tr", rowClass?.(row.item))}
+                                className={classNames("tr", rowClass?.(row.item), {
+                                    "tr-selected": isSelected(row.item)
+                                })}
                                 role="row"
                             >
                                 {checkboxSelectionOn && (
                                     <div
                                         key="cell_checkbox"
                                         className={classNames("td widget-datagrid-col-select", {
-                                            "td-borders": rowIndex === 0,
-                                            "td-selected": isSelected(row.item)
+                                            "td-borders": rowIndex === 0
                                         })}
                                     >
                                         <input
@@ -384,8 +384,7 @@ export function Table<T extends ObjectItem>(props: TableProps<T>): ReactElement
                                         key="cell_column_dropdown"
                                         aria-hidden
                                         className={classNames("td column-selector", {
-                                            "td-borders": rowIndex === 0,
-                                            "td-selected": isSelected(row.item)
+                                            "td-borders": rowIndex === 0
                                         })}
                                     />
                                 )}

packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap

@@ -1049,11 +1049,11 @@ exports[`Table with selection method checkbox render an extra column and add cla
           </div>
         </div>
         <div
-          class="tr"
+          class="tr tr-selected"
           role="row"
         >
           <div
-            class="td widget-datagrid-col-select td-borders td-selected"
+            class="td widget-datagrid-col-select td-borders"
           >
             <input
               checked=""
@@ -1062,18 +1062,18 @@ exports[`Table with selection method checkbox render an extra column and add cla
             />
           </div>
           <div
-            class="td td-borders td-selected"
+            class="td td-borders"
             role="cell"
           >
             Test
           </div>
         </div>
         <div
-          class="tr"
+          class="tr tr-selected"
           role="row"
         >
           <div
-            class="td widget-datagrid-col-select td-selected"
+            class="td widget-datagrid-col-select"
           >
             <input
               checked=""
@@ -1082,18 +1082,18 @@ exports[`Table with selection method checkbox render an extra column and add cla
             />
           </div>
           <div
-            class="td td-selected"
+            class="td"
             role="cell"
           >
             Test
           </div>
         </div>
         <div
-          class="tr"
+          class="tr tr-selected"
           role="row"
         >
           <div
-            class="td widget-datagrid-col-select td-selected"
+            class="td widget-datagrid-col-select"
           >
             <input
               checked=""
@@ -1102,7 +1102,7 @@ exports[`Table with selection method checkbox render an extra column and add cla
             />
           </div>
           <div
-            class="td td-selected"
+            class="td"
             role="cell"
           >
             Test
@@ -1208,35 +1208,35 @@ exports[`Table with selection method rowClick add class to each selected cell 1`
           </div>
         </div>
         <div
-          class="tr"
+          class="tr tr-selected"
           role="row"
         >
           <div
-            class="td td-borders clickable td-selected"
+            class="td td-borders clickable"
             role="button"
             tabindex="0"
           >
             Test
           </div>
         </div>
         <div
-          class="tr"
+          class="tr tr-selected"
           role="row"
         >
           <div
-            class="td clickable td-selected"
+            class="td clickable"
             role="button"
             tabindex="0"
           >
             Test
           </div>
         </div>
         <div
-          class="tr"
+          class="tr tr-selected"
           role="row"
         >
           <div
-            class="td clickable td-selected"
+            class="td clickable"
             role="button"
             tabindex="0"
           >