[actions] Rename disableActionSpacing to disableSpacing

docs/src/pages/demos/cards/RecipeReviewCard.js

@@ -24,9 +24,6 @@ const useStyles = makeStyles(theme => ({
     height: 0,
     paddingTop: '56.25%', // 16:9
   },
-  actions: {
-    display: 'flex',
-  },
   expand: {
     transform: 'rotate(0deg)',
     marginLeft: 'auto',
@@ -77,7 +74,7 @@ function RecipeReviewCard() {
           guests. Add 1 cup of frozen peas along with the mussels, if you like.
         </Typography>
       </CardContent>
-      <CardActions className={classes.actions} disableActionSpacing>
+      <CardActions disableSpacing>
         <IconButton aria-label="Add to favorites">
           <FavoriteIcon />
         </IconButton>

docs/src/pages/demos/cards/RecipeReviewCard.tsx

@@ -25,9 +25,6 @@ const useStyles = makeStyles((theme: Theme) =>
       height: 0,
       paddingTop: '56.25%', // 16:9
     },
-    actions: {
-      display: 'flex',
-    },
     expand: {
       transform: 'rotate(0deg)',
       marginLeft: 'auto',
@@ -79,7 +76,7 @@ function RecipeReviewCard() {
           guests. Add 1 cup of frozen peas along with the mussels, if you like.
         </Typography>
       </CardContent>
-      <CardActions className={classes.actions} disableActionSpacing>
+      <CardActions disableSpacing>
         <IconButton aria-label="Add to favorites">
           <FavoriteIcon />
         </IconButton>

docs/src/pages/guides/migration-v3/migration-v3.md

@@ -237,9 +237,20 @@ You should be able to move the custom styles to the root class key.
 
 ### Dialog
 
-- [DialogActions] `action` CSS class is applied to root element instead of children if `disableActionSpacing={false}`.
+- [DialogActions] Rename the `disableActionSpacing` prop `disableSpacing`.
+- [DialogActions] Rename the `action` CSS class `spacing`.
 - [DialogContentText] Use typography variant `body1` instead of `subtitle1`.
 
+### Card
+
+- [CardActions] Rename the `disableActionSpacing` prop `disableSpacing`.
+- [CardActions] Remove the `disableActionSpacing` CSS class.
+- [CardActions] Rename the `action` CSS class `spacing`.
+
+### ExpansionPanel
+
+- [ExpansionPanelActions] Rename the `action` CSS class `spacing`.
+
 ### Selection controls
 
 - [Switch][Radio][Checkbox] Improve specification compliance.

packages/material-ui/src/CardActions/CardActions.d.ts

@@ -3,10 +3,10 @@ import { StandardProps } from '..';
 
 export interface CardActionsProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardActionsClassKey> {
-  disableActionSpacing?: boolean;
+  disableSpacing?: boolean;
 }
 
-export type CardActionsClassKey = 'root' | 'disableActionSpacing' | 'action';
+export type CardActionsClassKey = 'root' | 'spacing';
 
 declare const CardActions: React.ComponentType<CardActionsProps>;
 

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

@@ -2,42 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
 export const styles = {
   /* Styles applied to the root element. */
   root: {
     display: 'flex',
     alignItems: 'center',
-    boxSizing: 'border-box',
-    padding: '8px 4px',
-  },
-  /* Styles applied to the root element if `disableActionSpacing={true}`. */
-  disableActionSpacing: {
     padding: 8,
   },
-  /* Styles applied to the children. */
-  action: {
-    margin: '0 4px',
+  /* Styles applied to the root element if `disableSpacing={false}`. */
+  spacing: {
+    '& > * + *': {
+      marginLeft: 8,
+    },
   },
 };
 
 const CardActions = React.forwardRef(function CardActions(props, ref) {
-  const { disableActionSpacing, children, classes, className, ...other } = props;
+  const { disableSpacing, classes, className, ...other } = props;
 
   return (
     <div
-      className={clsx(
-        classes.root,
-        { [classes.disableActionSpacing]: disableActionSpacing },
-        className,
-      )}
+      className={clsx(classes.root, { [classes.spacing]: !disableSpacing }, className)}
       ref={ref}
       {...other}
-    >
-      {disableActionSpacing ? children : cloneChildrenWithClassName(children, classes.action)}
-    </div>
+    />
   );
 });
 
@@ -56,13 +46,13 @@ CardActions.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * If `true`, the card actions do not have additional margin.
+   * If `true`, the actions do not have additional margin.
    */
-  disableActionSpacing: PropTypes.bool,
+  disableSpacing: PropTypes.bool,
 };
 
 CardActions.defaultProps = {
-  disableActionSpacing: false,
+  disableSpacing: false,
 };
 
 export default withStyles(styles, { name: 'MuiCardActions' })(CardActions);

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

@@ -1,21 +1,13 @@
 import React from 'react';
-import { assert } from 'chai';
-import {
-  createMount,
-  createShallow,
-  describeConformance,
-  getClasses,
-} from '@material-ui/core/test-utils';
+import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils';
 import CardActions from './CardActions';
 
 describe('<CardActions />', () => {
   let mount;
-  let shallow;
   let classes;
 
   before(() => {
     mount = createMount();
-    shallow = createShallow({ dive: true });
     classes = getClasses(<CardActions />);
   });
 
@@ -30,32 +22,4 @@ describe('<CardActions />', () => {
     refInstanceof: window.HTMLDivElement,
     skip: ['componentProp'],
   }));
-
-  it('should pass the action class to children', () => {
-    const child3 = false;
-    const wrapper = shallow(
-      <CardActions>
-        <div id="child1" />
-        <div id="child2" />
-        {child3 && <div id="child3" />}
-      </CardActions>,
-    );
-
-    assert.strictEqual(wrapper.find('#child1').hasClass(classes.action), true);
-    assert.strictEqual(wrapper.find('#child2').hasClass(classes.action), true);
-  });
-
-  describe('prop: disableActionSpacing', () => {
-    it('does not pass the action class to the children', () => {
-      const wrapper = shallow(
-        <CardActions disableActionSpacing>
-          <div id="child1" />
-          <div id="child2" />
-        </CardActions>,
-      );
-
-      assert.strictEqual(wrapper.find('#child1').hasClass(classes.action), false);
-      assert.strictEqual(wrapper.find('#child2').hasClass(classes.action), false);
-    });
-  });
 });

packages/material-ui/src/DialogActions/DialogActions.d.ts

@@ -3,10 +3,10 @@ import { StandardProps } from '..';
 
 export interface DialogActionsProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogActionsClassKey> {
-  disableActionSpacing?: boolean;
+  disableSpacing?: boolean;
 }
 
-export type DialogActionsClassKey = 'root' | 'action';
+export type DialogActionsClassKey = 'root' | 'spacing';
 
 declare const DialogActions: React.ComponentType<DialogActionsProps>;
 

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

@@ -9,30 +9,23 @@ export const styles = {
   root: {
     display: 'flex',
     alignItems: 'center',
+    padding: 8,
     justifyContent: 'flex-end',
-    flex: '0 0 auto',
-    margin: 8,
   },
-  /* Styles applied to the root element if `disableActionSpacing={false}`. */
-  action: {
+  /* Styles applied to the root element if `disableSpacing={false}`. */
+  spacing: {
     '& > * + *': {
       marginLeft: 8,
     },
   },
 };
 
 const DialogActions = React.forwardRef(function DialogActions(props, ref) {
-  const { disableActionSpacing, classes, className, ...other } = props;
+  const { disableSpacing, classes, className, ...other } = props;
 
   return (
     <div
-      className={clsx(
-        classes.root,
-        {
-          [classes.action]: !disableActionSpacing,
-        },
-        className,
-      )}
+      className={clsx(classes.root, { [classes.spacing]: !disableSpacing }, className)}
       ref={ref}
       {...other}
     />
@@ -54,13 +47,13 @@ DialogActions.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * If `true`, the dialog actions do not have additional margin.
+   * If `true`, the actions do not have additional margin.
    */
-  disableActionSpacing: PropTypes.bool,
+  disableSpacing: PropTypes.bool,
 };
 
 DialogActions.defaultProps = {
-  disableActionSpacing: false,
+  disableSpacing: false,
 };
 
 export default withStyles(styles, { name: 'MuiDialogActions' })(DialogActions);

packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts

@@ -4,7 +4,7 @@ import { StandardProps } from '..';
 export interface ExpansionPanelActionsProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ExpansionPanelActionsClassKey> {}
 
-export type ExpansionPanelActionsClassKey = 'root' | 'action';
+export type ExpansionPanelActionsClassKey = 'root' | 'spacing';
 
 declare const ExpansionPanelActions: React.ComponentType<ExpansionPanelActionsProps>;
 

packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js

@@ -2,30 +2,33 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import { cloneChildrenWithClassName } from '../utils/reactHelpers';
 import '../Button'; // So we don't have any override priority issue.
 
 export const styles = {
   /* Styles applied to the root element. */
   root: {
     display: 'flex',
     alignItems: 'center',
+    padding: 8,
     justifyContent: 'flex-end',
-    padding: '16px 8px',
   },
-  /* Styles applied to the children. */
-  action: {
-    marginLeft: 8,
+  /* Styles applied to the root element if `disableSpacing={false}`. */
+  spacing: {
+    '& > * + *': {
+      marginLeft: 8,
+    },
   },
 };
 
 const ExpansionPanelActions = React.forwardRef(function ExpansionPanelActions(props, ref) {
-  const { children, classes, className, ...other } = props;
+  const { classes, className, disableSpacing, ...other } = props;
 
   return (
-    <div className={clsx(classes.root, className)} ref={ref} {...other}>
-      {cloneChildrenWithClassName(children, classes.action)}
-    </div>
+    <div
+      className={clsx(classes.root, { [classes.spacing]: !disableSpacing }, className)}
+      ref={ref}
+      {...other}
+    />
   );
 });
 
@@ -43,6 +46,14 @@ ExpansionPanelActions.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * If `true`, the actions do not have additional margin.
+   */
+  disableSpacing: PropTypes.bool,
+};
+
+ExpansionPanelActions.defaultProps = {
+  disableSpacing: false,
 };
 
 export default withStyles(styles, { name: 'MuiExpansionPanelActions' })(ExpansionPanelActions);

packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.test.js

@@ -1,21 +1,13 @@
 import React from 'react';
-import { assert } from 'chai';
-import {
-  createMount,
-  createShallow,
-  describeConformance,
-  getClasses,
-} from '@material-ui/core/test-utils';
+import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils';
 import ExpansionPanelActions from './ExpansionPanelActions';
 
 describe('<ExpansionPanelActions />', () => {
   let mount;
-  let shallow;
   let classes;
 
   before(() => {
     mount = createMount();
-    shallow = createShallow({ dive: true });
     classes = getClasses(<ExpansionPanelActions>foo</ExpansionPanelActions>);
   });
 
@@ -30,31 +22,4 @@ describe('<ExpansionPanelActions />', () => {
     refInstanceof: window.HTMLDivElement,
     skip: ['componentProp'],
   }));
-
-  it('should render children with the button class wrapped in a div with the action class', () => {
-    const wrapper = shallow(
-      <ExpansionPanelActions>
-        <button type="submit" className="woofExpansionPanelActions">
-          Hello
-        </button>
-      </ExpansionPanelActions>,
-    );
-    const button = wrapper.childAt(0);
-    assert.strictEqual(button.hasClass(classes.action), true);
-    assert.strictEqual(button.type(), 'button');
-    assert.strictEqual(button.hasClass('woofExpansionPanelActions'), true);
-  });
-
-  it('should render a valid children', () => {
-    const wrapper = shallow(
-      <ExpansionPanelActions>
-        <button type="submit">Hello</button>
-        {null}
-      </ExpansionPanelActions>,
-    );
-
-    const button = wrapper.childAt(0);
-    assert.strictEqual(button.hasClass(classes.action), true);
-    assert.strictEqual(button.type(), 'button');
-  });
 });

packages/material-ui/src/utils/reactHelpers.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { StandardProps } from '../';
 
-export function cloneChildrenWithClassName<T>(children: React.ReactNode, className: string): T[];
-
 export type NamedMuiComponent = React.ComponentType & { muiName: string };
 
 export interface NamedMuiElement {