feat: add collapsed-row/cell part name to expandable rows (#6694)

vaadin · Oct 26, 2023 · 126390b · 126390b
1 parent cf40acc
commit 126390b
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 1 deletion.
diff --git a/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js b/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js
@@ -271,7 +271,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     __isRowExpandable(row) {
       if (this.itemHasChildrenPath) {
         const item = row._item;
-        return item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item);
+        return !!(item && get(this.itemHasChildrenPath, item) && !this._isExpanded(item));
       }
     }
 

diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
@@ -812,6 +812,7 @@ export const GridMixin = (superClass) =>
     _updateRowStateParts(row, { expanded, selected, detailsOpened }) {
       updateBooleanRowStates(row, {
         expanded,
+        collapsed: this.__isRowExpandable(row),
         selected,
         'details-opened': detailsOpened,
       });

diff --git a/packages/grid/src/vaadin-grid.d.ts b/packages/grid/src/vaadin-grid.d.ts
@@ -156,6 +156,7 @@ export type GridDefaultItem = any;
  * Part name                  | Description
  * ---------------------------|----------------
  * `row`                      | Row in the internal table
+ * `collapsed-row`            | Collapsed row
  * `expanded-row`             | Expanded row
  * `selected-row`             | Selected row
  * `details-opened-row`       | Row with details open
@@ -185,6 +186,7 @@ export type GridDefaultItem = any;
  * `last-footer-row-cell`     | Cell in the last footer row
  * `loading-row-cell`         | Cell in a row that is waiting for data from data provider
  * `selected-row-cell`        | Cell in a selected row
+ * `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)

diff --git a/packages/grid/src/vaadin-grid.js b/packages/grid/src/vaadin-grid.js
@@ -156,6 +156,7 @@ registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
  * Part name                  | Description
  * ---------------------------|----------------
  * `row`                      | Row in the internal table
+ * `collapsed-row`            | Collapsed row
  * `expanded-row`             | Expanded row
  * `selected-row`             | Selected row
  * `details-opened-row`       | Row with details open
@@ -185,6 +186,7 @@ registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
  * `last-footer-row-cell`     | Cell in the last footer row
  * `loading-row-cell`         | Cell in a row that is waiting for data from data provider
  * `selected-row-cell`        | Cell in a selected row
+ * `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)

diff --git a/packages/grid/test/data-provider.common.js b/packages/grid/test/data-provider.common.js
@@ -402,19 +402,23 @@ describe('data provider', () => {
         it('should update row part attribute when expanding / collapsing', () => {
           expandIndex(grid, 0);
           expect(bodyRows[0].getAttribute('part')).to.contain('expanded-row');
+          expect(bodyRows[0].getAttribute('part')).to.not.contain('collapsed-row');
           collapseIndex(grid, 0);
           expect(bodyRows[0].getAttribute('part')).to.not.contain('expanded-row');
+          expect(bodyRows[0].getAttribute('part')).to.contain('collapsed-row');
         });
 
         it('should update body cells part attribute when expanding / collapsing', () => {
           const cells = getRowBodyCells(bodyRows[0]);
           expandIndex(grid, 0);
           cells.forEach((cell) => {
             expect(cell.getAttribute('part')).to.contain('expanded-row-cell');
+            expect(cell.getAttribute('part')).to.not.contain('collapsed-row-cell');
           });
           collapseIndex(grid, 0);
           cells.forEach((cell) => {
             expect(cell.getAttribute('part')).to.not.contain('expanded-row-cell');
+            expect(cell.getAttribute('part')).to.contain('collapsed-row-cell');
           });
         });
       });