Merge pull request react-bootstrap#1503 from taion/merge-v0.28

Merge v0.28
mattermost · Nov 15, 2015 · 5bf27fa · 5bf27fa
2 parents 40e296a + 04cf5f8
commit 5bf27fa
Show file tree

Hide file tree

Showing 76 changed files with 2,019 additions and 1,954 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -17,14 +17,23 @@
     "comma-dangle": 0,
     "eqeqeq": [2, "allow-null"],
     "id-length": 0,
+    "no-eq-null": 0,
     "one-var": [2, { "initialized": "never" }],
     "prefer-const": 0,
     "no-param-reassign": 0,
     "no-this-before-super": 2,
     "babel/object-shorthand": 2,
     "react/jsx-boolean-value": 2,
     "react/jsx-no-duplicate-props": 2,
-    "react/prop-types": [2, { "ignore": [ "children", "className", "style" ] }],
-    "react/sort-comp": 0
+    "react/sort-comp": 0,
+    "react/prop-types": [2, { "ignore": [
+        "children",
+        "className",
+        "style",
+        "bsStyle",
+        "bsClass",
+        "bsSize"
+        ]
+    }],
   }
 }
diff --git a/docs/assets/docs.css b/docs/assets/docs.css
@@ -535,8 +535,10 @@ body {
  */
 
 /* By default it's not affixed in mobile views, so undo that */
-.bs-docs-sidebar.affix {
-  position: static;
+@media (max-width: 991px) {
+  .bs-docs-sidebar {
+    position: static !important;
+  }
 }
 @media (min-width: 768px) {
   .bs-docs-sidebar {
@@ -628,35 +630,17 @@ body {
 
 /* Show and affix the side nav when space allows it */
 @media (min-width: 992px) {
+  .bs-docs-sidebar-holder {
+    padding-top: 20px;
+  }
   .bs-docs-sidebar .nav > .active > ul {
     display: block;
   }
-  /* Widen the fixed sidebar */
-  .bs-docs-sidebar.affix,
-  .bs-docs-sidebar.affix-bottom {
-    width: 213px;
-  }
-  .bs-docs-sidebar.affix {
-    position: fixed; /* Undo the static from mobile first approach */
-    top: 20px;
-  }
-  .bs-docs-sidebar.affix-bottom {
-    position: absolute; /* Undo the static from mobile first approach */
-  }
-  .bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
-  .bs-docs-sidebar.affix .bs-docs-sidenav {
+  .bs-docs-sidebar .bs-docs-sidenav {
     margin-top: 0;
     margin-bottom: 0;
   }
 }
-@media (min-width: 1200px) {
-  /* Widen the fixed sidebar again */
-  .bs-docs-sidebar.affix-bottom,
-  .bs-docs-sidebar.affix {
-    width: 263px;
-  }
-}
-
 
 /*
  * Docs sections

diff --git a/docs/examples/.eslintrc b/docs/examples/.eslintrc
@@ -34,7 +34,10 @@
     "ListGroup",
     "ListGroupItem",
     "Nav",
-    "NavBrand",
+    "NavbarBrand",
+    "NavbarHeader",
+    "NavbarToggle",
+    "NavbarCollapse",
     "Navbar",
     "NavDropdown",
     "NavItem",

diff --git a/docs/examples/CollapsibleNav.js b/docs/examples/CollapsibleNav.js
diff --git a/docs/examples/NavbarBasic.js b/docs/examples/NavbarBasic.js
@@ -1,15 +1,19 @@
 const navbarInstance = (
   <Navbar>
-    <NavBrand><a href="#">React-Bootstrap</a></NavBrand>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">React-Bootstrap</a>
+      </Navbar.Brand>
+    </Navbar.Header>
     <Nav>
       <NavItem eventKey={1} href="#">Link</NavItem>
       <NavItem eventKey={2} href="#">Link</NavItem>
       <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
-        <MenuItem eventKey="1">Action</MenuItem>
-        <MenuItem eventKey="2">Another action</MenuItem>
-        <MenuItem eventKey="3">Something else here</MenuItem>
+        <MenuItem eventKey={3.1}>Action</MenuItem>
+        <MenuItem eventKey={3.2}>Another action</MenuItem>
+        <MenuItem eventKey={3.3}>Something else here</MenuItem>
         <MenuItem divider />
-        <MenuItem eventKey="4">Separated link</MenuItem>
+        <MenuItem eventKey={3.3}>Separated link</MenuItem>
       </NavDropdown>
     </Nav>
   </Navbar>

diff --git a/docs/examples/NavbarCollapsible.js b/docs/examples/NavbarCollapsible.js
@@ -1,17 +1,28 @@
 const navbarInstance = (
-  <Navbar inverse toggleNavKey={0}>
-    <NavBrand><a href="#">React-Bootstrap</a></NavBrand>
-    <Nav right eventKey={0}> {/* This is the eventKey referenced */}
-      <NavItem eventKey={1} href="#">Link</NavItem>
-      <NavItem eventKey={2} href="#">Link</NavItem>
-      <NavDropdown eventKey={3} title="Dropdown" id="collapsible-navbar-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>
-      </NavDropdown>
-    </Nav>
+  <Navbar inverse>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">React-Bootstrap</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Nav>
+        <NavItem eventKey={1} href="#">Link</NavItem>
+        <NavItem eventKey={2} href="#">Link</NavItem>
+        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
+          <MenuItem eventKey={3.1}>Action</MenuItem>
+          <MenuItem eventKey={3.2}>Another action</MenuItem>
+          <MenuItem eventKey={3.3}>Something else here</MenuItem>
+          <MenuItem divider />
+          <MenuItem eventKey={3.3}>Separated link</MenuItem>
+        </NavDropdown>
+      </Nav>
+      <Nav pullRight>
+        <NavItem eventKey={1} href="#">Link Right</NavItem>
+        <NavItem eventKey={2} href="#">Link Right</NavItem>
+      </Nav>
+    </Navbar.Collapse>
   </Navbar>
 );
 

diff --git a/docs/examples/NavbarForm.js b/docs/examples/NavbarForm.js
@@ -0,0 +1,19 @@
+const navbarInstance = (
+  <Navbar>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">Brand</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Navbar.Form pullLeft>
+        <Input type="text" placeholder="Search"/>
+        {' '}
+        <Button type="submit">Submit</Button>
+      </Navbar.Form>
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+ReactDOM.render(navbarInstance, mountNode);
diff --git a/docs/examples/NavbarTextLink.js b/docs/examples/NavbarTextLink.js
@@ -0,0 +1,20 @@
+const navbarInstance = (
+  <Navbar>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">Brand</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Navbar.Text>
+        Signed in as: <Navbar.Link href="#">Mark Otto</Navbar.Link>
+      </Navbar.Text>
+      <Navbar.Text pullRight>
+        Have a great day!
+      </Navbar.Text>
+    </Navbar.Collapse>
+  </Navbar>
+);
+
+ReactDOM.render(navbarInstance, mountNode);
diff --git a/docs/generate-metadata.js b/docs/generate-metadata.js
@@ -3,6 +3,7 @@ import glob from 'glob';
 import fsp from 'fs-promise';
 import promisify from '../tools/promisify';
 import marked from 'marked';
+import defaultDescriptions from './src/defaultPropDescriptions';
 
 marked.setOptions({
   xhtml: true
@@ -18,6 +19,7 @@ let cleanDoclets = desc => {
 
 let cleanDocletValue = str => str.trim().replace(/^\{/, '').replace(/\}$/, '');
 
+let quote = str => str && `'${str}'`;
 
 let isLiteral = str => (/^('|")/).test(str.trim());
 
@@ -26,10 +28,11 @@ let isLiteral = str => (/^('|")/).test(str.trim());
  *
  * @param  {ComponentMetadata|PropMetadata} obj
  */
-function parseDoclets(obj) {
-  obj.doclets = metadata.parseDoclets(obj.desc || '') || {};
-  obj.desc = cleanDoclets(obj.desc || '');
-  obj.descHtml = marked(obj.desc || '');
+function parseDoclets(obj, propName) {
+  let desc = obj.desc || defaultDescriptions[propName] || '';
+  obj.doclets = metadata.parseDoclets(desc) || {};
+  obj.desc = cleanDoclets(desc);
+  obj.descHtml = marked(desc);
 }
 
 /**
@@ -61,7 +64,7 @@ function applyPropDoclets(props, propName) {
 
   // Use @required to mark a prop as required
   // useful for custom propTypes where there isn't a `.isRequired` addon
-  if ( doclets.required) {
+  if (doclets.required) {
     prop.required = true;
   }
 
@@ -71,27 +74,71 @@ function applyPropDoclets(props, propName) {
   }
 }
 
+function addBootstrapPropTypes(Component, componentData) {
+  let propTypes = Component.propTypes || {};
+  let defaultProps = Component.defaultProps || {};
+
+  function bsPropInfo(propName) {
+    let props = componentData.props;
+    let prop = propTypes[propName];
+
+    if (prop && !props[propName]) {
+      let values = prop._values || [];
+
+      props[propName] = {
+        desc: '',
+        defaultValue: quote(defaultProps[propName]),
+        type: {
+          name: 'enum',
+          value: values.map( v => `"${v}"`),
+        }
+      };
+    }
+  }
+
+  bsPropInfo('bsStyle');
+  bsPropInfo('bsSize');
+
+  if (propTypes.bsClass) {
+    componentData.props.bsClass = {
+      desc: '',
+      defaultValue: quote(defaultProps.bsClass),
+      type: { name: 'string' }
+    };
+  }
+}
 
 export default function generate(destination, options = { mixins: true, inferComponent: true }) {
   return globp(__dirname + '/../src/**/*.js') // eslint-disable-line no-path-concat
     .then( files => {
       let results = files.map(
-        filename => fsp.readFile(filename).then(content => metadata(content, options)) );
+        filename => fsp.readFile(filename).then(content => metadata(content, options)));
 
       return Promise.all(results)
         .then( data => {
           let result = {};
 
           data.forEach(components => {
             Object.keys(components).forEach(key => {
+              let Component;
+
+              try {
+                // require the actual component to inspect props we can only get a runtime
+                Component = require('../src/' + key);
+              } catch (e) {} //eslint-disable-line
+
               const component = components[key];
 
+              if (Component) {
+                addBootstrapPropTypes(Component, component);
+              }
+
               parseDoclets(component);
 
               Object.keys(component.props).forEach( propName => {
                 const prop = component.props[propName];
 
-                parseDoclets(prop);
+                parseDoclets(prop, propName);
                 applyPropDoclets(component.props, propName);
               });
             });