Merge pull request #786 from Automattic/update/react-lib-join-classes

Framework: Use classnames in place of react/lib/joinClasses
Automattic · Nov 26, 2015 · 5dd7d73 · 5dd7d73
2 parents 8eaf1cc + ee7c34f
commit 5dd7d73
Show file tree

Hide file tree

Showing 32 changed files with 69 additions and 70 deletions.
diff --git a/client/components/dialog/dialog-base.jsx b/client/components/dialog/dialog-base.jsx
@@ -5,7 +5,7 @@ var React = require( 'react' ),
 	clickOutside = require( 'click-outside' ),
 	closest = require( 'component-closest' ),
 	noop = require( 'lodash/utility/noop' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 /**
  * Internal dependencies
@@ -60,17 +60,17 @@ var DialogBase = React.createClass( {
 			contentClassName = baseClassName + '__content';
 
 		if ( this.props.additionalClassNames ) {
-			dialogClassName = joinClasses( this.props.additionalClassNames, dialogClassName );
+			dialogClassName = classnames( this.props.additionalClassNames, dialogClassName );
 		}
 
 		if ( this.props.isFullScreen ) {
-			backdropClassName = joinClasses( 'is-full-screen', backdropClassName );
+			backdropClassName = classnames( 'is-full-screen', backdropClassName );
 		}
 
 		return (
 			<div className={ backdropClassName } ref="backdrop">
 				<Card className={ dialogClassName } role="dialog" ref="dialog">
-					<div className={ joinClasses( this.props.className, contentClassName ) } ref="content" tabIndex="-1">
+					<div className={ classnames( this.props.className, contentClassName ) } ref="content" tabIndex="-1">
 						{ this.props.children }
 					</div>
 					{ this._renderButtonsBar() }

diff --git a/client/components/forms/form-button/index.jsx b/client/components/forms/form-button/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	classNames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' ),
 	isEmpty = require( 'lodash/lang/isEmpty' );
@@ -37,7 +37,7 @@ module.exports = React.createClass( {
 			<Button
 				{ ...omit( this.props, 'className' ) }
 				primary={ this.props.isPrimary }
-				className={ joinClasses( this.props.className, buttonClasses ) }>
+				className={ classnames( this.props.className, buttonClasses ) }>
 				{ isEmpty( this.props.children ) ? this.getDefaultButtonAction() : this.props.children }
 			</Button>
 		);

diff --git a/client/components/forms/form-buttons-bar/index.jsx b/client/components/forms/form-buttons-bar/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -13,7 +13,7 @@ module.exports = React.createClass( {
 		return (
 			<div
 				{ ...omit( this.props, 'className' ) }
-				className={ joinClasses( this.props.className, 'form-buttons-bar' ) } >
+				className={ classnames( this.props.className, 'form-buttons-bar' ) } >
 				{ this.props.children }
 			</div>
 		);

diff --git a/client/components/forms/form-checkbox/index.jsx b/client/components/forms/form-checkbox/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -13,7 +13,7 @@ module.exports = React.createClass( {
 		var otherProps = omit( this.props, [ 'className', 'type' ] );
 
 		return (
-			<input { ...otherProps } type="checkbox" className={ joinClasses( this.props.className, 'form-checkbox' ) } />
+			<input { ...otherProps } type="checkbox" className={ classnames( this.props.className, 'form-checkbox' ) } />
 		);
 	}
 } );
diff --git a/client/components/forms/form-country-select/index.jsx b/client/components/forms/form-country-select/index.jsx
@@ -3,7 +3,7 @@
  */
 var React = require( 'react/addons' ),
 	isEmpty = require( 'lodash/lang/isEmpty' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	observe = require( 'lib/mixins/data-observe' ),
 	omit = require( 'lodash/object/omit' );
 
@@ -29,7 +29,7 @@ module.exports = React.createClass( {
 		return (
 			<select
 				{ ...omit( this.props, 'className' ) }
-				className={ joinClasses( this.props.className, 'form-country-select' ) }
+				className={ classnames( this.props.className, 'form-country-select' ) }
 				onChange={ this.props.onChange }
 			>
 				{ options.map( function( option ) {

diff --git a/client/components/forms/form-fieldset/index.jsx b/client/components/forms/form-fieldset/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<fieldset { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-fieldset' ) } >
+			<fieldset { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-fieldset' ) } >
 				{ this.props.children }
 			</fieldset>
 		);

diff --git a/client/components/forms/form-label/index.jsx b/client/components/forms/form-label/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<label { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-label' ) } >
+			<label { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-label' ) } >
 				{ this.props.children }
 			</label>
 		);

diff --git a/client/components/forms/form-legend/index.jsx b/client/components/forms/form-legend/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<legend { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-legend' ) } >
+			<legend { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-legend' ) } >
 				{ this.props.children }
 			</legend>
 		);

diff --git a/client/components/forms/form-phone-input/index.jsx b/client/components/forms/form-phone-input/index.jsx
@@ -13,7 +13,7 @@ var FormLabel = require( 'components/forms/form-label' ),
 	FormTelInput = require( 'components/forms/form-tel-input' ),
 	FormFieldset = require( 'components/forms/form-fieldset' ),
 	CountrySelect = require( 'components/forms/form-country-select' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	phoneValidation = require( 'lib/phone-validation' );
 
 var CLEAN_REGEX = /^0|[\s.\-()]+/g;
@@ -68,7 +68,7 @@ module.exports = React.createClass( {
 			};
 
 		return (
-			<div className={ joinClasses( this.props.className, 'form-phone-input' ) }>
+			<div className={ classnames( this.props.className, 'form-phone-input' ) }>
 				<FormFieldset className="form-fieldset__country">
 					<FormLabel htmlFor="country_code">{ this.translate( 'Country Code', { context: 'The country code for the phone for the user.' } ) }</FormLabel>
 					<CountrySelect

diff --git a/client/components/forms/form-radio/index.jsx b/client/components/forms/form-radio/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -16,7 +16,7 @@ module.exports = React.createClass( {
 			<input
 				{ ...otherProps }
 				type="radio"
-				className={ joinClasses( this.props.className, 'form-radio' ) } />
+				className={ classnames( this.props.className, 'form-radio' ) } />
 		);
 	}
 } );
diff --git a/client/components/forms/form-section-heading/index.jsx b/client/components/forms/form-section-heading/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<h3 { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-section-heading' ) } >
+			<h3 { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-section-heading' ) } >
 				{ this.props.children }
 			</h3>
 		);

diff --git a/client/components/forms/form-select/index.jsx b/client/components/forms/form-select/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<select { ...omit( this.props, 'classname' ) } className={ joinClasses( this.props.className, 'form-select' ) } >
+			<select { ...omit( this.props, 'classname' ) } className={ classnames( this.props.className, 'form-select' ) } >
 				{ this.props.children }
 			</select>
 		);

diff --git a/client/components/forms/form-setting-explanation/index.jsx b/client/components/forms/form-setting-explanation/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<p { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-setting-explanation' ) } >
+			<p { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-setting-explanation' ) } >
 				{ this.props.children }
 			</p>
 		);

diff --git a/client/components/forms/form-tel-input/index.jsx b/client/components/forms/form-tel-input/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' ),
 	classNames = require( 'classnames' );
 
@@ -28,7 +28,7 @@ module.exports = React.createClass( {
 				{ ...otherProps }
 				type={ 'tel' }
 				pattern={ '[0-9]*'}
-				className={ joinClasses( this.props.className, classes ) } />
+				className={ classnames( this.props.className, classes ) } />
 		);
 	}
 } );
diff --git a/client/components/forms/form-text-input/index.jsx b/client/components/forms/form-text-input/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' ),
 	classNames = require( 'classnames' );
 
@@ -31,7 +31,7 @@ module.exports = React.createClass( {
 			<input
 				{ ...otherProps }
 				type={ this.props.type }
-				className={ joinClasses( this.props.className, classes ) }
+				className={ classnames( this.props.className, classes ) }
 				onClick={ this.props.selectOnFocus ? this.selectOnFocus : null }
 				/>
 		);

diff --git a/client/components/forms/form-textarea/index.jsx b/client/components/forms/form-textarea/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react/addons' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	omit = require( 'lodash/object/omit' );
 
 module.exports = React.createClass( {
@@ -11,7 +11,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<textarea { ...omit( this.props, 'className' ) } className={ joinClasses( this.props.className, 'form-textarea' ) } >
+			<textarea { ...omit( this.props, 'className' ) } className={ classnames( this.props.className, 'form-textarea' ) } >
 				{ this.props.children }
 			</textarea>
 		);

diff --git a/client/components/main/index.jsx b/client/components/main/index.jsx
@@ -2,14 +2,14 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 module.exports = React.createClass( {
 	displayName: 'Main',
 
 	render: function() {
 		return (
-			<div className={ joinClasses( this.props.className, 'main' ) } role="main">
+			<div className={ classnames( this.props.className, 'main' ) } role="main">
 				{ this.props.children }
 			</div>
 		);

diff --git a/client/components/popover/menu-item.jsx b/client/components/popover/menu-item.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 var MenuItem = React.createClass( {
 	getDefaultProps: function() {
@@ -16,7 +16,7 @@ var MenuItem = React.createClass( {
 	render: function() {
 		var onMouseOver = this.props.focusOnHover ? this._onMouseOver : null;
 		return (
-			<button className={ joinClasses( 'popover__menu-item', this.props.className ) }
+			<button className={ classnames( 'popover__menu-item', this.props.className ) }
 					role="menuitem"
 					disabled={ this.props.disabled }
 					onClick={ this.props.onClick }

diff --git a/client/components/post-excerpt/index.jsx b/client/components/post-excerpt/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 var PostExcerpt = React.createClass( {
 
@@ -21,7 +21,7 @@ var PostExcerpt = React.createClass( {
 		textClass = textClass.join( ' ' );
 
 		return (
-			<div className={ joinClasses( this.props.className, 'post-excerpt' ) }>
+			<div className={ classnames( this.props.className, 'post-excerpt' ) }>
 				<p className={ textClass }>{ text }</p>
 			</div>
 		);

diff --git a/client/components/progress-bar/index.jsx b/client/components/progress-bar/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' );
+	classnames = require( 'classnames' );
 
 module.exports = React.createClass( {
 
@@ -35,7 +35,7 @@ module.exports = React.createClass( {
 
 	render: function() {
 		return (
-			<div className={ joinClasses( this.props.className, 'progress-bar' ) }>
+			<div className={ classnames( this.props.className, 'progress-bar' ) }>
 				{ this.renderBar() }
 			</div>
 		);

diff --git a/client/components/progress-indicator/index.jsx b/client/components/progress-indicator/index.jsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 var React = require( 'react' ),
-	joinClasses = require( 'react/lib/joinClasses' ),
+	classnames = require( 'classnames' ),
 	classNames = require( 'classnames' );
 
 module.exports = React.createClass( {
@@ -38,7 +38,7 @@ module.exports = React.createClass( {
 		} );
 
 		return (
-			<div className={ joinClasses( this.props.className, classes ) }>
+			<div className={ classnames( this.props.className, classes ) }>
 				<div className="progress-indicator__half" />
 				<div className="progress-indicator__half is-latter" />
 				{ last }