Merge pull request react-bootstrap#987 from taion/merge-v0.24

Merge v0.24
viktorrusakov · Jul 17, 2015 · 3a24be2 · 3a24be2
2 parents 77533d4 + 3ab6ee0
commit 3a24be2
Show file tree

Hide file tree

Showing 74 changed files with 2,063 additions and 1,190 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,5 +1,5 @@
 {
-  "optional": [
-    "es7.objectRestSpread"
-  ]
+  "stage": 1,
+  "optional": ["runtime"],
+  "loose": ["all"]
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -124,6 +124,16 @@ Also Bootstrap mentions http://getbootstrap.com/getting-started/#examples
 as examples of things you can do, but they are not part of the core library,
 therefore this project is the wrong place to implement them.
 
+## Breaking changes
+
+Breaking changes should be accompanied with deprecations of removed
+functionality. Prior to the 1.0.0 release, we aim to follow React's example of
+taking two Minor releases to break old functionality. As such, changes that
+intend to remove or change public APIs should be be submitted against the
+`vX-rc` branch, and should be accompanied with deprecation warnings on the old
+APIs. The deprecated APIs themselves should not be removed until the Minor
+release after that.
+
 ## Notes for lodash functions usage in the code
 
 You can use `lodash` but keep it to things where it actually needs it, i.e. don't use `lodash`'s `forEach` when `Array.prototype.forEach` is fine.

diff --git a/MAINTAINING.md b/MAINTAINING.md
@@ -95,13 +95,13 @@ then be re-applied and released with the proper version bump.
 ### Release Candidates
 
 In an effort to reduce the frequency with which we introduce breaking changes we
-should do our best to first push deprecation warnings in a Minor or Patch
-release. Also, Pull Requests with breaking changes should be submitted against
-the `vX-rc` branch, where X is the next Major version. Which we will in turn
-release as an `alpha` release of the next Major version. When we are ready to
-release the next Major version bump we will merge the `vX-rc` branch into the
-`master` branch and cut a `beta` release.  Once bugs have been addressed with
-the `beta` release then we will release the Major version bump.
+should do our best to first push deprecation warnings in a Minor release. Also,
+Pull Requests with breaking changes should be submitted against the `vX-rc`
+branch, where X is the next Major version. Which we will in turn release as an
+`alpha` release of the next Major version. When we are ready to release the next
+Major version bump we will merge the `vX-rc` branch into the `master` branch and
+cut a `beta` release.  Once bugs have been addressed with the `beta` release
+then we will release the Major version bump.
 
 ### Live releasing the documentation
 

diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@
 [![devDependency Status][dev-deps-badge]][dev-deps]
 [![peerDependency Status][peer-deps-badge]][peer-deps]
 
-__Under active development - APIs will change.__ Check out the [1.0.0 Roadmap](https://github.com/react-bootstrap/react-bootstrap/wiki#100-roadmap) and [Contributing Guidelines][contributing] to see where you can help out. Prior to the 1.0.0 release, breaking changes should result in a Minor version bump.
+__Under active development - APIs will change.__ Check out the [1.0.0 Roadmap](https://github.com/react-bootstrap/react-bootstrap/wiki#100-roadmap) and [Contributing Guidelines][contributing] to see where you can help out. Prior to the 1.0.0 release, deprecations or breaking changes should result in a Minor version bump.
 
 ## Docs
 

diff --git a/docs/build.js b/docs/build.js
@@ -35,9 +35,11 @@ function generateHTML(fileName, propData) {
   });
 }
 
-export default function BuildDocs({ dev }) {
+export default function BuildDocs({dev}) {
   console.log('Building: '.cyan + 'docs'.green + (dev ? ' [DEV]'.grey : ''));
 
+  const devOption = dev ? '' : '-p';
+
   return exec(`rimraf ${docsBuilt}`)
     .then(() => fsp.mkdir(docsBuilt))
     .then(metadata)
@@ -46,7 +48,7 @@ export default function BuildDocs({ dev }) {
       let pagesGenerators = Root.getPages().map( page => generateHTML(page, propData));
 
       return Promise.all(pagesGenerators.concat([
-        exec(`webpack --config webpack.docs.js ${dev ? '' : '-p '}--bail`),
+        exec(`webpack --config webpack.docs.js --bail ${devOption}`),
         copy(license, docsBuilt),
         copy(readmeSrc, readmeDest)
       ]));

diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
@@ -52,6 +52,8 @@
     "TabPane",
     "Tooltip",
     "Well",
-    "Thumbnail"
+    "Thumbnail",
+    "Collapse",
+    "Fade"
   }
 }
diff --git a/docs/examples/Collapse.js b/docs/examples/Collapse.js
@@ -0,0 +1,28 @@
+class Example extends React.Component {
+  constructor(...args){
+    super(...args);
+
+    this.state = {};
+  }
+
+  render(){
+
+    return (
+      <div>
+        <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
+          click
+        </Button>
+        <Collapse in={this.state.open}>
+          <div>
+            <Well>
+              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+              Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+            </Well>
+          </div>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+React.render(<Example/>, mountNode);
diff --git a/docs/examples/Fade.js b/docs/examples/Fade.js
@@ -0,0 +1,29 @@
+
+class Example extends React.Component {
+
+  constructor(...args){
+    super(...args);
+    this.state = {};
+  }
+
+  render(){
+
+    return (
+      <div>
+        <Button onClick={()=> this.setState({ open: !this.state.open })}>
+          click
+        </Button>
+        <Fade in={this.state.open}>
+          <div>
+            <Well>
+              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
+              Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+            </Well>
+          </div>
+        </Fade>
+      </div>
+    );
+  }
+}
+
+React.render(<Example/>, mountNode);
diff --git a/docs/examples/ModalTrigger.js → docs/examples/Modal.js b/docs/examples/ModalTrigger.js → docs/examples/Modal.js
diff --git a/docs/examples/ModalCustomSizing.js b/docs/examples/ModalCustomSizing.js
@@ -1,40 +1,52 @@
-const MyModal = React.createClass({
-  render() {
+const Example = React.createClass({
+
+  getInitialState(){
+    return { show: false };
+  },
+
+  render(){
+    let close = e => this.setState({ show: false });
+
     return (
-      <Modal {...this.props} dialogClassName='custom-modal'>
-        <Modal.Header closeButton>
-          <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <h4>Wrapped Text</h4>
-          <p>Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde commodi aspernatur enim, consectetur. Cumque deleniti temporibus ipsam atque a dolores quisquam quisquam adipisci possimus laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem!
-           Mollitia reiciendis porro quo magni incidunt dolore amet atque facilis ipsum deleniti rem! Dolores debitis voluptatibus ipsum dicta. Dolor quod amet ab sint esse distinctio tenetur. Veritatis laudantium quibusdam quidem corporis architecto veritatis. Ex facilis minima beatae sunt perspiciatis placeat. Quasi corporis
-           odio eaque voluptatibus ratione magnam nulla? Amet cum maiores consequuntur totam dicta! Inventore adipisicing vel vero odio modi doloremque? Vitae porro impedit ea minima laboriosam quisquam neque. Perspiciatis omnis obcaecati consequatur sunt deleniti similique facilis sequi. Ipsum harum vitae modi reiciendis officiis.
-           Quas laudantium laudantium modi corporis nihil provident consectetur omnis, natus nulla distinctio illum corporis. Sit ex earum odio ratione consequatur odit minus laborum? Eos? Sit ipsum illum architecto aspernatur perspiciatis error fuga illum, tempora harum earum, a dolores. Animi facilis inventore harum dolore accusamus
-           fuga provident molestiae eum! Odit dicta error dolorem sunt reprehenderit. Sit similique iure quae obcaecati harum. Eum saepe fugit magnam dicta aliquam? Sapiente possimus aliquam fugiat officia culpa sint! Beatae voluptates voluptatem excepturi molestiae alias in tenetur beatae placeat architecto. Sit possimus rerum
-           fugiat sapiente aspernatur. Necessitatibus tempora animi dicta perspiciatis tempora a velit in! Doloribus perspiciatis doloribus suscipit nam earum. Deleniti veritatis eaque totam assumenda fuga sapiente! Id recusandae. Consectetur necessitatibus eaque velit nobis aliquid? Fugit illum qui suscipit aspernatur alias ipsum
-           repudiandae! Quia omnis quisquam dignissimos a mollitia. Suscipit aspernatur eum maiores repellendus ipsum doloribus alias voluptatum consequatur. Consectetur quibusdam veniam quas tenetur necessitatibus repudiandae? Rem optio vel alias neque optio sapiente quidem similique reiciendis tempore. Illum accusamus officia
-           cum enim minima eligendi consectetur nemo veritatis nam nisi! Adipisicing nobis perspiciatis dolorum adipisci soluta architecto doloremque voluptatibus omnis debitis quas repellendus. Consequuntur assumenda illum commodi mollitia asperiores? Quis aspernatur consequatur modi veritatis aliquid at? Atque vel iure quos.
-           Amet provident voluptatem amet aliquam deserunt sint, elit dolorem ipsa, voluptas? Quos esse facilis neque nihil sequi non? Voluptates rem ab quae dicta culpa dolorum sed atque molestias debitis omnis! Sit sint repellendus deleniti officiis distinctio. Impedit vel quos harum doloribus corporis. Laborum ullam nemo quaerat
-           reiciendis recusandae minima dicta molestias rerum. Voluptas et ut omnis est ipsum accusamus harum. Amet exercitationem quasi velit inventore neque doloremque! Consequatur neque dolorem vel impedit sunt voluptate. Amet quo amet magni exercitationem libero recusandae possimus pariatur. Cumque eum blanditiis vel vitae
-           distinctio! Tempora! Consectetur sit eligendi neque sunt soluta laudantium natus qui aperiam quisquam consectetur consequatur sit sint a unde et. At voluptas ut officiis esse totam quasi dolorem! Hic deserunt doloribus repudiandae! Lorem quod ab nostrum asperiores aliquam ab id consequatur, expedita? Tempora quaerat
-           ex ea temporibus in tempore voluptates cumque. Quidem nam dolor reiciendis qui dolor assumenda ipsam veritatis quasi. Esse! Sit consectetur hic et sunt iste! Accusantium atque elit voluptate asperiores corrupti temporibus mollitia! Placeat soluta odio ad blanditiis nisi. Eius reiciendis id quos dolorum eaque suscipit
-           magni delectus maxime. Sit odit provident vel magnam quod. Possimus eligendi non corrupti tenetur culpa accusantium quod quis. Voluptatum quaerat animi dolore maiores molestias voluptate? Necessitatibus illo omnis laborum hic enim minima! Similique. Dolor voluptatum reprehenderit nihil adipisci aperiam voluptatem soluta
-           magnam accusamus iste incidunt tempore consequatur illo illo odit. Asperiores nesciunt iusto nemo animi ratione. Sunt odit similique doloribus temporibus reiciendis! Ullam. Dolor dolores veniam animi sequi dolores molestias voluptatem iure velit. Elit dolore quaerat incidunt enim aut distinctio. Ratione molestiae laboriosam
-           similique laboriosam eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.</p>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button onClick={this.props.onHide}>Close</Button>
-        </Modal.Footer>
-      </Modal>
+      <ButtonToolbar>
+        <Button bsStyle='primary' onClick={()=>this.setState({ show: true })}>
+          Launch demo modal
+        </Button>
+
+        <Modal
+          {...this.props}
+          onHide={close}
+          dialogClassName='custom-modal'
+        >
+          <Modal.Header closeButton>
+            <Modal.Title id='contained-modal-title-lg'>Modal heading</Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <h4>Wrapped Text</h4>
+            <p>Ipsum molestiae natus adipisci modi eligendi? Debitis amet quae unde commodi aspernatur enim, consectetur. Cumque deleniti temporibus ipsam atque a dolores quisquam quisquam adipisci possimus laboriosam. Quibusdam facilis doloribus debitis! Sit quasi quod accusamus eos quod. Ab quos consequuntur eaque quo rem!
+             Mollitia reiciendis porro quo magni incidunt dolore amet atque facilis ipsum deleniti rem! Dolores debitis voluptatibus ipsum dicta. Dolor quod amet ab sint esse distinctio tenetur. Veritatis laudantium quibusdam quidem corporis architecto veritatis. Ex facilis minima beatae sunt perspiciatis placeat. Quasi corporis
+             odio eaque voluptatibus ratione magnam nulla? Amet cum maiores consequuntur totam dicta! Inventore adipisicing vel vero odio modi doloremque? Vitae porro impedit ea minima laboriosam quisquam neque. Perspiciatis omnis obcaecati consequatur sunt deleniti similique facilis sequi. Ipsum harum vitae modi reiciendis officiis.
+             Quas laudantium laudantium modi corporis nihil provident consectetur omnis, natus nulla distinctio illum corporis. Sit ex earum odio ratione consequatur odit minus laborum? Eos? Sit ipsum illum architecto aspernatur perspiciatis error fuga illum, tempora harum earum, a dolores. Animi facilis inventore harum dolore accusamus
+             fuga provident molestiae eum! Odit dicta error dolorem sunt reprehenderit. Sit similique iure quae obcaecati harum. Eum saepe fugit magnam dicta aliquam? Sapiente possimus aliquam fugiat officia culpa sint! Beatae voluptates voluptatem excepturi molestiae alias in tenetur beatae placeat architecto. Sit possimus rerum
+             fugiat sapiente aspernatur. Necessitatibus tempora animi dicta perspiciatis tempora a velit in! Doloribus perspiciatis doloribus suscipit nam earum. Deleniti veritatis eaque totam assumenda fuga sapiente! Id recusandae. Consectetur necessitatibus eaque velit nobis aliquid? Fugit illum qui suscipit aspernatur alias ipsum
+             repudiandae! Quia omnis quisquam dignissimos a mollitia. Suscipit aspernatur eum maiores repellendus ipsum doloribus alias voluptatum consequatur. Consectetur quibusdam veniam quas tenetur necessitatibus repudiandae? Rem optio vel alias neque optio sapiente quidem similique reiciendis tempore. Illum accusamus officia
+             cum enim minima eligendi consectetur nemo veritatis nam nisi! Adipisicing nobis perspiciatis dolorum adipisci soluta architecto doloremque voluptatibus omnis debitis quas repellendus. Consequuntur assumenda illum commodi mollitia asperiores? Quis aspernatur consequatur modi veritatis aliquid at? Atque vel iure quos.
+             Amet provident voluptatem amet aliquam deserunt sint, elit dolorem ipsa, voluptas? Quos esse facilis neque nihil sequi non? Voluptates rem ab quae dicta culpa dolorum sed atque molestias debitis omnis! Sit sint repellendus deleniti officiis distinctio. Impedit vel quos harum doloribus corporis. Laborum ullam nemo quaerat
+             reiciendis recusandae minima dicta molestias rerum. Voluptas et ut omnis est ipsum accusamus harum. Amet exercitationem quasi velit inventore neque doloremque! Consequatur neque dolorem vel impedit sunt voluptate. Amet quo amet magni exercitationem libero recusandae possimus pariatur. Cumque eum blanditiis vel vitae
+             distinctio! Tempora! Consectetur sit eligendi neque sunt soluta laudantium natus qui aperiam quisquam consectetur consequatur sit sint a unde et. At voluptas ut officiis esse totam quasi dolorem! Hic deserunt doloribus repudiandae! Lorem quod ab nostrum asperiores aliquam ab id consequatur, expedita? Tempora quaerat
+             ex ea temporibus in tempore voluptates cumque. Quidem nam dolor reiciendis qui dolor assumenda ipsam veritatis quasi. Esse! Sit consectetur hic et sunt iste! Accusantium atque elit voluptate asperiores corrupti temporibus mollitia! Placeat soluta odio ad blanditiis nisi. Eius reiciendis id quos dolorum eaque suscipit
+             magni delectus maxime. Sit odit provident vel magnam quod. Possimus eligendi non corrupti tenetur culpa accusantium quod quis. Voluptatum quaerat animi dolore maiores molestias voluptate? Necessitatibus illo omnis laborum hic enim minima! Similique. Dolor voluptatum reprehenderit nihil adipisci aperiam voluptatem soluta
+             magnam accusamus iste incidunt tempore consequatur illo illo odit. Asperiores nesciunt iusto nemo animi ratione. Sunt odit similique doloribus temporibus reiciendis! Ullam. Dolor dolores veniam animi sequi dolores molestias voluptatem iure velit. Elit dolore quaerat incidunt enim aut distinctio. Ratione molestiae laboriosam
+             similique laboriosam eum et nemo expedita. Consequuntur perspiciatis cumque dolorem.</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onClick={close}>Close</Button>
+          </Modal.Footer>
+        </Modal>
+      </ButtonToolbar>
     );
   }
 });
 
-const overlayTriggerInstance = (
-  <ModalTrigger modal={<MyModal />}>
-    <Button bsStyle='primary' bsSize='large'>Launch demo modal</Button>
-  </ModalTrigger>
-);
 
-React.render(overlayTriggerInstance, mountNode);
+React.render(<Example/>, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -57,6 +57,7 @@ const ComponentsPage = React.createClass({
             <div className='row'>
               <div className='col-md-9' role='main'>
 
+
                 {/* Buttons */}
                 <div className='bs-docs-section'>
                   <h1 className='page-header'><Anchor id='buttons'>Buttons</Anchor> <small>Button</small></h1>
@@ -855,6 +856,22 @@ const ComponentsPage = React.createClass({
 
                   <h3><Anchor id='utilities-position-props'>Props</Anchor></h3>
                   <PropTable component='Position'/>
+
+                  <h2><Anchor id='utilities-transitions'>Transitions</Anchor></h2>
+
+                  <h3><Anchor id='utilities-collapse'>Collapse</Anchor></h3>
+                  <p>Add a collapse toggle animation to an element or component.</p>
+                  <ReactPlayground codeText={Samples.Collapse} />
+
+                  <h4><Anchor id='utilities-collapse-props'>Props</Anchor></h4>
+                  <PropTable component='Collapse'/>
+
+                  <h3><Anchor id='utilities-fade'>Fade</Anchor></h3>
+                  <p>Add a fade animation to a child element or component.</p>
+                  <ReactPlayground codeText={Samples.Fade} />
+
+                  <h4><Anchor id='utilities-fade-props'>Props</Anchor></h4>
+                  <PropTable component='Fade'/>
                 </div>
               </div>
 

diff --git a/docs/src/GettingStartedPage.js b/docs/src/GettingStartedPage.js
@@ -43,7 +43,12 @@ $ npm install react-bootstrap`
                       codeText={
 `var Alert = require('react-bootstrap/lib/Alert');
 // or
-var Alert = require('react-bootstrap').Alert;`
+var Alert = require('react-bootstrap').Alert;
+
+// with ES6 modules
+import Alert from 'react-bootstrap/lib/Alert';
+// or
+import {Alert} from 'react-bootstrap';`
                       }
                     />
                   </div>