[core] Add a components property

ROADMAP.md

@@ -115,8 +115,6 @@ that **are needed for the stable version**:
 +import Button from '@material-ui/core/Button';
 ```
 
-- [ ] Look into the Render Props API over the Component Injection API. This one is an area of investigation. For instance, there is potential for simplifying the customization of the transitions.
-
 These breaking changes will be spread into different releases over the next few months to make the upgrade path as smooth as possible.
 Not only does the Material-UI project have to be upgraded for each breaking change,
 but we also have to upgrade our own projects.

docs/src/modules/components/AppWrapper.js

@@ -29,29 +29,6 @@ function uiThemeSideEffect(uiTheme) {
 }
 
 class AppWrapper extends React.Component {
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (typeof prevState.pageContext === 'undefined') {
-      return {
-        prevProps: nextProps,
-        pageContext: nextProps.pageContext || getPageContext(),
-      };
-    }
-
-    const { prevProps } = prevState;
-
-    if (
-      nextProps.uiTheme.paletteType !== prevProps.uiTheme.paletteType ||
-      nextProps.uiTheme.direction !== prevProps.uiTheme.direction
-    ) {
-      return {
-        prevProps: nextProps,
-        pageContext: updatePageContext(nextProps.uiTheme),
-      };
-    }
-
-    return null;
-  }
-
   state = {};
 
   componentDidMount() {
@@ -96,6 +73,29 @@ class AppWrapper extends React.Component {
   }
 }
 
+AppWrapper.getDerivedStateFromProps = (nextProps, prevState) => {
+  if (typeof prevState.pageContext === 'undefined') {
+    return {
+      prevProps: nextProps,
+      pageContext: nextProps.pageContext || getPageContext(),
+    };
+  }
+
+  const { prevProps } = prevState;
+
+  if (
+    nextProps.uiTheme.paletteType !== prevProps.uiTheme.paletteType ||
+    nextProps.uiTheme.direction !== prevProps.uiTheme.direction
+  ) {
+    return {
+      prevProps: nextProps,
+      pageContext: updatePageContext(nextProps.uiTheme),
+    };
+  }
+
+  return null;
+};
+
 AppWrapper.propTypes = {
   children: PropTypes.node.isRequired,
   pageContext: PropTypes.object,

docs/src/modules/components/Notifications.js

@@ -75,7 +75,7 @@ class Notifications extends React.Component {
       <Snackbar
         key={message.id}
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        SnackbarContentProps={{ 'aria-describedby': 'notification-message' }}
+        ContentProps={{ 'aria-describedby': 'notification-message' }}
         message={
           <span id="notification-message" dangerouslySetInnerHTML={{ __html: message.text }} />
         }

docs/src/pages/demos/dialogs/AlertDialogSlide.js

@@ -31,7 +31,7 @@ class AlertDialogSlide extends React.Component {
         <Button onClick={this.handleClickOpen}>Slide in alert dialog</Button>
         <Dialog
           open={this.state.open}
-          transition={Transition}
+          components={{ Transition }}
           keepMounted
           onClose={this.handleClose}
           aria-labelledby="alert-dialog-slide-title"

docs/src/pages/demos/dialogs/FullScreenDialog.js

@@ -47,7 +47,7 @@ class FullScreenDialog extends React.Component {
           fullScreen
           open={this.state.open}
           onClose={this.handleClose}
-          transition={Transition}
+          components={{ Transition }}
         >
           <AppBar className={classes.appBar}>
             <Toolbar>

docs/src/pages/demos/menus/FadeMenu.js

@@ -33,7 +33,7 @@ class FadeMenu extends React.Component {
           anchorEl={anchorEl}
           open={Boolean(anchorEl)}
           onClose={this.handleClose}
-          transition={Fade}
+          components={{ Transition: Fade }}
         >
           <MenuItem onClick={this.handleClose}>Profile</MenuItem>
           <MenuItem onClick={this.handleClose}>My account</MenuItem>

docs/src/pages/demos/snackbars/ConsecutiveSnackbars.js

@@ -73,7 +73,7 @@ class ConsecutiveSnackbars extends React.Component {
           autoHideDuration={6000}
           onClose={this.handleClose}
           onExited={this.handleExited}
-          SnackbarContentProps={{
+          ContentProps={{
             'aria-describedby': 'message-id',
           }}
           message={<span id="message-id">{message}</span>}

docs/src/pages/demos/snackbars/DirectionSnackbar.js

@@ -22,11 +22,11 @@ function TransitionDown(props) {
 class DirectionSnackbar extends React.Component {
   state = {
     open: false,
-    transition: null,
+    Transition: null,
   };
 
-  handleClick = transition => () => {
-    this.setState({ open: true, transition });
+  handleClick = Transition => () => {
+    this.setState({ open: true, Transition });
   };
 
   handleClose = () => {
@@ -43,8 +43,8 @@ class DirectionSnackbar extends React.Component {
         <Snackbar
           open={this.state.open}
           onClose={this.handleClose}
-          transition={this.state.transition}
-          SnackbarContentProps={{
+          components={{ Transition: this.state.Transition }}
+          ContentProps={{
             'aria-describedby': 'message-id',
           }}
           message={<span id="message-id">I love snacks</span>}

docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js

@@ -96,7 +96,7 @@ class FabIntegrationSnackbar extends React.Component {
             open={open}
             autoHideDuration={4000}
             onClose={this.handleClose}
-            SnackbarContentProps={{
+            ContentProps={{
               'aria-describedby': 'snackbar-fab-message-id',
               className: classes.snackbarContent,
             }}

docs/src/pages/demos/snackbars/FadeSnackbar.js

@@ -23,8 +23,8 @@ class FadeSnackbar extends React.Component {
         <Snackbar
           open={this.state.open}
           onClose={this.handleClose}
-          transition={Fade}
-          SnackbarContentProps={{
+          components={{ Transition: Fade }}
+          ContentProps={{
             'aria-describedby': 'message-id',
           }}
           message={<span id="message-id">I love snacks</span>}

docs/src/pages/demos/snackbars/PositionedSnackbar.js

@@ -43,7 +43,7 @@ class PositionedSnackbar extends React.Component {
           anchorOrigin={{ vertical, horizontal }}
           open={open}
           onClose={this.handleClose}
-          SnackbarContentProps={{
+          ContentProps={{
             'aria-describedby': 'message-id',
           }}
           message={<span id="message-id">I love snacks</span>}

docs/src/pages/demos/snackbars/SimpleSnackbar.js

@@ -43,7 +43,7 @@ class SimpleSnackbar extends React.Component {
           open={this.state.open}
           autoHideDuration={6000}
           onClose={this.handleClose}
-          SnackbarContentProps={{
+          ContentProps={{
             'aria-describedby': 'message-id',
           }}
           message={<span id="message-id">Note archived</span>}

docs/src/pages/demos/tables/CustomPaginationActionsTable.js

@@ -180,7 +180,9 @@ class CustomPaginationActionsTable extends React.Component {
                   page={page}
                   onChangePage={this.handleChangePage}
                   onChangeRowsPerPage={this.handleChangeRowsPerPage}
-                  Actions={TablePaginationActionsWrapped}
+                  components={{
+                    Actions: TablePaginationActionsWrapped,
+                  }}
                 />
               </TableRow>
             </TableFooter>

packages/material-ui-lab/src/SpeedDial/SpeedDial.js

@@ -5,9 +5,10 @@ import ReactDOM from 'react-dom';
 import keycode from 'keycode';
 import { withStyles } from 'material-ui/styles';
 import Zoom from 'material-ui/transitions/Zoom';
-import { duration } from 'material-ui/styles/transitions';
 import Button from 'material-ui/Button';
 import { isMuiElement } from 'material-ui/utils/reactHelpers';
+import { duration } from 'material-ui/styles/transitions';
+import { getComponents } from 'material-ui/utils/helpers';
 
 const styles = theme => ({
   root: {
@@ -25,6 +26,10 @@ const styles = theme => ({
   },
 });
 
+const defaultComponents = {
+  Transition: Zoom,
+};
+
 class SpeedDial extends React.Component {
   state = {
     nextKey: null,
@@ -91,18 +96,21 @@ class SpeedDial extends React.Component {
       children: childrenProp,
       classes,
       className: classNameProp,
+      components: componentsProp,
       hidden,
       icon: iconProp,
       onClick,
       onClose,
       onKeyDown,
       open,
       openIcon,
-      transition: Transition,
       transitionDuration,
+      TransitionProps,
       ...other
     } = this.props;
 
+    const components = getComponents(defaultComponents, this.props);
+
     // Filter the label for valid id characters.
     const id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
 
@@ -136,7 +144,13 @@ class SpeedDial extends React.Component {
 
     return (
       <div className={classNames(classes.root, classNameProp)} {...other}>
-        <Transition in={!hidden} timeout={transitionDuration} mountOnEnter unmountOnExit>
+        <components.Transition
+          in={!hidden}
+          timeout={transitionDuration}
+          mountOnEnter
+          unmountOnExit
+          {...TransitionProps}
+        >
           <Button
             variant="fab"
             color="primary"
@@ -154,7 +168,7 @@ class SpeedDial extends React.Component {
           >
             {icon()}
           </Button>
-        </Transition>
+        </components.Transition>
         <div
           id={`${id}-actions`}
           className={classNames(classes.actions, { [classes.actionsClosed]: !open })}
@@ -191,6 +205,12 @@ SpeedDial.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The components injection property.
+   */
+  components: PropTypes.shape({
+    Transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  }),
   /**
    * If `true`, the SpeedDial will be hidden.
    */
@@ -223,10 +243,6 @@ SpeedDial.propTypes = {
    * The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open.
    */
   openIcon: PropTypes.node,
-  /**
-   * Transition component.
-   */
-  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -235,15 +251,16 @@ SpeedDial.propTypes = {
     PropTypes.number,
     PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
   ]),
+  /**
+   * Properties applied to the `Transition` element.
+   */
+  TransitionProps: PropTypes.object,
 };
 
 SpeedDial.defaultProps = {
+  components: defaultComponents,
+  transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
   hidden: false,
-  transition: Zoom,
-  transitionDuration: {
-    enter: duration.enteringScreen,
-    exit: duration.leavingScreen,
-  },
 };
 
 export default withStyles(styles)(SpeedDial);

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

@@ -50,28 +50,6 @@ export const styles = {
  * It contains a load of style reset and some focus/ripple logic.
  */
 class ButtonBase extends React.Component {
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (typeof prevState.focusVisible === 'undefined') {
-      return {
-        focusVisible: false,
-        lastDisabled: nextProps.disabled,
-      };
-    }
-
-    // The blur won't fire when the disabled state is set on a focused input.
-    // We need to book keep the focused state manually.
-    if (!prevState.prevState && nextProps.disabled && prevState.focusVisible) {
-      return {
-        focusVisible: false,
-        lastDisabled: nextProps.disabled,
-      };
-    }
-
-    return {
-      lastDisabled: nextProps.disabled,
-    };
-  }
-
   state = {};
 
   componentDidMount() {
@@ -295,6 +273,28 @@ class ButtonBase extends React.Component {
   }
 }
 
+ButtonBase.getDerivedStateFromProps = (nextProps, prevState) => {
+  if (typeof prevState.focusVisible === 'undefined') {
+    return {
+      focusVisible: false,
+      lastDisabled: nextProps.disabled,
+    };
+  }
+
+  // The blur won't fire when the disabled state is set on a focused input.
+  // We need to book keep the focused state manually.
+  if (!prevState.prevState && nextProps.disabled && prevState.focusVisible) {
+    return {
+      focusVisible: false,
+      lastDisabled: nextProps.disabled,
+    };
+  }
+
+  return {
+    lastDisabled: nextProps.disabled,
+  };
+};
+
 ButtonBase.propTypes = {
   /**
    * Use that property to pass a ref callback to the native button component.

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

@@ -28,7 +28,8 @@ export const styles = theme => {
       transition: theme.transitions.create(['background-color', 'box-shadow']),
       // label will inherit this from root, then `clickable` class overrides this for both
       cursor: 'default',
-      outline: 'none', // No outline on focused element in Chrome (as triggered by tabIndex prop)
+      // We disable the focus ring for mouse, touch and keyboard users.
+      outline: 'none',
       border: 'none', // Remove `button` border
       padding: 0, // Remove `button` padding
     },