[core] Standardize the component injection pattern

Author: oliviertassinari

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>

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'];
 }
 

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/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';
 }
 

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 {
       open,
       resumeHideDuration,
       SnackbarContentProps,
-      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}
@@ -252,7 +252,7 @@ class Snackbar extends React.Component {
             {children || (
               <SnackbarContent message={message} action={action} {...SnackbarContentProps} />
             )}
-          </TransitionProp>
+          </TransitionComponent>
         </div>
       </ClickAwayListener>
     );
@@ -370,7 +370,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.
@@ -391,7 +391,7 @@ Snackbar.defaultProps = {
     horizontal: 'center',
   },
   disableWindowBlurListener: false,
-  transition: Slide,
+  TransitionComponent: Slide,
   transitionDuration: {
     enter: duration.enteringScreen,
     exit: duration.leavingScreen,

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';
 }
 

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',
 };
 

packages/material-ui/src/Table/TablePagination.d.ts

@@ -13,7 +13,7 @@ export interface LabelDisplayedRowsArgs {
 
 export interface TablePaginationProps
   extends StandardProps<TablePaginationBaseProps, TablePaginationClassKey> {
-  Actions?: React.ReactType<TablePaginationBaseProps>;
+  ActionsComponent?: React.ReactType<TablePaginationBaseProps>;
   backIconButtonProps?: Partial<IconButtonProps>;
   component?: React.ReactType<TablePaginationBaseProps>;
   count: number;

packages/material-ui/src/Table/TablePagination.js

@@ -70,7 +70,7 @@ class TablePagination extends React.Component {
 
   render() {
     const {
-      Actions,
+      ActionsComponent,
       backIconButtonProps,
       classes,
       colSpan: colSpanProp,
@@ -134,7 +134,7 @@ class TablePagination extends React.Component {
               page,
             })}
           </Typography>
-          <Actions
+          <ActionsComponent
             className={classes.actions}
             backIconButtonProps={backIconButtonProps}
             count={count}
@@ -154,7 +154,7 @@ TablePagination.propTypes = {
    * The component used for displaying the actions.
    * Either a string to use a DOM element or a component.
    */
-  Actions: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  ActionsComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   /**
    * Properties applied to the back arrow `IconButton` component.
    */
@@ -222,7 +222,7 @@ TablePagination.propTypes = {
 };
 
 TablePagination.defaultProps = {
-  Actions: TablePaginationActions,
+  ActionsComponent: TablePaginationActions,
   component: TableCell,
   labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,
   labelRowsPerPage: 'Rows per page:',