[Card] Fix CardActions spacing for different button components

packages/mui-material/src/AccordionActions/AccordionActions.js

@@ -34,9 +34,7 @@ const AccordionActionsRoot = styled('div', {
     {
       props: (props) => !props.disableSpacing,
       style: {
-        '& > :not(style) ~ :not(style)': {
-          marginLeft: 8,
-        },
+        gap: 8,
       },
     },
   ],

packages/mui-material/src/AccordionActions/AccordionActions.test.js

@@ -3,7 +3,6 @@ import { createRenderer } from '@mui/internal-test-utils';
 import AccordionActions, {
   accordionActionsClasses as classes,
 } from '@mui/material/AccordionActions';
-import Button from '@mui/material/Button';
 import { expect } from 'chai';
 import describeConformance from '../../test/describeConformance';
 
@@ -20,28 +19,13 @@ describe('<AccordionActions />', () => {
     skip: ['componentProp', 'componentsProp'],
   }));
 
-  it('should apply margin to all children but the first one', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      this.skip();
-    }
-
-    const { container } = render(
+  it('should render a children element', function test() {
+    const { queryByTestId } = render(
       <AccordionActions>
-        <Button data-testid="child-1">Agree</Button>
-        <Button data-testid="child-2" href="#">
-          Agree
-        </Button>
-        <Button data-testid="child-3" component="span">
-          Agree
-        </Button>
-        <div data-testid="child-4" />
+        <div data-testid="test-children" />
       </AccordionActions>,
     );
 
-    const children = container.querySelectorAll('[data-testid^="child-"]');
-    expect(children[0]).toHaveComputedStyle({ marginLeft: '0px' });
-    expect(children[1]).toHaveComputedStyle({ marginLeft: '8px' });
-    expect(children[2]).toHaveComputedStyle({ marginLeft: '8px' });
-    expect(children[3]).toHaveComputedStyle({ marginLeft: '8px' });
+    expect(queryByTestId('test-children')).not.to.equal(null);
   });
 });

packages/mui-material/src/CardActions/CardActions.js

@@ -33,9 +33,7 @@ const CardActionsRoot = styled('div', {
     {
       props: { disableSpacing: false },
       style: {
-        '& > :not(style) ~ :not(style)': {
-          marginLeft: 8,
-        },
+        gap: 8,
       },
     },
   ],

packages/mui-material/src/CardActions/CardActions.test.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
 import CardActions, { cardActionsClasses as classes } from '@mui/material/CardActions';
-import Button from '@mui/material/Button';
 import { expect } from 'chai';
 import describeConformance from '../../test/describeConformance';
 
@@ -18,28 +17,13 @@ describe('<CardActions />', () => {
     skip: ['componentProp', 'componentsProp'],
   }));
 
-  it('should apply margin to all children but the first one', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      this.skip();
-    }
-
-    const { container } = render(
+  it('should render a children element', function test() {
+    const { queryByTestId } = render(
       <CardActions>
-        <Button data-testid="child-1">Agree</Button>
-        <Button data-testid="child-2" href="#">
-          Agree
-        </Button>
-        <Button data-testid="child-3" component="span">
-          Agree
-        </Button>
-        <div data-testid="child-4" />
+        <div data-testid="test-children" />
       </CardActions>,
     );
 
-    const children = container.querySelectorAll('[data-testid^="child-"]');
-    expect(children[0]).toHaveComputedStyle({ marginLeft: '0px' });
-    expect(children[1]).toHaveComputedStyle({ marginLeft: '8px' });
-    expect(children[2]).toHaveComputedStyle({ marginLeft: '8px' });
-    expect(children[3]).toHaveComputedStyle({ marginLeft: '8px' });
+    expect(queryByTestId('test-children')).not.to.equal(null);
   });
 });

packages/mui-material/src/DialogActions/DialogActions.js

@@ -35,9 +35,7 @@ const DialogActionsRoot = styled('div', {
     {
       props: ({ ownerState }) => !ownerState.disableSpacing,
       style: {
-        '& > :not(style) ~ :not(style)': {
-          marginLeft: 8,
-        },
+        gap: 8,
       },
     },
   ],

packages/mui-material/src/DialogActions/DialogActions.test.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { createRenderer } from '@mui/internal-test-utils';
 import DialogActions, { dialogActionsClasses as classes } from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
 import { expect } from 'chai';
 import describeConformance from '../../test/describeConformance';
 
@@ -18,28 +17,13 @@ describe('<DialogActions />', () => {
     skip: ['componentProp', 'componentsProp'],
   }));
 
-  it('should apply margin to all children but the first one', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      this.skip();
-    }
-
-    const { container } = render(
+  it('should render a children element', function test() {
+    const { queryByTestId } = render(
       <DialogActions>
-        <Button data-testid="child-1">Agree</Button>
-        <Button data-testid="child-2" href="#">
-          Agree
-        </Button>
-        <Button data-testid="child-3" component="span">
-          Agree
-        </Button>
-        <div data-testid="child-4" />
+        <div data-testid="test-children" />
       </DialogActions>,
     );
 
-    const children = container.querySelectorAll('[data-testid^="child-"]');
-    expect(children[0]).toHaveComputedStyle({ marginLeft: '0px' });
-    expect(children[1]).toHaveComputedStyle({ marginLeft: '8px' });
-    expect(children[2]).toHaveComputedStyle({ marginLeft: '8px' });
-    expect(children[3]).toHaveComputedStyle({ marginLeft: '8px' });
+    expect(queryByTestId('test-children')).not.to.equal(null);
   });
 });

test/regressions/fixtures/Accordion/AccordionActionsGap.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AccordionActions, Button } from '@mui/material';
+
+function AccordionActionsGap() {
+  return (
+    <AccordionActions>
+      <Button data-testid="child-1">Agree</Button>
+      <Button data-testid="child-2" href="#">
+        Agree
+      </Button>
+      <Button data-testid="child-3" component="span">
+        Agree
+      </Button>
+      <div data-testid="child-4" />
+    </AccordionActions>
+  );
+}
+
+export default AccordionActionsGap;

test/regressions/fixtures/Card/CardActionsGap.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CardActions, Button } from '@mui/material';
+
+function CardActionsGap() {
+  return (
+    <CardActions>
+      <Button data-testid="child-1">Agree</Button>
+      <Button data-testid="child-2" href="#">
+        Agree
+      </Button>
+      <Button data-testid="child-3" component="span">
+        Agree
+      </Button>
+      <div data-testid="child-4" />
+    </CardActions>
+  );
+}
+
+export default CardActionsGap;

test/regressions/fixtures/Dialog/DialogActionsGap.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { DialogActions, Button } from '@mui/material';
+
+function DialogActionsGap() {
+  return (
+    <DialogActions>
+      <Button data-testid="child-1">Agree</Button>
+      <Button data-testid="child-2" href="#">
+        Agree
+      </Button>
+      <Button data-testid="child-3" component="span">
+        Agree
+      </Button>
+      <div data-testid="child-4" />
+    </DialogActions>
+  );
+}
+
+export default DialogActionsGap;