Merge pull request react-bootstrap#376 from defrex/patch-1

Move className prop to outer-most element in dropdown

Author: mtscout6

src/DropdownButton.jsx

@@ -27,8 +27,6 @@ var DropdownButton = React.createClass({
   },
 
   render: function () {
-    var className = 'dropdown-toggle';
-
     var renderMethod = this.props.navItem ?
       'renderNavItem' : 'renderButtonGroup';
 
@@ -39,7 +37,7 @@ var DropdownButton = React.createClass({
       <Button
         {...this.props}
         ref="dropdownButton"
-        className={joinClasses(this.props.className, className)}
+        className="dropdown-toggle"
         onClick={this.handleDropdownClick}
         key={0}
         navDropdown={this.props.navItem}
@@ -69,7 +67,7 @@ var DropdownButton = React.createClass({
     return (
       <ButtonGroup
         bsSize={this.props.bsSize}
-        className={classSet(groupClasses)}>
+        className={joinClasses(this.props.className, classSet(groupClasses))}>
         {children}
       </ButtonGroup>
     );
@@ -83,7 +81,7 @@ var DropdownButton = React.createClass({
       };
 
     return (
-      <li className={classSet(classes)}>
+      <li className={joinClasses(this.props.className, classSet(classes))}>
         {children}
       </li>
     );
@@ -124,4 +122,4 @@ var DropdownButton = React.createClass({
   }
 });
 
-module.exports = DropdownButton;
+module.exports = DropdownButton;

test/DropdownButtonSpec.jsx

@@ -26,8 +26,8 @@ describe('DropdownButton', function () {
 
     var button = ReactTestUtils.findRenderedComponentWithType(instance, Button).getDOMNode();
     assert.ok(instance.getDOMNode().className.match(/\bbtn-group\b/));
+    assert.ok(instance.getDOMNode().className.match(/\btest-class\b/));
     assert.ok(button.className.match(/\bbtn\b/));
-    assert.ok(button.className.match(/\btest-class\b/));
     assert.equal(button.nodeName, 'BUTTON');
     assert.equal(button.type, 'button');
     assert.ok(button.className.match(/\bdropdown-toggle\b/));
@@ -171,7 +171,7 @@ describe('DropdownButton', function () {
     var button = ReactTestUtils.findRenderedComponentWithType(instance, Button).getDOMNode();
     assert.equal(li.nodeName, 'LI');
     assert.ok(li.className.match(/\bdropdown\b/));
-    assert.ok(button.className.match(/\btest-class\b/));
+    assert.ok(li.className.match(/\btest-class\b/));
     assert.equal(button.nodeName, 'A');
     assert.ok(button.className.match(/\bdropdown-toggle\b/));
     assert.ok(button.lastChild.className.match(/\bcaret\b/));
@@ -203,4 +203,4 @@ describe('DropdownButton', function () {
     var carets = button.getElementsByClassName('caret');
     assert.equal(carets.length, 0);
   });
-});
+});