[material-ui][CardActions][DialogActions] Apply margin for all children except for 1st child (#40168)

Author: sai6855

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

@@ -31,7 +31,7 @@ const AccordionActionsRoot = styled('div', {
   padding: 8,
   justifyContent: 'flex-end',
   ...(!ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8,
     },
   }),

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

@@ -3,6 +3,8 @@ import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import AccordionActions, {
   accordionActionsClasses as classes,
 } from '@mui/material/AccordionActions';
+import Button from '@mui/material/Button';
+import { expect } from 'chai';
 
 describe('<AccordionActions />', () => {
   const { render } = createRenderer();
@@ -16,4 +18,29 @@ describe('<AccordionActions />', () => {
     testVariantProps: { disableSpacing: true },
     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(
+      <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>,
+    );
+
+    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' });
+  });
 });

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

@@ -30,7 +30,7 @@ const CardActionsRoot = styled('div', {
   alignItems: 'center',
   padding: 8,
   ...(!ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8,
     },
   }),

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import CardActions, { cardActionsClasses as classes } from '@mui/material/CardActions';
+import Button from '@mui/material/Button';
+import { expect } from 'chai';
 
 describe('<CardActions />', () => {
   const { render } = createRenderer();
@@ -14,4 +16,29 @@ describe('<CardActions />', () => {
     testVariantProps: { disableSpacing: true },
     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(
+      <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>,
+    );
+
+    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' });
+  });
 });