[DataGridPro] Fix detail panel not working with getRowSpacing prop (#…

…6858)
mui · Nov 15, 2022 · 0584390 · 0584390
1 parent 780771d
commit 0584390
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx
@@ -497,6 +497,22 @@ describe('<DataGridPro /> - Detail panel', () => {
     expect(getRow(0)).to.have.class(gridClasses['row--detailPanelExpanded']);
   });
 
+  // See https://github.com/mui/mui-x/issues/6694
+  it('should add a bottom margin to the expanded row when using `getRowSpacing`', function test() {
+    if (isJSDOM) {
+      this.skip(); // Doesn't work with mocked window.getComputedStyle
+    }
+
+    render(
+      <TestCase
+        getDetailPanelContent={({ id }) => (id === 0 ? <div /> : null)}
+        getRowSpacing={() => ({ top: 2, bottom: 2 })}
+      />,
+    );
+    fireEvent.click(screen.getAllByRole('button', { name: 'Expand' })[0]);
+    expect(getRow(0)).toHaveComputedStyle({ marginBottom: '502px' }); // 500px + 2px spacing
+  });
+
   describe('prop: onDetailPanelsExpandedRowIds', () => {
     it('shoull call when a row is expanded or closed', () => {
       const handleDetailPanelsExpandedRowIdsChange = spy();

diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -408,7 +408,13 @@ const GridRow = React.forwardRef<
 
   if (sizes?.spacingBottom) {
     const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-    style[property] = sizes.spacingBottom;
+    let propertyValue = style[property];
+    // avoid overriding existing value
+    if (typeof propertyValue !== 'number') {
+      propertyValue = parseInt(propertyValue || '0', 10);
+    }
+    propertyValue += sizes.spacingBottom;
+    style[property] = propertyValue;
   }
 
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);