Skip to content

Commit

Permalink
[changed] Internal variables classSet to classNames
Browse files Browse the repository at this point in the history
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
  • Loading branch information
mtscout6 committed Apr 8, 2015
1 parent ee562c8 commit 6dfcf36
Show file tree
Hide file tree
Showing 43 changed files with 109 additions and 109 deletions.
2 changes: 1 addition & 1 deletion docs/examples/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"globals": {
"mountNode",
"React",
"classSet",
"classNames",
"Accordion",
"Alert",
"Badge",
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/CollapsableParagraph.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/ReactPlayground.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
},
Expand Down
4 changes: 2 additions & 2 deletions src/Affix.js
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/Alert.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import classSet from 'classnames';
import classNames from 'classnames';
import BootstrapMixin from './BootstrapMixin';

const Alert = React.createClass({
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/Badge.js
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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>
);
Expand Down
8 changes: 4 additions & 4 deletions src/Button.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import classSet from 'classnames';
import classNames from 'classnames';
import BootstrapMixin from './BootstrapMixin';

const Button = React.createClass({
Expand Down Expand Up @@ -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>
Expand All @@ -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>
);
Expand All @@ -79,7 +79,7 @@ const Button = React.createClass({
};

return (
<li className={classSet(liClasses)}>
<li className={classNames(liClasses)}>
{this.renderAnchor(classes)}
</li>
);
Expand Down
4 changes: 2 additions & 2 deletions src/ButtonGroup.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import classSet from 'classnames';
import classNames from 'classnames';
import BootstrapMixin from './BootstrapMixin';

const ButtonGroup = React.createClass({
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/ButtonToolbar.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import classSet from 'classnames';
import classNames from 'classnames';
import BootstrapMixin from './BootstrapMixin';

const ButtonToolbar = React.createClass({
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/Carousel.js
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/CarouselItem.js
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/Col.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import classSet from 'classnames';
import classNames from 'classnames';
import constants from './constants';

const Col = React.createClass({
Expand Down Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/CollapsableNav.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions src/DropdownButton.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/DropdownMenu.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/FormGroup.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import classSet from 'classnames';
import classNames from 'classnames';

class FormGroup extends React.Component {
render() {
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/Glyphicon.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import classSet from 'classnames';
import classNames from 'classnames';
import BootstrapMixin from './BootstrapMixin';
import constants from './constants';

Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions src/Grid.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import classSet from 'classnames';
import classNames from 'classnames';

const Grid = React.createClass({
propTypes: {
Expand All @@ -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>
);
Expand Down
18 changes: 9 additions & 9 deletions src/Input.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import classSet from 'classnames';
import classNames from 'classnames';
import Button from './Button';
import FormGroup from './FormGroup';

Expand Down Expand Up @@ -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>
);
Expand All @@ -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;
Expand Down Expand Up @@ -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}
Expand All @@ -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;
},

Expand All @@ -189,7 +189,7 @@ const Input = React.createClass({
};

return (
<div className={classSet(classes)} key="checkboxRadioWrapper">
<div className={classNames(classes)} key="checkboxRadioWrapper">
{children}
</div>
);
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/Jumbotron.js
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
Loading

0 comments on commit 6dfcf36

Please sign in to comment.