[DialogActions][material] Apply margin-left when children is not of `…

…button` type (#39189)
mui · Sep 29, 2023 · 07730e8 · 07730e8
1 parent 2e9235b
commit 07730e8
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/mui-material/src/DialogActions/DialogActions.js b/packages/mui-material/src/DialogActions/DialogActions.js
@@ -32,7 +32,7 @@ const DialogActionsRoot = styled('div', {
   justifyContent: 'flex-end',
   flex: '0 0 auto',
   ...(!ownerState.disableSpacing && {
-    '& > :not(:first-of-type)': {
+    '& > :not(style) ~ :not(style)': {
       marginLeft: 8,
     },
   }),

diff --git a/packages/mui-material/src/DialogActions/DialogActions.test.js b/packages/mui-material/src/DialogActions/DialogActions.test.js
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { createRenderer, describeConformance } from '@mui-internal/test-utils';
 import DialogActions, { dialogActionsClasses as classes } from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import { expect } from 'chai';
 
 describe('<DialogActions />', () => {
   const { render } = createRenderer();
@@ -14,4 +16,29 @@ describe('<DialogActions />', () => {
     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(
+      <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>,
+    );
+
+    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' });
+  });
 });