[changed] Internal variables classSet to classNames

This has been causing a lot of confusion for folks since React has
depricated `classSet`. We felt at the time that changing the require
call to `require('classnames')` withing changing the variable name would
be enough. It hasn't due to the confusion people are seeing.

Fixes react-bootstrap#489

Author: mtscout6

docs/examples/.eslintrc

@@ -6,7 +6,7 @@
   "globals": {
     "mountNode",
     "React",
-    "classSet",
+    "classNames",
     "Accordion",
     "Alert",
     "Badge",

docs/examples/CollapsableParagraph.js

@@ -20,7 +20,7 @@ const CollapsableParagraph = React.createClass({
     return (
       <div>
         <Button onClick={this.onHandleToggle}>{text} Content</Button>
-        <div ref='panel' className={classSet(styles)}>
+        <div ref='panel' className={classNames(styles)}>
           {this.props.children}
         </div>
       </div>

docs/src/ReactPlayground.js

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import Accordion from '../../src/Accordion';
 import Alert from '../../src/Alert';
 import Badge from '../../src/Badge';
@@ -198,11 +198,11 @@ const ReactPlayground = React.createClass({
     }
     return (
       <div className='playground'>
-        <div className={classSet(classes)}>
+        <div className={classNames(classes)}>
           <div ref='mount' />
         </div>
         {editor}
-        <a className={classSet(toggleClasses)} onClick={this.handleCodeModeToggle} href='#'>{this.state.mode === this.MODES.NONE ? 'show code' : 'hide code'}</a>
+        <a className={classNames(toggleClasses)} onClick={this.handleCodeModeToggle} href='#'>{this.state.mode === this.MODES.NONE ? 'show code' : 'hide code'}</a>
       </div>
       );
   },

src/Affix.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import AffixMixin from './AffixMixin';
 import domUtils from './utils/domUtils';
 
@@ -15,7 +15,7 @@ const Affix = React.createClass({
 
     return (
       <div {...this.props}
-        className={classSet(this.props.className, this.state.affixClass)}
+        className={classNames(this.props.className, this.state.affixClass)}
         style={holderStyle}>
         {this.props.children}
       </div>

src/Alert.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const Alert = React.createClass({
@@ -36,7 +36,7 @@ const Alert = React.createClass({
     classes['alert-dismissable'] = isDismissable;
 
     return (
-      <div {...this.props} className={classSet(this.props.className, classes)}>
+      <div {...this.props} className={classNames(this.props.className, classes)}>
         {isDismissable ? this.renderDismissButton() : null}
         {this.props.children}
       </div>

src/Badge.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ValidComponentChildren from './utils/ValidComponentChildren';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 
 const Badge = React.createClass({
@@ -22,7 +22,7 @@ const Badge = React.createClass({
     return (
       <span
         {...this.props}
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         {this.props.children}
       </span>
     );

src/Button.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const Button = React.createClass({
@@ -54,7 +54,7 @@ const Button = React.createClass({
       <Component
         {...this.props}
         href={href}
-        className={classSet(this.props.className, classes)}
+        className={classNames(this.props.className, classes)}
         role="button">
         {this.props.children}
       </Component>
@@ -67,7 +67,7 @@ const Button = React.createClass({
     return (
       <Component
         {...this.props}
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         {this.props.children}
       </Component>
     );
@@ -79,7 +79,7 @@ const Button = React.createClass({
     };
 
     return (
-      <li className={classSet(liClasses)}>
+      <li className={classNames(liClasses)}>
         {this.renderAnchor(classes)}
       </li>
     );

src/ButtonGroup.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const ButtonGroup = React.createClass({
@@ -25,7 +25,7 @@ const ButtonGroup = React.createClass({
     return (
       <div
         {...this.props}
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         {this.props.children}
       </div>
     );

src/ButtonToolbar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 
 const ButtonToolbar = React.createClass({
@@ -18,7 +18,7 @@ const ButtonToolbar = React.createClass({
       <div
         {...this.props}
         role="toolbar"
-        className={classSet(this.props.className, classes)}>
+        className={classNames(this.props.className, classes)}>
         {this.props.children}
       </div>
     );

src/Carousel.js

@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
@@ -142,7 +142,7 @@ const Carousel = React.createClass({
     return (
       <div
         {...this.props}
-        className={classSet(this.props.className, classes)}
+        className={classNames(this.props.className, classes)}
         onMouseOver={this.handleMouseOver}
         onMouseOut={this.handleMouseOut}>
         {this.props.indicators ? this.renderIndicators() : null}

src/CarouselItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import TransitionEvents from './utils/TransitionEvents';
 
 const CarouselItem = React.createClass({
@@ -73,7 +73,7 @@ const CarouselItem = React.createClass({
     }
 
     return (
-      <div {...this.props} className={classSet(this.props.className, classes)}>
+      <div {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
         {this.props.caption ? this.renderCaption() : null}
       </div>

src/Col.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import constants from './constants';
 
 const Col = React.createClass({
@@ -62,7 +62,7 @@ const Col = React.createClass({
     }, this);
 
     return (
-      <ComponentClass {...this.props} className={classSet(this.props.className, classes)}>
+      <ComponentClass {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
       </ComponentClass>
     );

src/CollapsableNav.js

@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
 import CollapsableMixin from './CollapsableMixin';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import domUtils from './utils/domUtils';
 
 import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -52,7 +52,7 @@ const CollapsableNav = React.createClass({
     }
 
     return (
-      <div eventKey={this.props.eventKey} className={classSet(this.props.className, classes)} >
+      <div eventKey={this.props.eventKey} className={classNames(this.props.className, classes)} >
         {ValidComponentChildren.map(this.props.children, this.props.collapsable ? this.renderCollapsableNavChildren : this.renderChildren )}
       </div>
     );

src/DropdownButton.js

@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import createChainedFunction from './utils/createChainedFunction';
 import BootstrapMixin from './BootstrapMixin';
@@ -64,7 +64,7 @@ const DropdownButton = React.createClass({
     return (
       <ButtonGroup
         bsSize={this.props.bsSize}
-        className={classSet(this.props.className, groupClasses)}>
+        className={classNames(this.props.className, groupClasses)}>
         {children}
       </ButtonGroup>
     );
@@ -78,7 +78,7 @@ const DropdownButton = React.createClass({
       };
 
     return (
-      <li className={classSet(this.props.className, classes)}>
+      <li className={classNames(this.props.className, classes)}>
         {children}
       </li>
     );

src/DropdownMenu.js

@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 import createChainedFunction from './utils/createChainedFunction';
 import ValidComponentChildren from './utils/ValidComponentChildren';
@@ -19,7 +19,7 @@ const DropdownMenu = React.createClass({
     return (
         <ul
           {...this.props}
-          className={classSet(this.props.className, classes)}
+          className={classNames(this.props.className, classes)}
           role="menu">
           {ValidComponentChildren.map(this.props.children, this.renderMenuItem)}
         </ul>

src/FormGroup.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 class FormGroup extends React.Component {
   render() {
@@ -12,7 +12,7 @@ class FormGroup extends React.Component {
     };
 
     return (
-      <div className={classSet(classes, this.props.groupClassName)}>
+      <div className={classNames(classes, this.props.groupClassName)}>
         {this.props.children}
       </div>
     );

src/Glyphicon.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import constants from './constants';
 
@@ -22,7 +22,7 @@ const Glyphicon = React.createClass({
     classes['glyphicon-' + this.props.glyph] = true;
 
     return (
-      <span {...this.props} className={classSet(this.props.className, classes)}>
+      <span {...this.props} className={classNames(this.props.className, classes)}>
         {this.props.children}
       </span>
     );

src/Grid.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 const Grid = React.createClass({
   propTypes: {
@@ -20,7 +20,7 @@ const Grid = React.createClass({
     return (
       <ComponentClass
         {...this.props}
-        className={classSet(this.props.className, className)}>
+        className={classNames(this.props.className, className)}>
         {this.props.children}
       </ComponentClass>
     );

src/Input.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 import Button from './Button';
 import FormGroup from './FormGroup';
 
@@ -90,17 +90,17 @@ const Input = React.createClass({
     switch (this.props.type) {
       case 'select':
         input = (
-          <select {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input">
+          <select {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input">
             {this.props.children}
           </select>
         );
         break;
       case 'textarea':
-        input = <textarea {...this.props} className={classSet(this.props.className, 'form-control')} ref="input" key="input" />;
+        input = <textarea {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input" />;
         break;
       case 'static':
         input = (
-          <p {...this.props} className={classSet(this.props.className, 'form-control-static')} ref="input" key="input">
+          <p {...this.props} className={classNames(this.props.className, 'form-control-static')} ref="input" key="input">
             {this.props.value}
           </p>
         );
@@ -112,7 +112,7 @@ const Input = React.createClass({
         break;
       default:
         let className = this.isCheckboxOrRadio() || this.isFile() ? '' : 'form-control';
-        input = <input {...this.props} className={classSet(this.props.className, className)} ref="input" key="input" />;
+        input = <input {...this.props} className={classNames(this.props.className, className)} ref="input" key="input" />;
     }
 
     return input;
@@ -150,7 +150,7 @@ const Input = React.createClass({
     }
 
     return addonBefore || addonAfter || buttonBefore || buttonAfter ? (
-      <div className={classSet(inputGroupClassName, 'input-group')} key="input-group">
+      <div className={classNames(inputGroupClassName, 'input-group')} key="input-group">
         {addonBefore}
         {buttonBefore}
         {children}
@@ -170,7 +170,7 @@ const Input = React.createClass({
     };
 
     return this.props.hasFeedback ? (
-      <span className={classSet(classes)} key="icon" />
+      <span className={classNames(classes)} key="icon" />
     ) : null;
   },
 
@@ -189,7 +189,7 @@ const Input = React.createClass({
     };
 
     return (
-      <div className={classSet(classes)} key="checkboxRadioWrapper">
+      <div className={classNames(classes)} key="checkboxRadioWrapper">
         {children}
       </div>
     );
@@ -210,7 +210,7 @@ const Input = React.createClass({
     classes[this.props.labelClassName] = this.props.labelClassName;
 
     return this.props.label ? (
-      <label htmlFor={this.props.id} className={classSet(classes)} key="label">
+      <label htmlFor={this.props.id} className={classNames(classes)} key="label">
         {children}
         {this.props.label}
       </label>

src/Jumbotron.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import classSet from 'classnames';
+import classNames from 'classnames';
 
 const Jumbotron = React.createClass({
   render() {
     return (
-      <div {...this.props} className={classSet(this.props.className, 'jumbotron')}>
+      <div {...this.props} className={classNames(this.props.className, 'jumbotron')}>
         {this.props.children}
       </div>
     );