Merge tag 'v0.23.7' into v0.24-rc

Conflicts:
package.json
index.js

.eslintrc

@@ -12,10 +12,12 @@
     "babel"
   ],
   "rules": {
+    "constructor-super": 2,
     "comma-spacing": 2,
     "comma-style": [2, "last"],
     "one-var": [2, { "initialized": "never" }],
     "key-spacing": 0,
+    "no-this-before-super": 2,
     "no-underscore-dangle": 0,
     "no-unused-vars": [2, { "vars": "all", "args": "none" }],
     "no-var": 2,

CHANGELOG.md

@@ -1,3 +1,32 @@
+v0.23.7 - Wed, 01 Jul 2015 15:18:30 GMT
+---------------------------------------
+
+- [35ea201](../../commit/35ea201) [fixed] Accidental breaking change in Modal trigger
+
+
+
+v0.23.6 - Wed, 01 Jul 2015 00:48:02 GMT
+---------------------------------------
+
+- [1b1af04](../../commit/1b1af04) [changed] deprecate ModalTrigger
+- [83b4cbc](../../commit/83b4cbc) [changed] Modal doesn't require ModalTrigger
+- [d70f617](../../commit/d70f617) [changed] tooltips and popovers required id's for a11y
+- [389cf3f](../../commit/389cf3f) [changed] Deprecate OverlayTrigger positioning api and "manual" trigger
+- [5eb8666](../../commit/5eb8666) [added] Overlay component
+- [1638f69](../../commit/1638f69) [added] Position component for custom Overlays
+- [f799110](../../commit/f799110) [added] Portal component; replaces OverlayMixin
+- [97ef415](../../commit/97ef415) [fixed] Modal won't steal focus from children
+- [a8b177a](../../commit/a8b177a) [fixed] Stack overflow with nested Modals
+- [3caa866](../../commit/3caa866) [changed] Update babel-loader
+- [6ffa325](../../commit/6ffa325) [fixed] 'componentClass' property type is 'elementType' now
+- [0e5980f](../../commit/0e5980f) [added] 'elementType' custom prop type validator
+- [8f582d2](../../commit/8f582d2) [changed] Update karma-chrome-launcher. Dev dependency
+- [d4089d0](../../commit/d4089d0) [changed] Update eslint-plugin-mocha. Dev dependency
+- [fd547f4](../../commit/fd547f4) [changed] Update karma-mocha. Dev dependency.
+- [c5797e8](../../commit/c5797e8) [added] componentClass prop to Jumbotron
+
+
+
 v0.23.5 - Tue, 23 Jun 2015 01:31:35 GMT
 ---------------------------------------
 

CONTRIBUTING.md

@@ -17,9 +17,10 @@ and submitting pull requests, but please respect the following restrictions:
 
 - Please do not use the issue tracker for personal support requests. Stack
   Overflow ([react-bootstrap](http://stackoverflow.com/questions/tagged/react-bootstrap)
-  tag), [Slack](http://www.reactiflux.com/) or
-  [gitter](https://gitter.im/react-bootstrap/react-bootstrap) are better places
-  to get help.
+  tag), [Slack](http://www.reactiflux.com/),
+  [gitter](https://gitter.im/react-bootstrap/react-bootstrap), or
+  [Thinkful](http://start.thinkful.com/react/?utm_source=github&utm_medium=badge&utm_campaign=react-bootstrap)
+  are better places to get help.
 - Please do not open issues or pull requests regarding the code in React or
   Bootstrap (open them in their respective repositories).
 
@@ -68,11 +69,52 @@ doesn't make sense to do this, then it doesn't make sense to use `[changed]` or
 `[removed]` :). For further reading on writing a well formed commit message,
 check out these [5 useful tips for a better commit message][commit-message]
 
+### Using `[changed]` with development dependencies updates
+
+Use `[changed]` if dev-dependency has impact on the resulting code or API.
+`babel` is a good example of such dev-dependency.
+`chai`, `colors`, `express` or `eslint` are good examples when there is
+no need to add `[changed]`.
+
+## Visual Changes
+
+When making a visual change, if at all feasible please provide screenshots
+and/or screencasts of the proposed change. This will help us to understand the
+desired change easier.
+
 ## Docs
 
 Please update the docs with any API changes, the code and docs should always be
 in sync.
 
+Component prop documentation is generated automatically from the React components
+and their leading comments. Please make sure to provide comments for any `propTypes` you add
+or change in a Component.
+
+```js
+propTypes: {
+    /**
+     * Sets the visibility of the Component
+     */
+    show: React.PropTypes.bool,
+
+    /**
+     * A callback fired when the visibility changes
+     * @type {func}
+     * @required
+     */
+    onHide: myCustomPropType
+}
+```
+
+There are a few caveats to this format that differ from conventional JSDoc comments.
+
+- Only specific doclets (the @ things) should be used, and only when the data cannot be parsed from the component itself
+    - `@type`: Override the "type", use the same names as the default React PropTypes: string, func, bool, number, object. You can express enum and oneOfType types, Like `{("optionA"|"optionB")}`.
+    - `@required`: to mark a prop as required (use the normal React isRequired if possible)
+    - `@private`: Will hide the prop in the documentation
+- All description text should be above the doclets.
+
 ## Implement additional components and features
 
 This project is seeking parity with the core Bootstrap library.

README.md

@@ -7,6 +7,7 @@
 
 [![HuBoard][huboard-badge]][huboard]
 [![Gitter][gitter-badge]][gitter]
+[![Thinkful][thinkful-badge]][thinkful]
 
 [![NPM version][npm-badge]][npm]
 [![Bower version][bower-badge]][bower]
@@ -75,5 +76,8 @@ Yes please! See the [contributing guidelines][contributing] for details.
 [huboard-badge]: https://img.shields.io/badge/Hu-Board-7965cc.svg
 [huboard]: https://huboard.com/react-bootstrap/react-bootstrap
 
+[thinkful-badge]: https://tf-assets-staging.s3.amazonaws.com/badges/thinkful_repo_badge.svg
+[thinkful]: http://start.thinkful.com/react/?utm_source=github&utm_medium=badge&utm_campaign=react-bootstrap
+
 [appveyor-badge]: https://ci.appveyor.com/api/projects/status/ylitpyo6n5yq1s6i/branch/master?svg=true
 [appveyor]: https://ci.appveyor.com/project/react-bootstrap/react-bootstrap/branch/master

appveyor.yml

@@ -4,7 +4,7 @@ version: '{build}'
 install:
   # Get the latest stable version of io.js
   - ps: Install-Product node ''
-  - npm -g install npm@latest
+  - npm -g install npm@2.11.x
   - set PATH=%APPDATA%\npm;%PATH%
   - node --version
   - npm --version

docs/assets/style.css

@@ -162,3 +162,13 @@ body {
   position: absolute;
 }
 
+.prop-table {
+  background-color: white;
+}
+
+.bs-example.tooltip-static .tooltip {
+  position: relative;
+  display: inline-block;
+  margin: 5px 10px;
+
+}

docs/build.js

@@ -6,6 +6,7 @@ import Root from './src/Root';
 import fsp from 'fs-promise';
 import { copy } from '../tools/fs-utils';
 import { exec } from '../tools/exec';
+import metadata from './generate-metadata';
 
 const repoRoot = path.resolve(__dirname, '../');
 const docsBuilt = path.join(repoRoot, 'docs-built');
@@ -21,12 +22,12 @@ const readmeDest = path.join(docsBuilt, 'README.md');
  * @return {Promise} promise
  * @internal
  */
-function generateHTML(fileName) {
+function generateHTML(fileName, propData) {
   return new Promise((resolve, reject) => {
     const urlSlug = fileName === 'index.html' ? '/' : `/${fileName}`;
 
     Router.run(routes, urlSlug, Handler => {
-      let html = React.renderToString(React.createElement(Handler));
+      let html = React.renderToString(React.createElement(Handler, { propData }));
       html = '<!doctype html>' + html;
       let write = fsp.writeFile(path.join(docsBuilt, fileName), html);
       resolve(write);
@@ -41,8 +42,10 @@ export default function BuildDocs({dev}) {
 
   return exec(`rimraf ${docsBuilt}`)
     .then(() => fsp.mkdir(docsBuilt))
-    .then(() => {
-      let pagesGenerators = Root.getPages().map(generateHTML);
+    .then(metadata)
+    .then(propData => {
+
+      let pagesGenerators = Root.getPages().map( page => generateHTML(page, propData));
 
       return Promise.all(pagesGenerators.concat([
         exec(`webpack --config webpack.docs.js --bail ${devOption}`),

docs/examples/.eslintrc

@@ -36,6 +36,7 @@
     "ModalTrigger",
     "OverlayTrigger",
     "OverlayMixin",
+    "Overlay",
     "PageHeader",
     "PageItem",
     "Pager",

docs/examples/ModalContained.js

@@ -9,28 +9,40 @@
  * }
  */
 
-const ContainedModal = React.createClass({
-  render() {
-    return (
-      <Modal {...this.props} title='Contained Modal' animation>
-        <div className='modal-body'>
-          Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
-      </Modal>
-    );
-  }
-});
-
 const Trigger = React.createClass({
+  getInitialState(){
+    return { show: false };
+  },
+
   render() {
+    let close = e => this.setState({ show: false});
+
     return (
       <div className='modal-container' style={{height: 200}}>
-        <ModalTrigger modal={<ContainedModal container={this} />} container={this}>
-          <Button bsStyle='primary' bsSize='large'>Launch contained modal</Button>
-        </ModalTrigger>
+        <Button
+          bsStyle='primary'
+          bsSize='large'
+          onClick={e => this.setState({ show: true})}
+        >
+          Launch contained modal
+        </Button>
+
+        <Modal
+          show={this.state.show}
+          onHide={close}
+          container={this}
+          aria-labelledby='contained-modal-title'
+        >
+          <Modal.Header closeButton>
+            <Modal.Title id='contained-modal-title'>Contained Modal</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={close}>Close</Button>
+          </Modal.Footer>
+        </Modal>
       </div>
     );
   }

docs/examples/ModalDefaultSizing.js

@@ -1,8 +1,11 @@
 const MySmallModal = React.createClass({
   render() {
     return (
-      <Modal {...this.props} bsSize='small' title='Modal heading' animation={false}>
-        <div className='modal-body'>
+      <Modal {...this.props} bsSize='small' aria-labelledby='contained-modal-title-sm'>
+        <Modal.Header closeButton>
+          <Modal.Title id='contained-modal-title-sm'>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           <h4>Wrapped Text</h4>
           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
@@ -13,10 +16,10 @@ const MySmallModal = React.createClass({
           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
           <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Close</Button>
+        </Modal.Footer>
       </Modal>
     );
   }
@@ -25,8 +28,11 @@ const MySmallModal = React.createClass({
 const MyLargeModal = React.createClass({
   render() {
     return (
-      <Modal {...this.props} bsSize='large' title='Modal heading' animation={false}>
-        <div className='modal-body'>
+      <Modal {...this.props} bsSize='large' aria-labelledby='contained-modal-title-lg'>
+        <Modal.Header closeButton>
+          <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           <h4>Wrapped Text</h4>
           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
@@ -37,24 +43,37 @@ const MyLargeModal = React.createClass({
           <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
           <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
           <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
-        </div>
-        <div className='modal-footer'>
-          <Button onClick={this.props.onRequestHide}>Close</Button>
-        </div>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={this.props.onHide}>Close</Button>
+        </Modal.Footer>
       </Modal>
     );
   }
 });
 
-const overlayTriggerInstance = (
-  <ButtonToolbar>
-    <ModalTrigger modal={<MySmallModal />}>
-      <Button bsStyle='primary' bsSize='large'>Launch small demo modal</Button>
-    </ModalTrigger>
-    <ModalTrigger modal={<MyLargeModal />}>
-      <Button bsStyle='primary' bsSize='large'>Launch large demo modal</Button>
-    </ModalTrigger>
-  </ButtonToolbar>
-);
+const App = React.createClass({
+  getInitialState(){
+    return { smShow: false, lgShow: false };
+  },
+  render(){
+    let smClose = e => this.setState({ smShow: false });
+    let lgClose = e => this.setState({ lgShow: false });
 
-React.render(overlayTriggerInstance, mountNode);
+    return (
+      <ButtonToolbar>
+        <Button bsStyle='primary' onClick={()=>this.setState({ smShow: true })}>
+          Launch small demo modal
+        </Button>
+        <Button bsStyle='primary' onClick={()=>this.setState({ lgShow: true })}>
+          Launch large demo modal
+        </Button>
+
+        <MySmallModal show={this.state.smShow} onHide={smClose} />
+        <MyLargeModal show={this.state.lgShow} onHide={lgClose} />
+      </ButtonToolbar>
+    );
+  }
+});
+
+React.render(<App/>, mountNode);