feat: add parts to drag source row cells

packages/grid/src/vaadin-grid-drag-and-drop-mixin.js

@@ -181,6 +181,9 @@ export const DragAndDropMixin = (superClass) =>
           updateBooleanRowStates(row, { dragstart: false });
           this.style.setProperty('--_grid-drag-start-x', '');
           this.style.setProperty('--_grid-drag-start-y', '');
+          rows.forEach((row) => {
+            updateBooleanRowStates(row, { 'drag-source': true });
+          });
         });
 
         const event = new CustomEvent('grid-dragstart', {
@@ -202,6 +205,10 @@ export const DragAndDropMixin = (superClass) =>
       const event = new CustomEvent('grid-dragend');
       event.originalEvent = e;
       this.dispatchEvent(event);
+
+      iterateChildren(this.$.items, (row) => {
+        updateBooleanRowStates(row, { 'drag-source': false });
+      });
     }
 
     /** @private */

packages/grid/src/vaadin-grid.js

@@ -190,7 +190,8 @@ registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
  * `collapsed-row-cell`       | Cell in a collapsed row
  * `expanded-row-cell`        | Cell in an expanded row
  * `details-opened-row-cell`  | Cell in an row with details open
- * `dragstart-row-cell`       | Cell in a row that user started to drag (set for one frame)
+ * `dragstart-row-cell`       | Cell in the ghost image row, but not in for a source row
+ * `drag-source-row-cell`     | Cell in a source row, but not in the ghost image
  * `dragover-above-row-cell`  | Cell in a row that has another row dragged over above
  * `dragover-below-row-cell`  | Cell in a row that has another row dragged over below
  * `dragover-on-top-row-cell` | Cell in a row that has another row dragged over on top

packages/grid/test/drag-and-drop.common.js

@@ -254,6 +254,42 @@ describe('drag and drop', () => {
         });
       });
 
+      it('should add drag-source- part to all dragged rows', async () => {
+        grid.selectItem(grid.items[0]);
+        grid.selectItem(grid.items[1]);
+        fireDragStart();
+        await nextFrame();
+        for (const row of [...grid.$.items.children]) {
+          for (const cell of [...row.children]) {
+            expect(cell.getAttribute('part')).to.contain('drag-source-row-cell');
+          }
+        }
+      });
+
+      it('should add drag-source- part only to dragged rows', async () => {
+        fireDragStart();
+        let cells = getRowBodyCells(getRows(grid.$.items)[0]);
+        await nextFrame();
+        for (const cell of cells) {
+          expect(cell.getAttribute('part')).to.contain('drag-source-row-cell');
+        }
+        cells = getRowBodyCells(getRows(grid.$.items)[1]);
+        for (const cell of cells) {
+          expect(cell.getAttribute('part')).to.not.contain('drag-source-row-cell');
+        }
+      });
+
+      it('should remove drag-source- part from row when drag ends', async () => {
+        fireDragStart();
+        const row = getRows(grid.$.items)[0];
+        const cells = getRowBodyCells(row);
+        await nextFrame();
+        fireDragEnd();
+        for (const cell of cells) {
+          expect(cell.getAttribute('part')).to.not.contain('drag-source-row-cell');
+        }
+      });
+
       // The test only concerns Safari
       const isSafari = /^((?!chrome|android).)*safari/iu.test(navigator.userAgent);
       (isSafari ? it : it.skip)('should use top on Safari for drag image', async () => {