Proper documentation and cleanup

michelgb · Jun 30, 2015 · 27d3e5d · 27d3e5d
1 parent 1b1af04
commit 27d3e5d
Show file tree

Hide file tree

Showing 17 changed files with 239 additions and 146 deletions.
diff --git a/docs/examples/ModalCustomSizing.js b/docs/examples/ModalCustomSizing.js
diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js
@@ -2,6 +2,7 @@ const modalInstance = (
   <div className='static-modal'>
     <Modal
       enforceFocus={false}
+      autoFocus={false}
       backdrop={false}
       animation={false}
       container={mountNode}

diff --git a/docs/examples/ModalTrigger.js b/docs/examples/ModalTrigger.js
@@ -4,9 +4,15 @@ const Example = React.createClass({
     return { showModal: false };
   },
 
-  render() {
-    let closeModal = e => this.setState({ showModal: false });
+  close(){
+    this.setState({ showModal: false });
+  },
 
+  open(){
+    this.setState({ showModal: true });
+  },
+
+  render() {
     let popover = <Popover title='popover'>very popover. such engagement</Popover>;
     let tooltip = <Tooltip>wow.</Tooltip>;
 
@@ -17,12 +23,12 @@ const Example = React.createClass({
         <Button
           bsStyle='primary'
           bsSize='large'
-          onClick={e => this.setState({ showModal: true })}
+          onClick={this.open}
         >
           Launch demo modal
         </Button>
 
-        <Modal show={this.state.showModal} onHide={closeModal}>
+        <Modal show={this.state.showModal} onHide={this.close}>
           <Modal.Header closeButton>
             <Modal.Title>Modal heading</Modal.Title>
           </Modal.Header>
@@ -50,7 +56,7 @@ const Example = React.createClass({
             <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>
           </Modal.Body>
           <Modal.Footer>
-            <Button onClick={closeModal}>Close</Button>
+            <Button onClick={this.close}>Close</Button>
           </Modal.Footer>
         </Modal>
       </div>

diff --git a/docs/examples/Overlay.js b/docs/examples/Overlay.js
@@ -9,31 +9,31 @@ const Example = React.createClass({
   },
 
   render(){
-    const style = {
-      position: 'absolute',
-      backgroundColor: '#EEE',
-      border: '1px solid #CCC',
-      borderRadius: 3,
-      marginLeft: 5,
-      padding: 10
+    const tooltip = <Tooltip>Tooltip overload!</Tooltip>;
+
+    const sharedProps = {
+      show: this.state.show,
+      container: this,
+      target: props => React.findDOMNode(this.refs.target)
     };
 
     return (
-      <div style={{ height: 100, position: 'relative' }}>
+      <div style={{ height: 100, paddingLeft: 150, position: 'relative' }}>
         <Button ref='target' onClick={this.toggle}>
-          I am an Overlay target
+          Click me!
         </Button>
 
-        <Overlay
-          show={this.state.show}
-          onHide={() => this.setState({ show: false })}
-          placement="right"
-          container={this}
-          target={ props => React.findDOMNode(this.refs.target)}
-        >
-          <div style={style}>
-            <strong>Holy guacamole!</strong> Check this info.
-          </div>
+        <Overlay {...sharedProps} placement="left">
+          { tooltip }
+        </Overlay>
+        <Overlay {...sharedProps} placement="top">
+          { tooltip }
+        </Overlay>
+        <Overlay {...sharedProps} placement="right">
+          { tooltip }
+        </Overlay>
+        <Overlay {...sharedProps} placement="bottom">
+          { tooltip }
         </Overlay>
       </div>
     );

diff --git a/docs/examples/OverlayCustom.js b/docs/examples/OverlayCustom.js
@@ -0,0 +1,45 @@
+
+const Example = React.createClass({
+  getInitialState(){
+    return { show: true };
+  },
+
+  toggle(){
+    this.setState({ show: !this.state.show });
+  },
+
+  render(){
+    const style = {
+      position: 'absolute',
+      backgroundColor: '#EEE',
+      boxShadow: '0 5px 10px rgba(0, 0, 0, 0.2)',
+      border: '1px solid #CCC',
+      borderRadius: 3,
+      marginLeft: -5,
+      marginTop: 5,
+      padding: 10
+    };
+
+    return (
+      <div style={{ height: 100, position: 'relative' }}>
+        <Button ref='target' onClick={this.toggle}>
+          I am an Overlay target
+        </Button>
+
+        <Overlay
+          show={this.state.show}
+          onHide={() => this.setState({ show: false })}
+          placement="right"
+          container={this}
+          target={ props => React.findDOMNode(this.refs.target)}
+        >
+          <div style={style}>
+            <strong>Holy guacamole!</strong> Check this info.
+          </div>
+        </Overlay>
+      </div>
+    );
+  }
+});
+
+React.render(<Example/>, mountNode);
diff --git a/docs/examples/OverlayTrigger.js b/docs/examples/OverlayTrigger.js
diff --git a/docs/generate-metadata.js b/docs/generate-metadata.js
@@ -16,7 +16,8 @@ let cleanDoclets = desc => {
   return (idx === -1 ? desc : desc.substr(0, idx )).trim();
 };
 
-let cleanDocletValue = str => str.replace(/^\{|\}$/g, '');
+let cleanDocletValue = str => str.trim().replace(/^\{/, '').replace(/\}$/, '');
+
 
 let isLiteral = str => (/^('|")/).test(str.trim());
 

diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -324,79 +324,76 @@ const ComponentsPage = React.createClass({
 
                 </div>
 
-                {/* overlays */}
-                <div className='bs-docs-section'>
-                  <h1 id='overlays' className='page-header'>Overlays <small>Overlay, Tooltip, Popover</small></h1>
 
-                  <h2 id='overlays-examples'>Overlay</h2>
+                {/* Tooltip */}
+                <div className='bs-docs-section'>
+                  <h2 id='tooltips' >Tooltip</h2>
                   <p>
-                    Overlays allow components to be rendered and positioned to the left, right, top, or bottom of another component.
-                    They are perfect for simple tooltips or even more complicated popups.
+                    Tooltip component for a more stylish alternative to that anchor tag <code>title</code> attribute.
                   </p>
-                  <ReactPlayground codeText={Samples.Overlay} />
+                  <ReactPlayground codeText={Samples.TooltipBasic} exampleClassName='tooltip-static'/>
 
-                  <h2 id='overlays-examples'>Overlay Trigger</h2>
-                  <p>
-                    Often you will want to show or hide and Overlay in response to an action by its target, such as hovering over a link.
-                    Since this is such a common pattern we provide the <code>OverlayTrigger</code> component to reduce the amount of boilerplate
-                    you need to write to implement this pattern.
-                  </p>
-                  <ReactPlayground codeText={Samples.OverlayTrigger} />
+                  <p>Attach and position tooltips with <code>OverlayTrigger</code>.</p>
+                  <ReactPlayground codeText={Samples.TooltipPositioned} />
 
-                  <h3 id='overlays-props'>Props</h3>
+                  <p>Positioned tooltip in text copy.</p>
+                  <ReactPlayground codeText={Samples.TooltipInCopy} />
 
-                  <h4>Overlay</h4>
-                  <PropTable component='Overlay'/>
+                  <h3 id='tooltips-props'>Props</h3>
 
-                  <h4>OverlayTrigger</h4>
+                  <h4 id='overlays-trigger-props'>Overlay Trigger</h4>
                   <PropTable component='OverlayTrigger'/>
 
-                  {/* Tooltip */}
-                  <div className='bs-docs-section'>
-                    <h2 id='tooltips' >Tooltip</h2>
-                    <p>
-                      You don't always need to create custom styling for your overlays. Bootstrap provides two great options out of the box.
-                      Tooltips can be used inside an <code>Overlay</code> Component, or an <code>OverlayTrigger</code>
-                    </p>
-                    <ReactPlayground codeText={Samples.TooltipBasic} exampleClassName='tooltip-static'/>
+                  <h4 id='overlays-trigger-props'>Tooltip</h4>
+                  <PropTable component='Tooltip'/>
+                </div>
 
-                    <p>Positioned tooltip component.</p>
-                    <ReactPlayground codeText={Samples.TooltipPositioned} />
+                {/* Popover */}
+                <div className='bs-docs-section'>
+                  <h2 id='popovers'>Popovers</h2>
 
-                    <p>Positioned tooltip in copy.</p>
-                    <ReactPlayground codeText={Samples.TooltipInCopy} />
+                  <p>
+                    The Popover, offers a more robust alternative to the Tooltip for displaying overlays of content.
+                  </p>
+                  <ReactPlayground codeText={Samples.PopoverBasic}/>
 
-                    <h3 id='tooltips-props'>Props</h3>
-                    <PropTable component='Tooltip'/>
+                  <p>The Popover component, like the Tooltip can be used with an <code>OverlayTrigger</code> Component, and positioned around it.</p>
+                  <ReactPlayground codeText={Samples.PopoverPositioned} />
 
-                  </div>
+                  <p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
+                  <ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
 
-                  {/* Popover */}
-                  <div className='bs-docs-section'>
-                    <h2 id='popovers'>Popovers</h2>
+                  <p>Popover component in container.</p>
+                  <ReactPlayground codeText={Samples.PopoverContained} exampleClassName='bs-example-popover-contained' />
 
-                    <p>
-                      The Popover component, like the Tooltip can be used with an <code>Overlay</code> Component, or an <code>OverlayTrigger</code>.
-                      Unlike the Tooltip popovers are designed to display more reobust information about their targets.
-                    </p>
-                    <ReactPlayground codeText={Samples.PopoverBasic}/>
+                  <p>Positioned popover components in scrolling container.</p>
+                  <ReactPlayground codeText={Samples.PopoverPositionedScrolling} exampleClassName='bs-example-popover-scroll' />
 
-                    <p>Positioned popover component.</p>
-                    <ReactPlayground codeText={Samples.PopoverPositioned} />
+                  <h3 id='popover-props'>Props</h3>
 
-                    <p>Trigger behaviors. It's inadvisable to use <code>"hover"</code> or <code>"focus"</code> triggers for popovers, because they have poor accessibility from keyboard and on mobile devices.</p>
-                    <ReactPlayground codeText={Samples.PopoverTriggerBehaviors} />
+                  <PropTable component='Popover'/>
+                </div>
 
-                    <p>Popover component in container.</p>
-                    <ReactPlayground codeText={Samples.PopoverContained} exampleClassName='bs-example-popover-contained' />
+                {/* Overlay */}
+                <div className='bs-docs-section'>
+                  <h2 id='overlays'>Overlay</h2>
 
-                    <p>Positioned popover components in scrolling container.</p>
-                    <ReactPlayground codeText={Samples.PopoverPositionedScrolling} exampleClassName='bs-example-popover-scroll' />
+                  <p>
+                    The <code>OverlayTrigger</code> component is great for most use cases, but as a higher level abstraction it can lack the flexibility needed
+                    to build more nuanced or custom behaviors into your Overlay components. For these cases it can be helpful to forgo the trigger and use
+                    the <code>Overlay</code> component directly.
+                  </p>
+                  <ReactPlayground codeText={Samples.Overlay}/>
+
+                  <p>
+                    You don't need to use the provided <code>Tooltip</code> or <code>Popover</code> components. Creating custom overlays
+                    is as easy as wrapping some markup in an <code>Overlay</code> component
+                  </p>
+                  <ReactPlayground codeText={Samples.OverlayCustom} />
 
-                    <h3 id='popover-props'>Props</h3>
+                  <h3 id='overlays-props'>Props</h3>
 
-                    <PropTable component='Popover'/>
-                  </div>
+                  <PropTable component='Overlay'/>
                 </div>
 
                 {/* Progress Bar */}
@@ -838,12 +835,12 @@ const ComponentsPage = React.createClass({
 
                 {/* Utilities */}
                 <div className='bs-docs-section'>
-                  <h1 id='utilities' className='page-header'>Utilities <small>Portal</small></h1>
+                  <h1 id='utilities' className='page-header'>Utilities <small>Portal, Position</small></h1>
 
                   <h2 id='utilities-portal'>Portal</h2>
                   <p>
                     A Component that renders its children into a new React "subtree" or <code>container</code>. The Portal component kind of like the React
-                    equivillent to jQuery's <code>.appendTo()</code>, which is helpful for components that need to be appended to a DOM node other than
+                    equivalent to jQuery's <code>.appendTo()</code>, which is helpful for components that need to be appended to a DOM node other than
                     the component's direct parent. The Modal, and Overlay components use the Portal component internally.
                   </p>
                   <h3 id='utilities-props'>Props</h3>
@@ -881,9 +878,9 @@ const ComponentsPage = React.createClass({
                     </SubNav>
                     <NavItem href='#panels' key={4}>Panels</NavItem>
                     <NavItem href='#modals' key={5}>Modals</NavItem>
-                    <NavItem href='#overlays' key={27}>Overlays</NavItem>
                     <NavItem href='#tooltips' key={6}>Tooltips</NavItem>
                     <NavItem href='#popovers' key={7}>Popovers</NavItem>
+                    <NavItem href='#overlays' key={27}>Overlays</NavItem>
                     <NavItem href='#progress' key={8}>Progress bars</NavItem>
                     <NavItem href='#navs' key={9}>Navs</NavItem>
                     <NavItem href='#navbars' key={10}>Navbars</NavItem>
@@ -903,8 +900,7 @@ const ComponentsPage = React.createClass({
                     <NavItem href='#glyphicons' key={24}>Glyphicons</NavItem>
                     <NavItem href='#tables' key={25}>Tables</NavItem>
                     <NavItem href='#input' key={26}>Input</NavItem>
-
-                    <NavItem href='#utilities' key={26}>Utilities</NavItem>
+                    <NavItem href='#utilities' key={28}>Utilities</NavItem>
                   </Nav>
                   <a className='back-to-top' href='#top'>
                   Back to top

diff --git a/docs/src/PropTable.js b/docs/src/PropTable.js
@@ -115,11 +115,9 @@ const PropTable = React.createClass({
       case 'union':
         return type.value.reduce((current, val, i, list) => {
           let item = this.getType({ type: val });
-
           if (React.isValidElement(item)) {
             item = React.cloneElement(item, {key: i});
           }
-
           current = current.concat(item);
 
           return i === (list.length - 1) ? current : current.concat(' | ');