[Fade] Deprecate default prop `appear`

src/Dialog/Dialog.js

@@ -28,7 +28,7 @@ function Dialog({
   onClose
 }) {
   return (
-    <Fade mountOnEnter unmountOnExit in={open}>
+    <Fade appear={false} mountOnEnter unmountOnExit in={open}>
       <Modal
         className={classNames(classes.modal, {
           [classes.fullScreen]: fullScreen

src/Drawer/Drawer.js

@@ -48,7 +48,7 @@ class Drawer extends Component {
     return (
       <Fragment>
         {!disableOverlay && (
-          <Fade in={open} mountOnEnter unmountOnExit>
+          <Fade appear={false} in={open} mountOnEnter unmountOnExit>
             <Overlay
               onClick={this.handleOverlayClick}
               className={classes.overlay}

src/Fade/Fade.js

@@ -14,13 +14,15 @@ class Fade extends Component {
   constructor(props) {
     super(props);
 
-    // Permet de forcer le masquage lorsque le composant est monté avec `in` à false, sinon il s'affiche par défaut car
-    // aucune classe de transition n'est présente
+    // Permet de forcer le masquage lorsque le composant est monté avec `in`
+    // à `false`, sinon il s'affiche par défaut car aucune classe de
+    // transition n'est présente.
     this.firstOut = !props.in;
   }
 
   render() {
     const {
+      appear = false,
       children,
       classes,
       className,
@@ -36,6 +38,7 @@ class Fade extends Component {
 
     return (
       <CSSTransition
+        appear={appear}
         className={classNames(
           { [classes.hide]: forceOut },
           React.isValidElement(children) && children.props.className
@@ -43,6 +46,7 @@ class Fade extends Component {
         classNames={{
           appear: classes.enter,
           appearActive: classes.enterActive,
+          appearDone: classes.enterDone,
           enter: classes.enter,
           enterActive: classes.enterActive,
           enterDone: classes.enterDone,
@@ -65,7 +69,20 @@ Fade.propTypes = {
   /**
    * Déclenche une transition lorsque le composant est monté
    */
-  appear: PropTypes.bool,
+  appear: (props, propName, componentName, location, propFullName) => {
+    const componentNameSafe = componentName || '<<anonymous>>';
+    const propFullNameSafe = propFullName || propName;
+
+    if (typeof props[propName] === 'undefined') {
+      return new Error(
+        `The default value of ${location} \`${propFullNameSafe}\` of ` +
+          `\`${componentNameSafe}\` and will change to \`true\` in v2.0. ` +
+          `Explicitly set the value to turn off this warning.`
+      );
+    }
+
+    return null;
+  },
 
   /**
    * Contenu du composant, voir la documentation de
@@ -155,7 +172,6 @@ Fade.propTypes = {
 };
 
 Fade.defaultProps = {
-  appear: false,
   enableEnterTransition: true,
   enableExitTransition: true,
   mountOnEnter: false,

src/Fade/demos/DynamicProps.js

@@ -75,6 +75,7 @@ class DynamicProps extends Component {
           />
         </div>
         <Fade
+          appear={false}
           duration={{
             enter: durationEnter,
             exit: durationExit

src/Modal/demos/SimpleModal.js

@@ -60,7 +60,7 @@ function SimpleModal({ classes }) {
           <Button onClick={() => setOpen(true)}>Ouvrir modale</Button>
         </Col>
       </Row>
-      <Fade mountOnEnter unmountOnExit in={open}>
+      <Fade appear mountOnEnter unmountOnExit in={open}>
         <Modal open={open} onClose={() => setOpen(false)} />
       </Fade>
 
@@ -80,7 +80,7 @@ function SimpleModal({ classes }) {
           </Button>
         </Col>
       </Row>
-      <Fade mountOnEnter unmountOnExit in={openDialog}>
+      <Fade appear mountOnEnter unmountOnExit in={openDialog}>
         <Modal
           className={classes.root}
           open={openDialog}