[changed] Split the Navbar component into sub-components

kyletsang · Nov 15, 2015 · 5dbafd3 · 5dbafd3
1 parent 60a7b07
commit 5dbafd3
Show file tree

Hide file tree

Showing 22 changed files with 487 additions and 442 deletions.
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,6 +1,10 @@
 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>

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="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>
+      <Nav right>
+        <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,21 @@
+const navbarInstance = (
+  <Navbar>
+    <Navbar.Header>
+      <Navbar.Brand>
+        <a href="#">Brand</a>
+      </Navbar.Brand>
+      <Navbar.Toggle />
+    </Navbar.Header>
+    <Navbar.Collapse>
+      <Navbar.Form pullLeft>
+        <div className="form-group">
+          <Input type="text" placeholder="Search"/>
+        </div>
+        {' '}
+        <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/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -501,51 +501,72 @@ const ComponentsPage = React.createClass({
 
                 {/* Navbar */}
                 <div className="bs-docs-section">
-                  <h1 className="page-header"><Anchor id="navbars">Navbars</Anchor> <small>Navbar, NavBrand, Nav, NavItem</small></h1>
+                  <h1 className="page-header">
+                    <Anchor id="navbars">Navbars</Anchor>{' '}
+                    <small>Navbar, NavbarBrand, NavbarHeader, NavbarToggle, NavbarCollapse</small>
+                  </h1>
 
-                  <p>Navbars are by default accessible and will provide <code>role="navigation"</code>.</p>
-                  <p>They also supports all the different Bootstrap classes as properties. Just camelCase the css class and remove navbar from it. For example <code>navbar-fixed-top</code> becomes the property <code>fixedTop</code>. The different properties are <code>fixedTop</code>, <code>fixedBottom</code>, <code>staticTop</code>, <code>inverse</code>, <code>fluid</code>.</p>
-                  <p>You can specify a brand node by wrapping it in a <code>NavBrand</code> element and passing it as a child to the <code>Navbar</code>.</p>
-                  <p>You can drag elements to the right by specifying the <code>right</code> property on the <code>Nav</code> component.</p>
+                  <p>
+                    They also supports all the different Bootstrap classes as properties. Just camelCase
+                    the css class and remove navbar from it.
+
+                    For example <code>navbar-fixed-top</code> becomes the property <code>fixedTop</code>.
+                    The different properties are <code>fixedTop</code>, <code>fixedBottom</code>, <code>staticTop</code>
+                    , <code>inverse</code>, <code>fluid</code>.
+                  </p>
+                  <p>
+                    You can also align elements to the right by specifying the <code>right</code> prop on
+                    the <code>Nav</code> component.
+                  </p>
 
                   <h3><Anchor id="navbars-basic">Navbar Basic Example</Anchor></h3>
                   <ReactPlayground codeText={Samples.NavbarBasic} />
-
-                  <h3><Anchor id="navbars-mobile-friendly">Mobile Friendly</Anchor></h3>
-                  <p>To have a mobile friendly Navbar, specify the property <code>toggleNavKey</code> on the Navbar with a value corresponding to an <code>eventKey</code> of one of his <code>Nav</code> children. This child will be the one collapsed.</p>
-                  <p>By setting the property {React.DOM.code(null, 'defaultNavExpanded')} the Navbar will start expanded by default.</p>
                   <div className="bs-callout bs-callout-info">
-                    <h4>Scrollbar overflow</h4>
-                    <p>The height of the collapsible is slightly smaller than the real height. To hide the scroll bar, add the following css to your style files.</p>
-                    <pre>
-                      {React.DOM.code(null,
-                        '.navbar-collapse {\n' +
-                        '  overflow: hidden;\n' +
-                        '}\n'
-                      )}
-                    </pre>
+                    <h4>Additional Import Options</h4>
+                    <p>
+                      The Navbar Header, Toggle, Brand, and Collapse components are available as static properties
+                      the <code>{"<Navbar/>"}</code> component, but you can also,
+                      import them directly from the <code>/lib</code> directory
+                      like: <code>{'require("react-bootstrap/lib/NavbarHeader")'}</code>.
+                    </p>
                   </div>
+
+                  <h3><Anchor id="navbars-mobile-friendly">Responsive Navbars</Anchor></h3>
+                  <p>
+                    To have a mobile friendly Navbar, Add a <code>Navbar.Toggle</code> to your Header and wrap your
+                    Navs in a <code>Navbar.Collapse</code> component. The <code>Navbar</code> will automatically wire
+                    the toggle and collapse together!
+                  </p>
+                  <p>
+                    By setting the prop <code>defaultNavExpanded</code> the Navbar will start
+                    expanded by default. You can also finely control the collapsing behavior by using
+                    the <code>navExpanded</code> and <code>onToggle</code> props.
+                  </p>
+
                   <ReactPlayground codeText={Samples.NavbarCollapsible} />
 
-                  <h3><Anchor id="navbars-mobile-friendly-multiple">Mobile Friendly (Multiple Nav Components)</Anchor></h3>
-                  <p>To have a mobile friendly Navbar that handles multiple <code>Nav</code> components use <code>CollapsibleNav</code>. The <code>toggleNavKey</code> must still be set, however, the corresponding <code>eventKey</code> must now be on the <code>CollapsibleNav</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 collapsible element which follows the <a href="http://getbootstrap.com/components/#navbar-default">bootstrap</a> collapsible navbar documentation.</p>
-                    <pre>&lt;div class="collapse navbar-collapse"&gt;&lt;/div&gt;</pre>
-                  </div>
-                  <ReactPlayground codeText={Samples.CollapsibleNav} />
+                  <h3><Anchor id="navbars-form">Forms</Anchor></h3>
+                  <p>
+                    Use the <code>Navbar.Form</code> convenience component to apply proper margins and alignment to
+                    form components.
+                  </p>
+                  <ReactPlayground codeText={Samples.NavbarForm} />
+
+                  <h3><Anchor id="navbars-text-link">Text and Non-nav links</Anchor></h3>
+                  <p>
+                    Loose text and links can be wraped in the convenience
+                    components: <code>Navbar.Link</code> and <code>Navbar.Text</code>
+                  </p>
+
+                  <ReactPlayground codeText={Samples.NavbarTextLink} />
 
                   <h3><Anchor id="navbar-props">Props</Anchor></h3>
 
                   <h4><Anchor id="navs-props-navbar">Navbar</Anchor></h4>
                   <PropTable component="Navbar"/>
 
-                  <h4><Anchor id="navs-props-navbrand">NavBrand</Anchor></h4>
-                  <PropTable component="NavBrand"/>
-
-                  <h4><Anchor id="navs-props-collapsiblenav">CollapsibleNav</Anchor></h4>
-                  <PropTable component="CollapsibleNav"/>
+                  <h4><Anchor id="navs-props-navbrand">NavbarToggle, Navbar.Toggle</Anchor></h4>
+                  <PropTable component="NavbarToggle"/>
                 </div>
 
                 {/* Breadcrumb */}

diff --git a/docs/src/NavMain.js b/docs/src/NavMain.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router';
 import Navbar from '../../src/Navbar';
-import NavBrand from '../../src/NavBrand';
 import Nav from '../../src/Nav';
 
 const NAV_LINKS = {
@@ -37,11 +36,19 @@ const NavMain = React.createClass({
     ]);
 
     return (
-      <Navbar componentClass="header" staticTop className="bs-docs-nav" role="banner" toggleNavKey={0}>
-        <NavBrand>{brand}</NavBrand>
-        <Nav className="bs-navbar-collapse" role="navigation" eventKey={0} id="top">
-          {links}
-        </Nav>
+      <Navbar staticTop
+        componentClass="header"
+        className="bs-docs-nav"
+        role="banner"
+      >
+        <Navbar.Header>
+          {brand}
+        </Navbar.Header>
+        <Navbar.Collapse className="bs-navbar-collapse" >
+          <Nav role="navigation" id="top">
+            {links}
+          </Nav>
+        </Navbar.Collapse>
       </Navbar>
     );
   },

diff --git a/docs/src/PropTable.js b/docs/src/PropTable.js
@@ -46,7 +46,7 @@ const PropTable = React.createClass({
     let propsData = this.propsData;
 
     if (!Object.keys(propsData).length) {
-      return <span/>;
+      return <div className="text-muted"><em>There are no public props for this component.</em></div>;
     }
 
     return (

diff --git a/docs/src/ReactPlayground.js b/docs/src/ReactPlayground.js
@@ -36,7 +36,7 @@ const ListGroupItem = require('../../src/ListGroupItem');
 const MenuItem = require('../../src/MenuItem');
 const Modal = require('../../src/Modal');
 const Nav = require('../../src/Nav');
-const NavBrand = require('../../src/NavBrand');
+const NavbarBrand = require('../../src/NavbarBrand');
 const Navbar = require('../../src/Navbar');
 const NavItem = require('../../src/NavItem');
 const NavDropdown = require('../../src/NavDropdown');

diff --git a/docs/src/Samples.js b/docs/src/Samples.js
@@ -62,7 +62,8 @@ export default {
   NavJustified:                  require('fs').readFileSync(__dirname + '/../examples/NavJustified.js', 'utf8'),
   NavbarBasic:                   require('fs').readFileSync(__dirname + '/../examples/NavbarBasic.js', 'utf8'),
   NavbarCollapsible:             require('fs').readFileSync(__dirname + '/../examples/NavbarCollapsible.js', 'utf8'),
-  CollapsibleNav:                require('fs').readFileSync(__dirname + '/../examples/CollapsibleNav.js', 'utf8'),
+  NavbarForm:                    require('fs').readFileSync(__dirname + '/../examples/NavbarForm.js', 'utf8'),
+  NavbarTextLink:                require('fs').readFileSync(__dirname + '/../examples/NavbarTextLink.js', 'utf8'),
   TabsUncontrolled:              require('fs').readFileSync(__dirname + '/../examples/TabsUncontrolled.js', 'utf8'),
   TabsControlled:                require('fs').readFileSync(__dirname + '/../examples/TabsControlled.js', 'utf8'),
   TabsNoAnimation:               require('fs').readFileSync(__dirname + '/../examples/TabsNoAnimation.js', 'utf8'),