Merge pull request #4607 from oliviertassinari/react-v15.2.0-warnings

[Core] Fix invalid props being passed

docs/src/app/components/pages/customization/Themes.js

@@ -253,8 +253,8 @@ class ThemesPage extends Component {
               open={this.state.drawerOpen} docked={false}
               onRequestChange={this.handleRequestChangeDrawer}
             >
-              <MenuItem index={0}>Menu Item</MenuItem>
-              <MenuItem index={1}>Menu Item 2</MenuItem>
+              <MenuItem>Menu Item</MenuItem>
+              <MenuItem>Menu Item 2</MenuItem>
             </Drawer>
           </div>
         </div>

src/AutoComplete/AutoComplete.js

@@ -163,7 +163,7 @@ class AutoComplete extends Component {
     /**
      * If true, will update when focus event triggers.
      */
-    triggerUpdateOnFocus: deprecated(PropTypes.bool, 'Instead, use openOnFocus'),
+    triggerUpdateOnFocus: deprecated(PropTypes.bool, 'Instead, use openOnFocus. It will be removed with v0.16.0.'),
   };
 
   static defaultProps = {
@@ -239,15 +239,16 @@ class AutoComplete extends Component {
   };
 
   setValue(textValue) {
-    warning(false, 'setValue() is deprecated, use the searchText property.');
+    warning(false, `setValue() is deprecated, use the searchText property.
+      It will be removed with v0.16.0.`);
 
     this.setState({
       searchText: textValue,
     });
   }
 
   getValue() {
-    warning(false, 'getValue() is deprecated.');
+    warning(false, 'getValue() is deprecated. It will be removed with v0.16.0.');
 
     return this.state.searchText;
   }
@@ -393,7 +394,7 @@ class AutoComplete extends Component {
       onNewRequest, // eslint-disable-line no-unused-vars
       onUpdateInput, // eslint-disable-line no-unused-vars
       openOnFocus, // eslint-disable-line no-unused-vars
-      searchText: searchTextProps, // eslint-disable-line no-unused-vars
+      searchText: searchTextProp, // eslint-disable-line no-unused-vars
       ...other,
     } = this.props;
 

src/Badge/Badge.spec.js

@@ -35,15 +35,15 @@ describe('<Badge />', () => {
 
   it('renders children by default', () => {
     const wrapper = shallowWithContext(
-      <Badge>{testChildren}</Badge>
+      <Badge badgeContent={10}>{testChildren}</Badge>
     );
 
     assert.ok(wrapper.contains(testChildren), 'should contain the children');
   });
 
   it('renders children and className', () => {
     const wrapper = shallowWithContext(
-      <Badge className="testClassName">{testChildren}</Badge>
+      <Badge badgeContent={10} className="testClassName">{testChildren}</Badge>
     );
 
     assert.ok(wrapper.contains(testChildren), 'should contain the children');
@@ -79,7 +79,7 @@ describe('<Badge />', () => {
       backgroundColor: 'red',
     };
     const wrapper = shallowWithContext(
-      <Badge style={style}>{testChildren}</Badge>
+      <Badge badgeContent={10} style={style}>{testChildren}</Badge>
     );
 
     assert.ok(wrapper.contains(testChildren), 'should contain the children');

src/Card/Card.js

@@ -85,7 +85,7 @@ class Card extends Component {
       containerStyle,
       children,
       expandable, // eslint-disable-line no-unused-vars
-      expanded: expandedProps, // eslint-disable-line no-unused-vars
+      expanded: expandedProp, // eslint-disable-line no-unused-vars
       initiallyExpanded, // eslint-disable-line no-unused-vars
       onExpandChange, // eslint-disable-line no-unused-vars
       ...other,

src/Card/CardHeader.js

@@ -105,7 +105,7 @@ class CardHeader extends Component {
   render() {
     const {
       actAsExpander, // eslint-disable-line no-unused-vars
-      avatar: avatarProps,
+      avatar: avatarProp,
       children,
       showExpandableButton, // eslint-disable-line no-unused-vars
       style,
@@ -120,14 +120,14 @@ class CardHeader extends Component {
     const {prepareStyles} = this.context.muiTheme;
     const styles = getStyles(this.props, this.context);
 
-    let avatar = avatarProps;
+    let avatar = avatarProp;
 
-    if (isValidElement(avatarProps)) {
+    if (isValidElement(avatarProp)) {
       avatar = React.cloneElement(avatar, {
         style: Object.assign(styles.avatar, avatar.props.style),
       });
     } else if (avatar !== null) {
-      avatar = <Avatar src={avatarProps} style={styles.avatar} />;
+      avatar = <Avatar src={avatarProp} style={styles.avatar} />;
     }
 
     return (

src/Checkbox/Checkbox.js

@@ -109,7 +109,7 @@ class Checkbox extends Component {
      * This is useful to create icon toggles.
      */
     unCheckedIcon: deprecated(PropTypes.element,
-      'Use uncheckedIcon instead.'),
+      'Use uncheckedIcon instead. It will be removed with v0.16.0.'),
     /**
      * The SvgIcon to use for the unchecked state.
      * This is useful to create icon toggles.

src/DatePicker/DatePicker.js

@@ -137,7 +137,8 @@ class DatePicker extends Component {
     /**
      * Wordings used inside the button of the dialog.
      */
-    wordings: deprecated(PropTypes.object, 'Instead, use `cancelLabel` and `okLabel`.'),
+    wordings: deprecated(PropTypes.object, `Instead, use \`cancelLabel\` and \`okLabel\`.
+      It will be removed with v0.16.0.`),
   };
 
   static defaultProps = {
@@ -269,6 +270,7 @@ class DatePicker extends Component {
       dialogContainerStyle,
       disableYearSelection,
       firstDayOfWeek,
+      formatDate: formatDateProp,
       locale,
       maxDate,
       minDate,
@@ -286,7 +288,7 @@ class DatePicker extends Component {
     } = this.props;
 
     const {prepareStyles} = this.context.muiTheme;
-    const formatDate = this.props.formatDate || this.formatDate;
+    const formatDate = formatDateProp || this.formatDate;
 
     return (
       <div className={className} style={prepareStyles(Object.assign({}, style))}>

src/DatePicker/DatePickerDialog.js

@@ -33,10 +33,10 @@ class DatePickerDialog extends Component {
 
   static defaultProps = {
     DateTimeFormat: dateTimeFormat,
+    cancelLabel: 'Cancel',
     container: 'dialog',
     locale: 'en-US',
     okLabel: 'OK',
-    cancelLabel: 'Cancel',
   };
 
   static contextTypes = {
@@ -48,14 +48,20 @@ class DatePickerDialog extends Component {
   };
 
   show = () => {
-    if (this.props.onShow && !this.state.open) this.props.onShow();
+    if (this.props.onShow && !this.state.open) {
+      this.props.onShow();
+    }
+
     this.setState({
       open: true,
     });
   };
 
   dismiss = () => {
-    if (this.props.onDismiss && this.state.open) this.props.onDismiss();
+    if (this.props.onDismiss && this.state.open) {
+      this.props.onDismiss();
+    }
+
     this.setState({
       open: false,
     });
@@ -96,6 +102,7 @@ class DatePickerDialog extends Component {
   render() {
     const {
       DateTimeFormat,
+      autoOk,
       cancelLabel,
       container,
       containerStyle,
@@ -108,6 +115,8 @@ class DatePickerDialog extends Component {
       mode,
       okLabel,
       onAccept, // eslint-disable-line no-unused-vars
+      onDismiss, // eslint-disable-line no-unused-vars
+      onShow, // eslint-disable-line no-unused-vars
       shouldDisableDate,
       style, // eslint-disable-line no-unused-vars
       wordings,
@@ -147,7 +156,7 @@ class DatePickerDialog extends Component {
             onKeyUp={this.handleWindowKeyUp}
           />
           <Calendar
-            autoOk={this.props.autoOk}
+            autoOk={autoOk}
             DateTimeFormat={DateTimeFormat}
             cancelLabel={cancelLabel}
             disableYearSelection={disableYearSelection}

src/DatePicker/DayButton.js

@@ -107,7 +107,6 @@ class DayButton extends Component {
         disabled={this.props.disabled}
         disableFocusRipple={true}
         disableTouchRipple={true}
-        hoverStyle={styles.hover}
         onKeyboardFocus={this.handleKeyboardFocus}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}

src/DropDownMenu/DropDownMenu.js

@@ -246,7 +246,7 @@ class DropDownMenu extends Component {
       labelStyle,
       listStyle,
       maxHeight,
-      menuStyle: menuStyleProps,
+      menuStyle: menuStyleProp,
       openImmediately, // eslint-disable-line no-unused-vars
       style,
       underlineStyle,
@@ -274,9 +274,9 @@ class DropDownMenu extends Component {
     if (anchorEl && !autoWidth) {
       menuStyle = Object.assign({
         width: anchorEl.clientWidth,
-      }, menuStyleProps);
+      }, menuStyleProp);
     } else {
-      menuStyle = menuStyleProps;
+      menuStyle = menuStyleProp;
     }
 
     return (

src/IconButton/IconButton.js

@@ -189,15 +189,15 @@ class IconButton extends Component {
       iconClassName,
       onKeyboardFocus, // eslint-disable-line no-unused-vars
       tooltip,
-      tooltipPosition: tooltipPositionProps,
+      tooltipPosition: tooltipPositionProp,
       touch,
       iconStyle,
       ...other,
     } = this.props;
     let fonticon;
 
     const styles = getStyles(this.props, this.context);
-    const tooltipPosition = tooltipPositionProps.split('-');
+    const tooltipPosition = tooltipPositionProp.split('-');
 
     const tooltipElement = tooltip ? (
       <Tooltip

src/IconMenu/IconMenu.js

@@ -127,8 +127,8 @@ class IconMenu extends Component {
     onMouseLeave: () => {},
     onMouseEnter: () => {},
     onMouseUp: () => {},
-    onTouchTap: () => {},
     onRequestChange: () => {},
+    onTouchTap: () => {},
     targetOrigin: {
       vertical: 'top',
       horizontal: 'left',
@@ -233,10 +233,12 @@ class IconMenu extends Component {
       onMouseLeave,
       onMouseEnter,
       onMouseUp,
+      onRequestChange, // eslint-disable-line no-unused-vars
       onTouchTap,
       menuStyle,
       style,
       targetOrigin,
+      touchTapCloseDelay, // eslint-disable-line no-unused-vars
       useLayerForClickAway,
       ...other,
     } = this.props;
@@ -270,7 +272,6 @@ class IconMenu extends Component {
     const menu = (
       <Menu
         {...other}
-        animateOpen={true}
         initiallyKeyboardFocused={this.state.menuInitiallyKeyboardFocused}
         onEscKeyDown={this.handleEscKeyDownMenu}
         onItemTouchTap={this.handleItemTouchTap}

src/List/List.js

@@ -15,7 +15,7 @@ class List extends Component {
      * If true, the subheader will be indented by 72px.
      */
     insetSubheader: deprecated(PropTypes.bool,
-      'Refer to the `subheader` property.'),
+      'Refer to the `subheader` property. It will be removed with v0.16.0.'),
     /**
      * Override the inline-styles of the root element.
      */
@@ -24,12 +24,12 @@ class List extends Component {
      * The subheader string that will be displayed at the top of the list.
      */
     subheader: deprecated(PropTypes.node,
-      'Instead, nest the `Subheader` component directly inside the `List`.'),
+      'Instead, nest the `Subheader` component directly inside the `List`. It will be removed with v0.16.0.'),
     /**
      * Override the inline-styles of the subheader element.
      */
     subheaderStyle: deprecated(PropTypes.object,
-      'Refer to the `subheader` property.'),
+      'Refer to the `subheader` property. It will be removed with v0.16.0.'),
     /**
      * @ignore
      * ** Breaking change ** List no longer supports `zDepth`. Instead, wrap it in `Paper`
@@ -54,7 +54,7 @@ class List extends Component {
     } = this.props;
 
     warning((typeof zDepth === 'undefined'), 'List no longer supports `zDepth`. Instead, wrap it in `Paper` ' +
-        'or another component that provides zDepth.');
+        'or another component that provides zDepth. It will be removed with v0.16.0.');
 
     let hasSubheader = false;
 

src/List/MakeSelectable.js

@@ -12,7 +12,8 @@ export const MakeSelectable = (Component) => {
       valueLink: deprecated(PropTypes.shape({
         value: PropTypes.any,
         requestChange: PropTypes.func,
-      }), 'This property is deprecated due to his low popularity. Use the value and onChange property.'),
+      }), `This property is deprecated due to his low popularity. Use the value and onChange property.
+        It will be removed with v0.16.0.`),
     };
 
     static contextTypes = {

src/Menu/Menu.js

@@ -70,7 +70,8 @@ class Menu extends Component {
      * is added to the DOM. In order for transitions to
      * work, wrap the menu inside a `ReactTransitionGroup`.
      */
-    animated: deprecated(PropTypes.bool, 'Instead, use a [Popover](/#/components/popover).'),
+    animated: deprecated(PropTypes.bool, `Instead, use a [Popover](/#/components/popover).
+      It will be removed with v0.16.0.`),
     /**
      * If true, the width of the menu will be set automatically
      * according to the widths of its children,
@@ -141,7 +142,8 @@ class Menu extends Component {
     /**
      * This is the placement of the menu relative to the `IconButton`.
      */
-    openDirection: deprecated(propTypes.corners, 'Instead, use a [Popover](/#/components/popover).'),
+    openDirection: deprecated(propTypes.corners, `Instead, use a [Popover](/#/components/popover).
+      It will be removed with v0.16.0.`),
     /**
      * Override the inline-styles of selected menu items.
      */
@@ -207,8 +209,12 @@ class Menu extends Component {
   }
 
   componentDidMount() {
-    if (this.props.autoWidth) this.setWidth();
-    if (!this.props.animated) this.animateOpen();
+    if (this.props.autoWidth) {
+      this.setWidth();
+    }
+    if (!this.props.animated) {
+      this.animateOpen();
+    }
     this.setScollPosition();
   }
 
@@ -537,7 +543,7 @@ class Menu extends Component {
     } = this.props;
 
     warning((typeof zDepth === 'undefined'), 'Menu no longer supports `zDepth`. Instead, wrap it in `Paper` ' +
-      'or another component that provides `zDepth`.');
+      'or another component that provides `zDepth`. It will be removed with v0.16.0.');
 
     const {focusIndex} = this.state;
 

src/SelectField/SelectField.js

@@ -105,7 +105,7 @@ class SelectField extends Component {
      * Override the inline-styles of the underlying `DropDownMenu` element.
      */
     selectFieldRoot: deprecated(PropTypes.object,
-      'Instead, use `menuStyle`.'),
+      'Instead, use `menuStyle`. It will be removed with v0.16.0.'),
     /**
      * Override the inline-styles of the root element.
      */