Merge remote-tracking branch 'origin/master' into react-0.13

Conflicts:
	package.json
	src/NavItem.jsx
	src/Panel.jsx

.travis.yml

@@ -1,3 +1,4 @@
+sudo: false
 language: node_js
 node_js:
-  - "0.10"
+  - "0.10"

CHANGELOG.md

@@ -1,3 +1,20 @@
+v0.17.0 - Tue, 17 Mar 2015 15:03:27 GMT
+---------------------------------------
+
+- [4fae871](../../commit/4fae871) [added] CollapsableNav implements bootstrap markup for navbar-collapse
+- [befed83](../../commit/befed83) [fixed] All panel-* classes dynamic based on bsStyle prop
+- [de6f7dd](../../commit/de6f7dd) [fixed] CollapsableMixin fixed size
+- [7cc4747](../../commit/7cc4747) [fixed] Added role="button" to NavItem for aria compliance.
+- [3b6ba7a](../../commit/3b6ba7a) [fixed] Col Offset/Pull/Push of zero. Fixes #406
+- [66c439f](../../commit/66c439f) [fixed] OverlayTrigger improvement related to #353 . Helps reduce browser reflows for lots of multiple OverlayTriggers being rendered at once. Before: http://i.imgur.com/e4UZ5l6.png , http://i.imgur.com/Tw39F9t.png After: http://i.imgur.com/bU0f7VY.png
+
+
+v0.16.1 - Tue, 03 Mar 2015 23:04:19 GMT
+---------------------------------------
+
+- [71ff264](../../commit/71ff264) [added] bsSize prop to Input, supporting input groups
+
+
 v0.16.0 - Fri, 27 Feb 2015 14:01:37 GMT
 ---------------------------------------
 

README.md

