[Docs] Update Documentation for Popover

docs/src/app/app-routes.jsx

@@ -39,8 +39,8 @@ import ListPage from './components/pages/components/List/Page';
 import LinearProgressPage from './components/pages/components/LinearProgress/Page';
 import PaperPage from './components/pages/components/Paper/Page';
 import MenuPage from './components/pages/components/Menu/Page';
-import Popover from './components/pages/components/popover';
 import RefreshIndicatorPage from './components/pages/components/RefreshIndicator/Page';
+import PopoverPage from './components/pages/components/Popover/Page';
 import SelectField from './components/pages/components/SelectField/Page';
 import SliderPage from './components/pages/components/Slider/Page';
 import SnackbarPage from './components/pages/components/Snackbar/Page';
@@ -102,8 +102,8 @@ const AppRoutes = (
       <Route path="linear-progress" component={LinearProgressPage} />
       <Route path="paper" component={PaperPage} />
       <Route path="menu" component={MenuPage} />
-      <Route path="popover" component={Popover} />
       <Route path="refresh-indicator" component={RefreshIndicatorPage} />
+      <Route path="popover" component={PopoverPage} />
       <Route path="select-field" component={SelectField} />
       <Route path="svg-icon" component={SvgIconPage} />
       <Route path="slider" component={SliderPage} />

docs/src/app/components/pages/components/Popover/ExampleSimple.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import Popover from 'material-ui/lib/popover/popover';
+import RadioButton from 'material-ui/lib/radio-button';
+import RaisedButton from 'material-ui/lib/raised-button';
+
+export default class PopoverExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectValue: '1',
+      textValue: 'here is a value',
+      activePopover: 'none',
+      anchorOrigin: {horizontal: 'left', vertical: 'bottom'},
+      targetOrigin: {horizontal: 'left', vertical: 'top'},
+    };
+  }
+
+  show = (key, e) => {
+    this.setState({
+      activePopover: key,
+      anchorEl: e.currentTarget,
+    });
+  };
+
+  closePopover = (key) => {
+    if (this.state.activePopover !== key)
+      return;
+    this.setState({
+      activePopover: 'none',
+    });
+  };
+
+  setAnchor = (positionElement, position) => {
+    let {anchorOrigin} = this.state;
+    anchorOrigin[positionElement] = position;
+
+    this.setState({
+      anchorOrigin: anchorOrigin,
+    });
+  };
+
+  setTarget = (positionElement, position) => {
+    let {targetOrigin} = this.state;
+    targetOrigin[positionElement] = position;
+
+    this.setState({
+      targetOrigin: targetOrigin,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <RaisedButton onClick={this.show.bind(this, 'pop')} label="Click on me to show a popover" />
+        <br/>
+        <br/>
+
+        <em>Note that in this version, the select field causes nasty scrolling,
+        an upcoming PR will fix, which updates SelectField to use the popover for itself!</em>
+        <br/>
+        <h2>Position Options</h2>
+        <p>Use the settings below to toggle the positioning of the popovers above</p>
+        <strong>Current Settings</strong>
+        <br/>
+        <pre>
+          anchorOrigin: {JSON.stringify(this.state.anchorOrigin)}
+          <br/>
+          targetOrigin: {JSON.stringify(this.state.targetOrigin)}
+        </pre>
+        <h3>Anchor Origin</h3>
+        <div style={{float: 'left'}}>
+          <strong>Vertical</strong>
+          <RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'top')}
+            label="Top" checked={this.state.anchorOrigin.vertical === 'top'} />
+          <RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'center')}
+            label="Center" checked={this.state.anchorOrigin.vertical === 'center'} />
+          <RadioButton onClick={this.setAnchor.bind(this, 'vertical', 'bottom')}
+            label="Bottom" checked={this.state.anchorOrigin.vertical === 'bottom'} />
+        </div>
+        <div style={{float: 'left'}}>
+          <strong>Horizontal</strong>
+          <RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'left')}
+            label="Left" checked={this.state.anchorOrigin.horizontal === 'left'} />
+          <RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'middle')}
+            label="Middle" checked={this.state.anchorOrigin.horizontal === 'middle'} />
+          <RadioButton onClick={this.setAnchor.bind(this, 'horizontal', 'right')}
+            label="Right" checked={this.state.anchorOrigin.horizontal === 'right'} />
+        </div>
+        <br style={{clear: 'both'}} />
+        <br style={{clear: 'both'}} />
+
+        <h3>Target Origin</h3>
+        <div style={{float: 'left'}}>
+          <strong>Vertical</strong>
+          <RadioButton onClick={this.setTarget.bind(this, 'vertical', 'top')}
+            label="Top" checked={this.state.targetOrigin.vertical === 'top'} />
+          <RadioButton onClick={this.setTarget.bind(this, 'vertical', 'center')}
+            label="Center" checked={this.state.targetOrigin.vertical === 'center'} />
+          <RadioButton onClick={this.setTarget.bind(this, 'vertical', 'bottom')}
+            label="Bottom" checked={this.state.targetOrigin.vertical === 'bottom'} />
+        </div>
+        <div style={{float: 'left'}}>
+          <strong>Horizontal</strong>
+          <RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'left')}
+            label="Left" checked={this.state.targetOrigin.horizontal === 'left'} />
+          <RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'middle')}
+            label="Middle" checked={this.state.targetOrigin.horizontal === 'middle'} />
+          <RadioButton onClick={this.setTarget.bind(this, 'horizontal', 'right')}
+            label="Right" checked={this.state.targetOrigin.horizontal === 'right'} />
+        </div>
+
+        <Popover open={this.state.activePopover === 'pop'}
+          anchorEl={this.state.anchorEl}
+          anchorOrigin={this.state.anchorOrigin}
+          targetOrigin={this.state.targetOrigin}
+          onRequestClose={this.closePopover.bind(this, 'pop')} >
+          <div style={{padding: 20}}>
+            <h2>Here is an arbitrary popover</h2>
+            <p>Hi - here is some content</p>
+            <RaisedButton primary={true} label="Here is a button"/>
+          </div>
+        </Popover>
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/Popover/Page.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import popoverReadmeText from './README';
+import popoverCode from '!raw!material-ui/lib/popover/popover';
+import PopoverExampleSimple from './ExampleSimple';
+import popoverExampleSimpleCode from '!raw!./ExampleSimple';
+
+const PopoverPage = () => (
+  <div>
+    <MarkdownElement text={popoverReadmeText} />
+    <CodeExample code={popoverExampleSimpleCode}>
+      <PopoverExampleSimple />
+    </CodeExample>
+  </div>
+);
+//<PropTypeDescription code={popoverCode}/>
+export default PopoverPage;

