Merge pull request #2799 from Zadielerick/refreshDocsUpdate

[Docs] Update Documentation for Refresh Indicator

docs/src/app/app-routes.jsx

@@ -39,7 +39,7 @@ import Menus from './components/pages/components/menus';
 import Paper from './components/pages/components/paper';
 import Popover from './components/pages/components/popover';
 import Progress from './components/pages/components/progress';
-import RefreshIndicator from './components/pages/components/refresh-indicator';
+import RefreshIndicatorPage from './components/pages/components/RefreshIndicator/Page';
 import SelectField from './components/pages/components/SelectField/Page';
 import Sliders from './components/pages/components/sliders';
 import SnackbarPage from './components/pages/components/Snackbar/Page';
@@ -100,7 +100,7 @@ const AppRoutes = (
       <Route path="paper" component={Paper} />
       <Route path="popover" component={Popover} />
       <Route path="progress" component={Progress} />
-      <Route path="refresh-indicator" component={RefreshIndicator} />
+      <Route path="refresh-indicator" component={RefreshIndicatorPage} />
       <Route path="select-field" component={SelectField} />
       <Route path="sliders" component={Sliders} />
       <Route path="switches" component={Switches} />

docs/src/app/components/pages/components/RefreshIndicator/ExampleLoading.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import RefreshIndicator from 'material-ui/lib/refresh-indicator';
+
+const style = {
+  container: {
+    position: 'relative',
+  },
+  refresh: {
+    display: 'inline-block',
+    position: 'relative',
+  },
+};
+
+const RefreshIndicatorExampleLoading = () => (
+  <div style={style.container}>
+    <RefreshIndicator
+      size={40}
+      left={10}
+      top={0}
+      status="loading"
+      style={style.refresh} />
+    <RefreshIndicator
+      size={40}
+      left={70}
+      top={0}
+      loadingColor={"#FF9800"}
+      status="loading"
+      style={style.refresh} />
+  </div>
+);
+
+export default RefreshIndicatorExampleLoading;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import RefreshIndicator from 'material-ui/lib/refresh-indicator';
+
+const style = {
+  container: {
+    position: 'relative',
+  },
+  refresh: {
+    display: 'inline-block',
+    position: 'relative',
+  },
+};
+
+const RefreshIndicatorExampleSimple = () => (
+  <div style={style.container}>
+    <RefreshIndicator
+      percentage={30}
+      size={40}
+      left={10}
+      top={0}
+      status="ready"
+      style={style.refresh} />
+    <RefreshIndicator
+      percentage={60}
+      size={40}
+      left={65}
+      top={0}
+      status="ready"
+      style={style.refresh} />
+    <RefreshIndicator
+      percentage={80}
+      size={40}
+      left={120}
+      top={0}
+      color={"red"}
+      status="ready"
+      style={style.refresh} />
+    <RefreshIndicator
+      percentage={100}
+      size={40}
+      left={175}
+      top={0}
+      status="ready"
+      style={style.refresh} />
+  </div>
+);
+
+export default RefreshIndicatorExampleSimple;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import refreshIndicatorReadmeText from './README';
+import refreshIndicatorCode from '!raw!material-ui/lib/refresh-indicator';
+import RefreshIndicatorExampleSimple from './ExampleSimple';
+import refreshIndicatorExampleSimpleCode from '!raw!./ExampleSimple';
+import RefreshIndicatorExampleLoading from './ExampleLoading';
+import refreshIndicatorExampleLoadingCode from '!raw!./ExampleLoading';
+
+const RefreshIndicatorPage = () => (
+  <div>
+    <MarkdownElement text={refreshIndicatorReadmeText} />
+    <CodeExample code={refreshIndicatorExampleSimpleCode}>
+      <RefreshIndicatorExampleSimple />
+    </CodeExample>
+    <CodeExample code={refreshIndicatorExampleLoadingCode}>
+      <RefreshIndicatorExampleLoading />
+    </CodeExample>
+    <PropTypeDescription code={refreshIndicatorCode}/>
+  </div>
+);
+
+export default RefreshIndicatorPage;

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

@@ -0,0 +1,6 @@
+## Refresh Indicator
+The [refresh indicator](https://www.google.com/design/spec/components/progress-activity.html#)
+is used when showing an item is loading. It is kept hidden from the interface until it's
+status prop is changed to `loading` or `ready`.
+
+### Examples

src/refresh-indicator.jsx

@@ -11,17 +11,50 @@ const VIEWBOX_SIZE = 32;
 const RefreshIndicator = React.createClass({
 
   propTypes: {
+    /**
+     * Override the theme's color of the indicator while it's status is
+     * "ready" or it's percentage is less than 100.
+     */
     color: React.PropTypes.string,
+
+    /**
+     * The absolute left position of the indicator in pixels.
+     */
     left: React.PropTypes.number.isRequired,
+
+    /**
+     * Override the theme's color of the indicator while
+     * it's status is "loading" or it's percentage is 100.
+     */
     loadingColor: React.PropTypes.string,
+
+    /**
+     * The confirmation progress to fetch data. Max value is 100.
+     */
     percentage: React.PropTypes.number,
+
+    /**
+     * Size in pixels.
+     */
     size: React.PropTypes.number,
+
+    /**
+     * The display status of the indicator. If the status is
+     * "ready", the indicator will display the ready state
+     * arrow. If the status is "loading", it will display
+     * the loading progress indicator. If the status is "hide",
+     * the indicator will be hidden.
+     */
     status: React.PropTypes.oneOf(['ready', 'loading', 'hide']),
 
     /**
      * Override the inline-styles of the root element.
      */
     style: React.PropTypes.object,
+
+    /**
+     * The absolute right position of the indicator in pixels.
+     */
     top: React.PropTypes.number.isRequired,
   },