@@ -2,7 +2,7 @@
 
 [Bootstrap 3](http://getbootstrap.com) components built with [React](http://facebook.github.io/react/)
 
-[![Build Status](https://travis-ci.org/react-bootstrap/react-bootstrap.svg)](https://travis-ci.org/react-bootstrap/react-bootstrap) [![NPM version](https://badge.fury.io/js/react-bootstrap.svg)](http://badge.fury.io/js/react-bootstrap) [![Bower version](https://badge.fury.io/bo/react-bootstrap.svg)](http://badge.fury.io/bo/react-bootstrap) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-bootstrap/react-bootstrap?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Build Status](https://travis-ci.org/react-bootstrap/react-bootstrap.svg?branch=master)](https://travis-ci.org/react-bootstrap/react-bootstrap) [![NPM version](https://badge.fury.io/js/react-bootstrap.svg)](http://badge.fury.io/js/react-bootstrap) [![Bower version](https://badge.fury.io/bo/react-bootstrap.svg)](http://badge.fury.io/bo/react-bootstrap) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-bootstrap/react-bootstrap?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
 Under active development - APIs will change.
 
@@ -30,6 +30,5 @@ and many [contributors](https://github.com/react-bootstrap/react-bootstrap/graph
 Yes please!
 
 - Run `npm install`, `npm run test-watch` to run tests while you develop (however this hides any build errors, you can see these with `grunt build`)
-- Add tests for any new or changed functionality
+- Review the [contributing guidelines](https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md)
 - See [issues](https://github.com/stevoland/react-bootstrap/issues) for some ideas
-- Follow existing style

docs/README.md

@@ -16,6 +16,8 @@ $ cd react-bootstrap/docs
 $ npm install
 ```
 
+You must have previously run `grunt build` and `npm install` from the main directory. 
+
 ### Instructions
 
 #### Development

docs/examples/CollapsableNav.js

@@ -0,0 +1,23 @@
+var navbarInstance = (
+    <Navbar brand="React-Bootstrap" toggleNavKey={0}>
+      <CollapsableNav eventKey={0}> {/* This is the eventKey referenced */}
+        <Nav navbar>
+          <NavItem eventKey={1} href="#">Link</NavItem>
+          <NavItem eventKey={2} href="#">Link</NavItem>
+          <DropdownButton eventKey={3} title="Dropdown">
+            <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>
+        </Nav>
+        <Nav navbar right>
+          <NavItem eventKey={1} href="#">Link Right</NavItem>
+          <NavItem eventKey={2} href="#">Link Right</NavItem>
+        </Nav>
+      </CollapsableNav>
+    </Navbar>
+  );
+
+React.render(navbarInstance, mountNode);

docs/examples/CollapsableParagraph.js

@@ -0,0 +1,37 @@
+var CollapsableParagraph = React.createClass({
+  mixins: [CollapsableMixin],
+
+  getCollapsableDOMNode: function(){
+    return this.refs.panel.getDOMNode();
+  },
+
+  getCollapsableDimensionValue: function(){
+    return this.refs.panel.getDOMNode().scrollHeight;
+  },
+
+  onHandleToggle: function(e){
+    e.preventDefault();
+    this.setState({expanded:!this.state.expanded});
+  },
+
+  render: function(){
+    var styles = this.getCollapsableClassSet();
+    var text = this.isExpanded() ? 'Hide' : 'Show';
+    return (
+      <div>
+        <Button onClick={this.onHandleToggle}>{text} Content</Button>
+        <div ref="panel" className={classSet(styles)}>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+});
+
+var panelInstance = (
+  <CollapsableParagraph>
+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+  </CollapsableParagraph>
+);
+
+React.render(panelInstance, mountNode);

docs/src/ComponentsPage.js

@@ -207,6 +207,10 @@ var ComponentsPage = React.createClass({
                   <h3 id="panels-accordion">Accordions</h3>
                   <p><code>&lt;Accordion /&gt;</code> aliases <code>&lt;PanelGroup accordion /&gt;</code>.</p>
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/PanelGroupAccordion.js', 'utf8')} />
+
+                  <h3 id="panels-collapsable">Collapsable Mixin</h3>
+                  <p><code>CollapsableMixin</code> can be used to create your own components with collapse functionality.</p>
+                  <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/CollapsableParagraph.js', 'utf8')} />
                 </div>
 
                 <div className="bs-docs-section">
@@ -353,6 +357,16 @@ var ComponentsPage = React.createClass({
                     </pre>
                   </div>
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/NavbarCollapsable.js', 'utf8')} />
+
+                  <h3>Mobile Friendly (Multiple Nav Components)</h3>
+                  <p>To have a mobile friendly Navbar that handles multiple <code>Nav</code> components use <code>CollapsableNav</code>. The <code>toggleNavKey</code> must still be set, however, the corresponding <code>eventKey</code> must now be on the <code>CollapsableNav</code> component.</p>
+                  <div className="bs-callout bs-callout-info">
+                    <h4>Div collapse</h4>
+                    <p>The <code>navbar-collapse</code> div gets created as the collapsable element which follows the <a href="http://getbootstrap.com/components/#navbar-default">bootstrap</a> collapsable navbar documentation.</p>
+                    <pre>&lt;div class="collapse navbar-collapse"&gt;&lt;/div&gt;</pre>
+                  </div>
+
+                  <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/CollapsableNav.js', 'utf8')} />
                 </div>
 
                 {/* Tabbed Areas */}

docs/src/GettingStartedPage.js

@@ -23,7 +23,7 @@ var Page = React.createClass({
               <div className="col-md-9" role="main">
                 <div className="bs-docs-section">
                   <h2 id="setup" className="page-header">Setup</h2>
-                  <p className="lead">You can import the lib with as AMD modules, CommonJS modules as a global JS script.</p>
+                  <p className="lead">You can import the lib as AMD modules, CommonJS modules, or as a global JS script.</p>
 
                   <p>First add the Bootstrap CSS to your project; check <a href="http://getbootstrap.com/getting-started/" name="Bootstrap Docs">here</a> if you have not already done that. Then:</p>
 

docs/src/ReactPlayground.js

@@ -8,6 +8,8 @@ var Badge = require('../../lib/Badge');
 var Button = require('../../lib/Button');
 var ButtonGroup = require('../../lib/ButtonGroup');
 var ButtonToolbar = require('../../lib/ButtonToolbar');
+var CollapsableMixin = require('../../lib/CollapsableMixin');
+var CollapsableNav = require('../../lib/CollapsableNav');
 var Carousel = require('../../lib/Carousel');
 var CarouselItem = require('../../lib/CarouselItem');
 var Col = require('../../lib/Col');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Bootstrap 3 components build with React",
   "repository": {
     "type": "git",
@@ -65,4 +65,4 @@
   "dependencies": {
     "classnames": "^1.1.4"
   }
-}
+}

src/BootstrapMixin.js

@@ -29,7 +29,11 @@ var BootstrapMixin = {
     }
 
     return classes;
+  },
+
+  prefixClass: function(subClass) {
+    return constants.CLASSES[this.props.bsClass] + '-' + subClass;
   }
 };
 
-module.exports = BootstrapMixin;
+module.exports = BootstrapMixin;

src/Col.jsx

@@ -46,19 +46,19 @@ var Col = React.createClass({
 
       prop = size + 'Offset';
       classPart = size + '-offset-';
-      if (this.props[prop]) {
+      if (this.props[prop] >= 0) {
         classes['col-' + classPart + this.props[prop]] = true;
       }
 
       prop = size + 'Push';
       classPart = size + '-push-';
-      if (this.props[prop]) {
+      if (this.props[prop] >= 0) {
         classes['col-' + classPart + this.props[prop]] = true;
       }
 
       prop = size + 'Pull';
       classPart = size + '-pull-';
-      if (this.props[prop]) {
+      if (this.props[prop] >= 0) {
         classes['col-' + classPart + this.props[prop]] = true;
       }
     }, this);
@@ -71,4 +71,4 @@ var Col = React.createClass({
   }
 });
 
-module.exports = Col;
+module.exports = Col;