docs/src/app/components/pages/components/Popover/README.md

@@ -0,0 +1,4 @@
+## Popover
+A [popover](https://www.google.com/design/spec/components/snackbars-toasts.html)
+can be used as an alternative to a drop down menu that can contain elements inside.
+### Examples

src/popover/popover.jsx

@@ -14,27 +14,85 @@ import PopoverDefaultAnimation from './popover-default-animation';
 const Popover = React.createClass({
 
   propTypes: {
+    /**
+     *
+     */
     anchorEl: React.PropTypes.object,
+
+    /**
+     * This is the point on the anchor where the popover
+     * targetOrigin will stick to.
+     * Options: vertical: [top, middle, bottom]
+     * horizontal: [left, center, right]
+     */
     anchorOrigin: PropTypes.origin,
+
+    /**
+     * If true, the popover will apply transitions when
+     * added it gets added to the DOM.
+     */
     animated: React.PropTypes.bool,
+
+    /**
+     *
+     */
     animation: React.PropTypes.func,
+
+    /**
+     * If true, the popover will hide when the anchor scrolls off the screen
+     */
     autoCloseWhenOffScreen: React.PropTypes.bool,
+
+    /**
+     * If true, the popover (potentially) ignores targetOrigin
+     * and anchorOrigin to make itself fit on screen,
+     * which is useful for mobile devices.
+     */
     canAutoPosition: React.PropTypes.bool,
+
+    /**
+     * Children passed to the Popover.
+     */
     children: React.PropTypes.node,
 
     /**
      * The css class name of the root element.
      */
     className: React.PropTypes.string,
+
+    /**
+     * This is a callback that fires when the popover
+     * thinks it should close. (e.g. clickAway or offScreen)
+     */
     onRequestClose: React.PropTypes.func,
+
+    /**
+     * Controls the visibility of the popover.
+     */
     open: React.PropTypes.bool,
 
     /**
      * Override the inline-styles of the root element.
      */
     style: React.PropTypes.object,
+
+    /**
+     * This is the point on the popover which will stick to
+     * the anchors origin.
+     * Options: vertical: [top, middle, bottom]horizontal: [left, center, right]
+     */
     targetOrigin: PropTypes.origin,
+
+    /**
+     * If true, the popover will render on top of an invisible
+     * layer, which will prevent clicks to the underlying
+     * elements, and trigger an onRequestClose(clickAway) event.
+     */
     useLayerForClickAway: React.PropTypes.bool,
+
+    /**
+     *
+     */
     zDepth: PropTypes.zDepth,
   },