[core] Standardize the component injection pattern (#11204)

Author: oliviertassinari

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/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}
+          TransitionComponent={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}
+          TransitionComponent={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}
+          TransitionComponent={Fade}
         >
           <MenuItem onClick={this.handleClose}>Profile</MenuItem>
           <MenuItem onClick={this.handleClose}>My account</MenuItem>

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,7 +43,7 @@ class DirectionSnackbar extends React.Component {
         <Snackbar
           open={this.state.open}
           onClose={this.handleClose}
-          transition={this.state.transition}
+          TransitionComponent={this.state.Transition}
           ContentProps={{
             'aria-describedby': 'message-id',
           }}

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

@@ -23,7 +23,7 @@ class FadeSnackbar extends React.Component {
         <Snackbar
           open={this.state.open}
           onClose={this.handleClose}
-          transition={Fade}
+          TransitionComponent={Fade}
           ContentProps={{
             'aria-describedby': 'message-id',
           }}

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

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

docs/src/pages/guides/api/api.md

@@ -70,13 +70,14 @@ const styles = {
 };
 ```
 
-### Internal components
-
-Internal components have:
-- their own flattened properties when these are key to the abstraction.
-- their own `xxxProps` property when users might need to tweak the internal render method's sub-components,
-for instance, exposing the `inputProps` and `InputProps` properties on components that use `Input` internally.
-  For instance, exposing a `value` property.
+### Nested components
+
+Nested components inside a component have:
+- their own flattened properties when these are key to the top level component abstraction.
+  For instance and `id` property for the `Input` component.
+- their own `xxxProps` property when users might need to tweak the internal render method's sub-components.
+  For instance, exposing the `inputProps` and `InputProps` properties on components that use `Input` internally.
+- their own `xxxComponent` property for performing component injection.
 - their own `xxxRef` property when user might need to perform imperative actions.
   For instance, exposing a `inputRef` property to access the native `input` on the `Input` component.
   It help answering the following question. [How can I access the DOM element?](/getting-started/faq#how-can-i-access-the-dom-element-)

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

@@ -98,7 +98,7 @@ class SpeedDial extends React.Component {
       onKeyDown,
       open,
       openIcon,
-      transition: Transition,
+      TransitionComponent,
       transitionDuration,
       TransitionProps,
       ...other
@@ -137,7 +137,12 @@ class SpeedDial extends React.Component {
 
     return (
       <div className={classNames(classes.root, classNameProp)} {...other}>
-        <Transition in={!hidden} timeout={transitionDuration} unmountOnExit {...TransitionProps}>
+        <TransitionComponent
+          in={!hidden}
+          timeout={transitionDuration}
+          unmountOnExit
+          {...TransitionProps}
+        >
           <Button
             variant="fab"
             color="primary"
@@ -155,7 +160,7 @@ class SpeedDial extends React.Component {
           >
             {icon()}
           </Button>
-        </Transition>
+        </TransitionComponent>
         <div
           id={`${id}-actions`}
           className={classNames(classes.actions, { [classes.actionsClosed]: !open })}
@@ -227,7 +232,7 @@ SpeedDial.propTypes = {
   /**
    * Transition component.
    */
-  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  TransitionComponent: 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.
@@ -244,7 +249,7 @@ SpeedDial.propTypes = {
 
 SpeedDial.defaultProps = {
   hidden: false,
-  transition: Zoom,
+  TransitionComponent: Zoom,
   transitionDuration: {
     enter: duration.enteringScreen,
     exit: duration.leavingScreen,

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

@@ -11,7 +11,7 @@ export interface DialogProps
   fullWidth?: boolean;
   maxWidth?: 'xs' | 'sm' | 'md' | false;
   PaperProps?: Partial<PaperProps>;
-  transition?: React.ReactType;
+  TransitionComponent?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'];
   TransitionProps?: TransitionProps;
 }

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

@@ -73,7 +73,7 @@ function Dialog(props) {
     onExiting,
     open,
     PaperProps,
-    transition: TransitionProp,
+    TransitionComponent,
     transitionDuration,
     TransitionProps,
     ...other
@@ -95,7 +95,7 @@ function Dialog(props) {
       role="dialog"
       {...other}
     >
-      <TransitionProp
+      <TransitionComponent
         appear
         in={open}
         timeout={transitionDuration}
@@ -119,7 +119,7 @@ function Dialog(props) {
         >
           {children}
         </Paper>
-      </TransitionProp>
+      </TransitionComponent>
     </Modal>
   );
 }
@@ -214,7 +214,7 @@ Dialog.propTypes = {
   /**
    * Transition component.
    */
-  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  TransitionComponent: 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,7 +235,7 @@ Dialog.defaultProps = {
   fullScreen: false,
   fullWidth: false,
   maxWidth: 'sm',
-  transition: Fade,
+  TransitionComponent: Fade,
   transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen },
 };
 

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

@@ -25,17 +25,17 @@ describe('<Dialog />', () => {
     assert.strictEqual(wrapper.type(), Modal);
   });
 
-  it('should render a Modal with transition', () => {
+  it('should render a Modal with TransitionComponent', () => {
     const Transition = props => <div className="cloned-element-class" {...props} />;
     const wrapper = shallow(
-      <Dialog {...defaultProps} transition={Transition}>
+      <Dialog {...defaultProps} TransitionComponent={Transition}>
         foo
       </Dialog>,
     );
     assert.strictEqual(
       wrapper.find(Transition).length,
       1,
-      'should include element given in transition',
+      'should include element given in TransitionComponent',
     );
   });
 

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

@@ -31,7 +31,7 @@ export interface PopoverProps
   PaperProps?: Partial<PaperProps>;
   role?: string;
   transformOrigin?: PopoverOrigin;
-  transition?: React.ReactType;
+  TransitionComponent?: React.ReactType;
   transitionDuration?: TransitionProps['timeout'] | 'auto';
   TransitionProps?: TransitionProps;
 }

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

@@ -290,7 +290,7 @@ class Popover extends React.Component {
       PaperProps,
       role,
       transformOrigin,
-      transition: TransitionProp,
+      TransitionComponent,
       transitionDuration,
       TransitionProps,
       ...other
@@ -304,7 +304,7 @@ class Popover extends React.Component {
 
     return (
       <Modal container={container} open={open} BackdropProps={{ invisible: true }} {...other}>
-        <TransitionProp
+        <TransitionComponent
           appear
           in={open}
           onEnter={this.handleEnter}
@@ -328,7 +328,7 @@ class Popover extends React.Component {
             <EventListener target="window" onResize={this.handleResize} />
             {children}
           </Paper>
-        </TransitionProp>
+        </TransitionComponent>
       </Modal>
     );
   }
@@ -472,7 +472,7 @@ Popover.propTypes = {
   /**
    * Transition component.
    */
-  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  TransitionComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
    * Set to 'auto' to automatically calculate transition time based on height.
    */
@@ -499,7 +499,7 @@ Popover.defaultProps = {
     vertical: 'top',
     horizontal: 'left',
   },
-  transition: Grow,
+  TransitionComponent: Grow,
   transitionDuration: 'auto',
 };
 

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

@@ -208,7 +208,7 @@ class Snackbar extends React.Component {
       onMouseLeave,
       open,
       resumeHideDuration,
-      transition: TransitionProp,
+      TransitionComponent,
       transitionDuration,
       TransitionProps,
       ...other
@@ -236,7 +236,7 @@ class Snackbar extends React.Component {
             onFocus={disableWindowBlurListener ? undefined : this.handleResume}
             onBlur={disableWindowBlurListener ? undefined : this.handlePause}
           />
-          <TransitionProp
+          <TransitionComponent
             appear
             in={open}
             onEnter={onEnter}
@@ -250,7 +250,7 @@ class Snackbar extends React.Component {
             {...TransitionProps}
           >
             {children || <SnackbarContent message={message} action={action} {...ContentProps} />}
-          </TransitionProp>
+          </TransitionComponent>
         </div>
       </ClickAwayListener>
     );
@@ -368,7 +368,7 @@ Snackbar.propTypes = {
   /**
    * Transition component.
    */
-  transition: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  TransitionComponent: 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.
@@ -389,7 +389,7 @@ Snackbar.defaultProps = {
     horizontal: 'center',
   },
   disableWindowBlurListener: false,
-  transition: Slide,
+  TransitionComponent: Slide,
   transitionDuration: {
     enter: duration.enteringScreen,
     exit: duration.leavingScreen,

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

@@ -362,14 +362,14 @@ describe('<Snackbar />', () => {
     });
   });
 
-  describe('prop: transition', () => {
-    it('should render a Snackbar with transition', () => {
+  describe('prop: TransitionComponent', () => {
+    it('should render a Snackbar with TransitionComponent', () => {
       const Transition = props => <div className="cloned-element-class" {...props} />;
-      const wrapper = shallow(<Snackbar open transition={Transition} />);
+      const wrapper = shallow(<Snackbar open TransitionComponent={Transition} />);
       assert.strictEqual(
         wrapper.find(Transition).length,
         1,
-        'should include element given in transition',
+        'should include element given in TransitionComponent',
       );
     });
   });

packages/material-ui/src/Stepper/StepContent.d.ts

@@ -12,7 +12,7 @@ export interface StepContentProps
   last?: boolean;
   optional?: boolean;
   orientation?: Orientation;
-  transition?: React.ComponentType<TransitionProps>;
+  TransitionComponent?: React.ComponentType<TransitionProps>;
   transitionDuration?: TransitionProps['timeout'] | 'auto';
   TransitionProps?: TransitionProps;
 }

packages/material-ui/src/Stepper/StepContent.js

@@ -32,7 +32,7 @@ function StepContent(props) {
     last,
     optional,
     orientation,
-    transition: Transition,
+    TransitionComponent,
     transitionDuration,
     TransitionProps,
     ...other
@@ -45,15 +45,15 @@ function StepContent(props) {
 
   return (
     <div className={classNames(classes.root, { [classes.last]: last }, className)} {...other}>
-      <Transition
+      <TransitionComponent
         in={active}
         className={classes.transition}
         timeout={transitionDuration}
         unmountOnExit
         {...TransitionProps}
       >
         {children}
-      </Transition>
+      </TransitionComponent>
     </div>
   );
 }
@@ -101,7 +101,7 @@ StepContent.propTypes = {
   /**
    * Collapse component.
    */
-  transition: PropTypes.func,
+  TransitionComponent: PropTypes.func,
   /**
    * Adjust the duration of the content expand transition.
    * Passed as a property to the transition component.
@@ -120,7 +120,7 @@ StepContent.propTypes = {
 };
 
 StepContent.defaultProps = {
-  transition: Collapse,
+  TransitionComponent: Collapse,
   transitionDuration: 'auto',
 };