Merge pull request react-bootstrap#343 from computmaxer/dropdownCaret

Add noCaret prop to DropdownButton

Author: mtscout6

docs/examples/DropdownButtonNoCaret.js

@@ -0,0 +1,13 @@
+var buttonInstance = (
+      <ButtonToolbar>
+        <DropdownButton bsStyle="default" title="No caret" noCaret>
+          <MenuItem eventKey="1">Action</MenuItem>
+          <MenuItem eventKey="2">Another action</MenuItem>
+          <MenuItem eventKey="3">Something else here</MenuItem>
+          <MenuItem divider />
+          <MenuItem eventKey="4">Separated link</MenuItem>
+        </DropdownButton>
+      </ButtonToolbar>
+  );
+
+React.render(buttonInstance, mountNode);

docs/src/ComponentsPage.js

@@ -160,6 +160,10 @@ var ComponentsPage = React.createClass({
                   <p>Button dropdowns work with buttons of all sizes.</p>
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/DropdownButtonSizes.js', 'utf8')} />
 
+                  <h3 id="btn-dropdown-nocaret">No caret variation</h3>
+                  <p>Remove the caret using the <code>noCaret</code> prop.</p>
+                  <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/DropdownButtonNoCaret.js', 'utf8')} />
+
                   <h3 id="btn-dropdowns-dropup">Dropup variation</h3>
                   <p>Trigger dropdown menus that site above the button by adding the <code>dropup</code> prop.</p>
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/SplitButtonDropup.js', 'utf8')} />

src/DropdownButton.jsx

@@ -22,7 +22,8 @@ var DropdownButton = React.createClass({
     href:      React.PropTypes.string,
     onClick:   React.PropTypes.func,
     onSelect:  React.PropTypes.func,
-    navItem:   React.PropTypes.bool
+    navItem:   React.PropTypes.bool,
+    noCaret:   React.PropTypes.bool
   },
 
   render: function () {
@@ -31,6 +32,9 @@ var DropdownButton = React.createClass({
     var renderMethod = this.props.navItem ?
       'renderNavItem' : 'renderButtonGroup';
 
+    var caret = this.props.noCaret ?
+        null : (<span className="caret" />);
+
     return this[renderMethod]([
       <Button
         {...this.props}
@@ -44,7 +48,7 @@ var DropdownButton = React.createClass({
         pullRight={null}
         dropup={null}>
         {this.props.title}{' '}
-        <span className="caret" />
+        {caret}
       </Button>,
       <DropdownMenu
         ref="menu"

test/DropdownButtonSpec.jsx

@@ -177,4 +177,30 @@ describe('DropdownButton', function () {
     assert.ok(button.lastChild.className.match(/\bcaret\b/));
     assert.equal(button.innerText.trim(), 'Title');
   });
+
+  it('should render a caret by default', function() {
+    instance = ReactTestUtils.renderIntoDocument(
+        <DropdownButton title="Title">
+          <MenuItem eventKey="1">MenuItem 1 content</MenuItem>
+          <MenuItem eventKey="2">MenuItem 2 content</MenuItem>
+        </DropdownButton>
+    );
+
+    var button = ReactTestUtils.findRenderedComponentWithType(instance, Button).getDOMNode();
+    var carets = button.getElementsByClassName('caret');
+    assert.equal(carets.length, 1);
+  });
+
+  it('should not render a caret if noCaret prop is given', function() {
+    instance = ReactTestUtils.renderIntoDocument(
+        <DropdownButton title="Title" noCaret>
+          <MenuItem eventKey="1">MenuItem 1 content</MenuItem>
+          <MenuItem eventKey="2">MenuItem 2 content</MenuItem>
+        </DropdownButton>
+    );
+
+    var button = ReactTestUtils.findRenderedComponentWithType(instance, Button).getDOMNode();
+    var carets = button.getElementsByClassName('caret');
+    assert.equal(carets.length, 0);
+  });
 });