Deprecates mergeAndPrefix() method, refactors mergeStyles(), prepareS…

…tyles()

This commit removes all instances of `mergeAndPrefix()` in our internal codebase. It also deprecates use of the `mergeAndPrefix()` method from the `style-propable` mixin. It also changes our use of `mergeStyles()` and `prepareStyles()` accross src in a more consistent manner. All uses of `mergeAndPrefix()` were switched to `mergeStyles()` OR `prepareStyles()` based on the following condition:

- If the computed style is passed directly to a html tag's style attribute (ie. div, span, li, etc.) OR to an externally managed component's style prop (such as `ReactTransitionGroup`), use `prepareStyles()`
- If the computed style is passed to an internal component's style prop, or any related style props, use `mergeStyles()`

This prevents any top level/parent components from prematurely preparing styles (styles should only be prepared when attaching to a DOM node).

I did searches accross src and found places where that pattern were not followed and switched them as well.

docs/src/app/components/full-width-section.jsx

@@ -62,7 +62,7 @@ const FullWidthSection = React.createClass({
       content =
         React.createElement(
           contentType,
-          {style: this.mergeAndPrefix(styles.content, contentStyle)},
+          {style: this.mergeStyles(styles.content, contentStyle)},
           this.props.children
         );
     } else {
@@ -71,7 +71,7 @@ const FullWidthSection = React.createClass({
 
     return (
       <ClearFix {...other}
-        style={this.mergeAndPrefix(
+        style={this.mergeStyles(
           styles.root,
           style,
           this.isDeviceSize(StyleResizable.statics.Sizes.SMALL) && styles.rootWhenSmall,

docs/src/app/components/pages/home-feature.jsx

@@ -78,7 +78,7 @@ let HomeFeature = React.createClass({
 
     if (this.isDeviceSize(StyleResizable.statics.Sizes.MEDIUM) ||
         this.isDeviceSize(StyleResizable.statics.Sizes.LARGE)) {
-      styles.root = this.mergeAndPrefix(
+      styles.root = this.mergeStyles(
         styles.root,
         styles.rootWhenMedium,
         this.props.firstChild && styles.rootWhenMediumAndFirstChild,
@@ -109,7 +109,7 @@ let HomeFeature = React.createClass({
         zDepth={this.state.zDepth}
         onMouseEnter={this._onMouseEnter}
         onMouseLeave={this._onMouseLeave}
-        style={this.mergeAndPrefix(
+        style={this.mergeStyles(
           styles.root,
           this.props.lastChild && styles.rootWhenLastChild)}>
         <h3 style={styles.heading}>{this.props.heading}</h3>

src/auto-complete.jsx

@@ -305,15 +305,15 @@ const AutoComplete = React.createClass({
     };
 
     let textFieldProps = {
-      style: this.mergeAndPrefix(styles.input, style),
+      style: this.mergeStyles(styles.input, style),
       floatingLabelText: floatingLabelText,
       hintText: (!hintText && !floatingLabelText) ? '' : hintText,
       fullWidth: true,
       multiLine: false,
-      errorStyle: this.mergeAndPrefix(styles.error, errorStyle),
+      errorStyle: this.mergeStyles(styles.error, errorStyle),
     };
 
-    let mergedRootStyles = this.mergeAndPrefix(styles.root, style);
+    let mergedRootStyles = this.mergeStyles(styles.root, style);
     let mergedMenuStyles = this.mergeStyles(styles.menu, menuStyle);
 
     let requestsList = [];
@@ -352,7 +352,7 @@ const AutoComplete = React.createClass({
         onEscKeyDown={this._close}
         initiallyKeyboardFocused={false}
         onItemTouchTap={this._handleItemTouchTap}
-        listStyle={this.mergeAndPrefix(styles.list, listStyle)}
+        listStyle={this.mergeStyles(styles.list, listStyle)}
         style={mergedMenuStyles}>
         {
           requestsList.map((request, index) => {
@@ -392,7 +392,7 @@ const AutoComplete = React.createClass({
     }
 
     return (
-      <div style={mergedRootStyles}
+      <div style={this.prepareStyles(mergedRootStyles)}
         onKeyDown={this._handleKeyDown}>
         <div
           style={{

src/card/card-header.jsx

@@ -98,10 +98,10 @@ const CardHeader = React.createClass({
 
   render() {
     let styles = this.getStyles();
-    let rootStyle = this.prepareStyles(styles.root, this.props.style);
-    let textStyle = this.prepareStyles(styles.text, this.props.textStyle);
-    let titleStyle = this.prepareStyles(styles.title, this.props.titleStyle);
-    let subtitleStyle = this.prepareStyles(styles.subtitle, this.props.subtitleStyle);
+    let rootStyle = this.mergeStyles(styles.root, this.props.style);
+    let textStyle = this.mergeStyles(styles.text, this.props.textStyle);
+    let titleStyle = this.mergeStyles(styles.title, this.props.titleStyle);
+    let subtitleStyle = this.mergeStyles(styles.subtitle, this.props.subtitleStyle);
 
     let avatar = this.props.avatar;
     if (React.isValidElement(this.props.avatar)) {
@@ -113,11 +113,11 @@ const CardHeader = React.createClass({
     }
 
     return (
-      <div {...this.props} style={rootStyle}>
+      <div {...this.props} style={this.prepareStyles(rootStyle)}>
         {avatar}
-        <div style={textStyle}>
-          <span style={titleStyle}>{this.props.title}</span>
-          <span style={subtitleStyle}>{this.props.subtitle}</span>
+        <div style={this.prepareStyles(textStyle)}>
+          <span style={this.prepareStyles(titleStyle)}>{this.props.title}</span>
+          <span style={this.prepareStyles(subtitleStyle)}>{this.props.subtitle}</span>
         </div>
         {this.props.children}
       </div>

src/card/card-media.jsx

@@ -90,11 +90,11 @@ const CardMedia = React.createClass({
 
   render() {
     let styles = this.getStyles();
-    let rootStyle = this.prepareStyles(styles.root, this.props.style);
-    let mediaStyle = this.prepareStyles(styles.media, this.props.mediaStyle);
-    let overlayContainerStyle = this.prepareStyles(styles.overlayContainer, this.props.overlayContainerStyle);
-    let overlayContentStyle = this.prepareStyles(styles.overlayContent, this.props.overlayContentStyle);
-    let overlayStyle = this.prepareStyles(styles.overlay, this.props.overlayStyle);
+    let rootStyle = this.mergeStyles(styles.root, this.props.style);
+    let mediaStyle = this.mergeStyles(styles.media, this.props.mediaStyle);
+    let overlayContainerStyle = this.mergeStyles(styles.overlayContainer, this.props.overlayContainerStyle);
+    let overlayContentStyle = this.mergeStyles(styles.overlayContent, this.props.overlayContentStyle);
+    let overlayStyle = this.mergeStyles(styles.overlay, this.props.overlayStyle);
 
     let children = React.Children.map(this.props.children, (child) => {
       return React.cloneElement(child, {style: this.prepareStyles(styles.mediaChild, child.props.style)});
@@ -118,14 +118,14 @@ const CardMedia = React.createClass({
     });
 
     return (
-      <div {...this.props} style={rootStyle}>
-        <div style={mediaStyle}>
+      <div {...this.props} style={this.prepareStyles(rootStyle)}>
+        <div style={this.prepareStyles(mediaStyle)}>
           {children}
         </div>
         {(this.props.overlay) ?
-          <div style={overlayContainerStyle}>
-            <div style={overlayStyle}>
-              <div style={overlayContentStyle}>
+          <div style={this.prepareStyles(overlayContainerStyle)}>
+            <div style={this.prepareStyles(overlayStyle)}>
+              <div style={this.prepareStyles(overlayContentStyle)}>
                 {overlayChildren}
               </div>
             </div>

src/card/card-text.jsx

@@ -62,10 +62,10 @@ const CardText = React.createClass({
 
   render() {
     let styles = this.getStyles();
-    let rootStyle = this.prepareStyles(styles.root, this.props.style);
+    let rootStyle = this.mergeStyles(styles.root, this.props.style);
 
     return (
-      <div {...this.props} style={rootStyle}>
+      <div {...this.props} style={this.prepareStyles(rootStyle)}>
         {this.props.children}
       </div>
     );

src/card/card-title.jsx

@@ -87,16 +87,16 @@ const CardTitle = React.createClass({
 
   render() {
     const styles = this.getStyles();
-    const rootStyle = this.prepareStyles(styles.root, this.props.style);
-    const titleStyle = this.prepareStyles(styles.title, this.props.titleStyle);
-    const subtitleStyle = this.prepareStyles(styles.subtitle, this.props.subtitleStyle);
+    const rootStyle = this.mergeStyles(styles.root, this.props.style);
+    const titleStyle = this.mergeStyles(styles.title, this.props.titleStyle);
+    const subtitleStyle = this.mergeStyles(styles.subtitle, this.props.subtitleStyle);
 
     return (
-      <div {...this.props} style={rootStyle}>
-        <span style={titleStyle}>
+      <div {...this.props} style={this.prepareStyles(rootStyle)}>
+        <span style={this.prepareStyles(titleStyle)}>
           {this.props.title}
         </span>
-        <span style={subtitleStyle}>
+        <span style={this.prepareStyles(subtitleStyle)}>
           {this.props.subtitle}
         </span>
         {this.props.children}

src/enhanced-button.jsx

@@ -271,7 +271,7 @@ const EnhancedButton = React.createClass({
       ...other,
     } = this.props;
 
-    const mergedStyles = this.prepareStyles({
+    const mergedStyles = this.mergeStyles({
       border: 10,
       background: 'none',
       boxSizing: 'border-box',
@@ -297,7 +297,7 @@ const EnhancedButton = React.createClass({
 
     const buttonProps = {
       ...other,
-      style: mergedStyles,
+      style: this.prepareStyles(mergedStyles),
       disabled: disabled,
       onBlur: this._handleBlur,
       onFocus: this._handleFocus,

src/enhanced-switch.jsx

@@ -343,8 +343,8 @@ const EnhancedSwitch = React.createClass({
     } = this.props;
 
     let styles = this.getStyles();
-    let wrapStyles = this.prepareStyles(styles.wrap, this.props.iconStyle);
-    let rippleStyle = this.prepareStyles(styles.ripple, this.props.rippleStyle);
+    let wrapStyles = this.mergeStyles(styles.wrap, this.props.iconStyle);
+    let rippleStyle = this.mergeStyles(styles.ripple, this.props.rippleStyle);
     let rippleColor = this.props.hasOwnProperty('rippleColor') ? this.props.rippleColor :
                       this.getTheme().primary1Color;
 
@@ -355,9 +355,9 @@ const EnhancedSwitch = React.createClass({
 
     let inputId = this.props.id || UniqueId.generate();
 
-    let labelStyle = this.prepareStyles(styles.label, this.props.labelStyle);
+    let labelStyle = this.mergeStyles(styles.label, this.props.labelStyle);
     let labelElement = this.props.label ? (
-      <label style={labelStyle} htmlFor={inputId}>
+      <label style={this.prepareStyles(labelStyle)} htmlFor={inputId}>
         {this.props.label}
       </label>
     ) : null;
@@ -418,12 +418,12 @@ const EnhancedSwitch = React.createClass({
     // If toggle component (indicated by whether the style includes thumb) manually lay out
     // elements in order to nest ripple elements
     let switchElement = !this.props.thumbStyle ? (
-      <div style={wrapStyles}>
+      <div style={this.prepareStyles(wrapStyles)}>
         {this.props.switchElement}
         {ripples}
       </div>
     ) : (
-      <div style={wrapStyles}>
+      <div style={this.prepareStyles(wrapStyles)}>
         <div style={this.prepareStyles(this.props.trackStyle)}/>
         <Paper style={this.props.thumbStyle} zDepth={1} circle={true}> {ripples} </Paper>
       </div>

src/font-icon.jsx

@@ -108,7 +108,7 @@ const FontIcon = React.createClass({
       this.state.muiTheme.rawTheme.palette.textColor;
     let onColor = hoverColor ? hoverColor : offColor;
 
-    let mergedStyles = this.prepareStyles({
+    let mergedStyles = this.mergeStyles({
       position: 'relative',
       fontSize: spacing.iconSize,
       display: 'inline-block',
@@ -123,7 +123,7 @@ const FontIcon = React.createClass({
         {...other}
         onMouseLeave={this._handleMouseLeave}
         onMouseEnter={this._handleMouseEnter}
-        style={mergedStyles} />
+        style={this.prepareStyles(mergedStyles)} />
     );
   },
 });

src/grid-list/grid-tile.jsx

@@ -220,7 +220,7 @@ const GridTile = React.createClass({
 
     const styles = this.getStyles();
 
-    const mergedRootStyles = this.prepareStyles(styles.root, style);
+    const mergedRootStyles = this.mergeStyles(styles.root, style);
 
     let titleBar = null;
 
@@ -259,7 +259,7 @@ const GridTile = React.createClass({
 
     const RootTag = rootClass;
     return (
-      <RootTag style={mergedRootStyles} {...other}>
+      <RootTag style={this.prepareStyles(mergedRootStyles)} {...other}>
         {newChildren}
         {titleBar}
       </RootTag>

src/ink-bar.jsx

@@ -59,7 +59,7 @@ const InkBar = React.createClass({
     } = this.props;
 
     let colorStyle = color ? {backgroundColor: color} : undefined;
-    let styles = this.prepareStyles({
+    let styles = this.mergeStyles({
       left: left,
       width: width,
       bottom: 0,
@@ -72,7 +72,7 @@ const InkBar = React.createClass({
     }, this.props.style, colorStyle);
 
     return (
-      <div style={styles}>
+      <div style={this.prepareStyles(styles)}>
         &nbsp;
       </div>
     );

src/lists/list-item.jsx

@@ -254,14 +254,14 @@ const ListItem = React.createClass({
       style,
     } = this.props;
 
-    const mergedDivStyles = this.prepareStyles(
+    const mergedDivStyles = this.mergeStyles(
       styles.root,
       styles.innerDiv,
       innerDivStyle,
       style
     );
 
-    return React.createElement('div', {style: mergedDivStyles}, contentChildren);
+    return React.createElement('div', {style: this.prepareStyles(mergedDivStyles)}, contentChildren);
   },
 
   _createLabelElement(styles, contentChildren) {
@@ -270,26 +270,26 @@ const ListItem = React.createClass({
       style,
     } = this.props;
 
-    const mergedLabelStyles = this.prepareStyles(
+    const mergedLabelStyles = this.mergeStyles(
       styles.root,
       styles.innerDiv,
       innerDivStyle,
       styles.label,
       style
     );
 
-    return React.createElement('label', {style: mergedLabelStyles}, contentChildren);
+    return React.createElement('label', {style: this.prepareStyles(mergedLabelStyles)}, contentChildren);
   },
 
   _createTextElement(styles, data, key) {
     const isAnElement = React.isValidElement(data);
     const mergedStyles = isAnElement ?
-      this.prepareStyles(styles, data.props.style) : null;
+      this.mergeStyles(styles, data.props.style) : null;
 
     return isAnElement ? (
       React.cloneElement(data, {
         key: key,
-        style: mergedStyles,
+        style: this.prepareStyles(mergedStyles),
       })
     ) : (
       <div key={key} style={this.prepareStyles(styles)}>

src/lists/list.jsx

@@ -111,8 +111,8 @@ const List = React.createClass({
 
     let subheaderElement;
     if (subheader) {
-      const mergedSubheaderStyles = this.prepareStyles(styles.subheader, subheaderStyle);
-      subheaderElement = <div style={mergedSubheaderStyles}>{subheader}</div>;
+      const mergedSubheaderStyles = this.mergeStyles(styles.subheader, subheaderStyle);
+      subheaderElement = <div style={this.prepareStyles(mergedSubheaderStyles)}>{subheader}</div>;
     }
 
     return (

src/menu/menu.jsx

@@ -159,7 +159,7 @@ const NestedMenuItem = React.createClass({
 
   render() {
     let styles = this.getStyles();
-    styles = this.prepareStyles(styles.root,
+    styles = this.mergeStyles(styles.root,
       (this.props.active && !this.props.disabled) && styles.rootWhenHovered, {
         position: 'relative',
       }, this.props.style);
@@ -178,7 +178,7 @@ const NestedMenuItem = React.createClass({
     return (
       <div
         ref="root"
-        style={styles}
+        style={this.prepareStyles(styles)}
         onMouseEnter={this._openNestedMenu}
         onMouseLeave={this._closeNestedMenu}
         onMouseOver={this._handleMouseOver}

src/menus/icon-menu.jsx

@@ -299,7 +299,7 @@ const IconMenu = React.createClass({
       },
     };
 
-    let mergedRootStyles = this.prepareStyles(styles.root, style);
+    let mergedRootStyles = this.mergeStyles(styles.root, style);
     let mergedMenuStyles = this.mergeStyles(styles.menu, menuStyle);
 
     let iconButton = React.cloneElement(iconButtonElement, {
@@ -333,7 +333,7 @@ const IconMenu = React.createClass({
         onMouseEnter={onMouseEnter}
         onMouseUp={onMouseUp}
         onTouchTap={onTouchTap}
-        style={mergedRootStyles}>
+        style={this.prepareStyles(mergedRootStyles)}>
         {iconButton}
         <Popover
           anchorOrigin={anchorOrigin}