Merge pull request #2984 from mbrookes/docs-example-title-desc-6

[Docs] RefreshIndicator, SelectField - Add title & description to examples. DropDownMenu, DatePicker - minor refactoring.

docs/src/app/components/pages/components/DatePicker/ExampleInline.jsx

@@ -3,15 +3,8 @@ import DatePicker from 'material-ui/lib/date-picker/date-picker';
 
 const DatePickerExampleInline = () => (
   <div>
-    <DatePicker
-      hintText="Inline"
-      container="inline"
-    />
-    <DatePicker
-      hintText="Inline (AutoOk)"
-      container="inline"
-      autoOk={true}
-    />
+    <DatePicker hintText="Portrait Inline Dialog" container="inline" />
+    <DatePicker hintText="Landscape Inline Dialog" container="inline" mode="landscape" />
   </div>
 );
 

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

@@ -4,10 +4,7 @@ import DatePicker from 'material-ui/lib/date-picker/date-picker';
 const DatePickerExampleSimple = () => (
   <div>
     <DatePicker hintText="Portrait Dialog" />
-    <DatePicker
-      hintText="Landscape Dialog"
-      mode="landscape"
-    />
+    <DatePicker hintText="Landscape Dialog" mode="landscape" />
   </div>
 );
 

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

@@ -17,13 +17,13 @@ import datePickerExampleInternationalCode from '!raw!./ExampleInternational';
 import datePickerReadmeText from './README';
 
 const descriptions = {
-  simple: 'Basic examples showing the default portrait and alternative landscape `DatePicker`.',
-  inline: 'Inline `DatePicker`\'s are displayed below the input, rather than as a modal dialog. ' +
-  'The `AutoOk` example closes when a date is selected.',
-  ranged: 'This example allows you to set a date range, and to toggle `AutoOk`, and `disableYearSelection`.',
-  controlled: 'Implements a controlled input, where the value is handled by state in the parent (example) component.',
-  localised: 'Demonstrates a localised `DatePicker`, in this case in French. ' +
-  'Note that the buttons must be localised using the `wordings` property and we set the `firstDayOfWeek` to Monday.',
+  simple: 'The Date Picker defaults to a portrait dialog. The `mode` property can be set to `landscape`.',
+  inline: 'Inline Date Pickers are displayed below the input, rather than as a modal dialog. ',
+  ranged: 'This example allows you to set a date range, and to toggle `autoOk`, and `disableYearSelection`.',
+  controlled: '`DatePicker` can be implemented as a controlled input, where `value` is handled by state in the ' +
+  'parent component.',
+  localised: 'Date Picker can be localised using the `locale` property, in this case in French. ' +
+  'Note that the buttons must be localised using the `wordings` property, and we set the `firstDayOfWeek` to Monday.',
 };
 
 if (!window.Intl) {

docs/src/app/components/pages/components/DropDownMenu/ExampleLabeled.jsx

@@ -13,10 +13,7 @@ export default class DropDownMenuLabeledExample extends React.Component {
 
   render() {
     return (
-      <DropDownMenu
-        value={this.state.value}
-        onChange={this.handleChange}
-      >
+      <DropDownMenu value={this.state.value} onChange={this.handleChange}>
         <MenuItem value={1} label="5 am - 12 pm" primaryText="Morning" />
         <MenuItem value={2} label="12 pm - 5 pm" primaryText="Afternoon" />
         <MenuItem value={3} label="5 pm - 9 pm" primaryText="Evening" />

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

@@ -13,11 +13,11 @@ import dropDownMenuLabeledExampleCode from '!raw!./ExampleLabeled';
 import dropDownMenuCode from '!raw!material-ui/lib/DropDownMenu/DropDownMenu';
 
 const descriptions = {
-  simple: '`DropDownMenu` is implemented as a controlled component, ' +
-  'with the current selection set through the `value` prop.',
-  long: 'With `maxHeight` set, the menu will be scrollable if the number of items causes the height ' +
+  simple: '`DropDownMenu` is implemented as a controlled component, with the current selection set through the ' +
+  '`value` property.',
+  long: 'With the `maxHeight` property set, the menu will be scrollable if the number of items causes the height ' +
   'to exceed this limit.',
-  labeled: 'With a `label` applied to each `MenuItem`, `DropDownMenu` displays a complementary description ' +
+  label: 'With a `label` applied to each `MenuItem`, `DropDownMenu` displays a complementary description ' +
   'of the selected item.',
 };
 
@@ -39,8 +39,8 @@ const DropDownMenuPage = () => (
       <DropDownMenuLongMenuExample />
     </CodeExample>
     <CodeExample
-      title="Labeled example"
-      description={descriptions.labeled}
+      title="Label example"
+      description={descriptions.label}
       code={dropDownMenuLabeledExampleCode}
     >
       <DropDownMenuLabeledExample />

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

@@ -21,7 +21,7 @@ const RefreshIndicatorExampleLoading = () => (
       style={style.refresh}
     />
     <RefreshIndicator
-      size={40}
+      size={50}
       left={70}
       top={0}
       loadingColor={"#FF9800"}

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

@@ -23,15 +23,15 @@ const RefreshIndicatorExampleSimple = () => (
     />
     <RefreshIndicator
       percentage={60}
-      size={40}
+      size={50}
       left={65}
       top={0}
       status="ready"
       style={style.refresh}
     />
     <RefreshIndicator
       percentage={80}
-      size={40}
+      size={60}
       left={120}
       top={0}
       color={"red"}
@@ -40,9 +40,10 @@ const RefreshIndicatorExampleSimple = () => (
     />
     <RefreshIndicator
       percentage={100}
-      size={40}
+      size={70}
       left={175}
       top={0}
+      color={"red"} // Overridden by percentage={100}
       status="ready"
       style={style.refresh}
     />

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

@@ -5,18 +5,35 @@ 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 RefreshIndicatorExampleReady from './ExampleReady';
+import refreshIndicatorExampleReadyCode from '!raw!./ExampleReady';
 import RefreshIndicatorExampleLoading from './ExampleLoading';
 import refreshIndicatorExampleLoadingCode from '!raw!./ExampleLoading';
 
+const descriptions = {
+  ready: 'The `ready` status can be used in response to a pull-to-refresh action, with the `percentage` tracking ' +
+  'the depth of the "pull". The `size` property determines the icon size in pixels, and the `color` property its ' +
+  'color, except at `percentage` 100, when the colour switches to the secondary color.',
+  loading: 'The `loading` status displays an indeterminate indicator, intended to to be used while content is ' +
+  'loading. The `loadingColor` prop can be used to set the indicator color, which defaults to the secondary color.',
+};
+
 const RefreshIndicatorPage = () => (
   <div>
     <MarkdownElement text={refreshIndicatorReadmeText} />
-    <CodeExample code={refreshIndicatorExampleSimpleCode}>
-      <RefreshIndicatorExampleSimple />
+    <CodeExample
+      title="Ready"
+      description={descriptions.ready}
+      code={refreshIndicatorExampleReadyCode}
+    >
+      <RefreshIndicatorExampleReady />
     </CodeExample>
-    <CodeExample code={refreshIndicatorExampleLoadingCode}>
+
+    <CodeExample
+      title="Loading"
+      description={descriptions.loading}
+      code={refreshIndicatorExampleLoadingCode}
+    >
       <RefreshIndicatorExampleLoading />
     </CodeExample>
     <PropTypeDescription code={refreshIndicatorCode}/>

docs/src/app/components/pages/components/SelectField/ExampleCustomLabel.jsx

@@ -16,8 +16,8 @@ export default class SelectFieldExampleCustomLabel extends React.Component {
       <SelectField value={this.state.value} onChange={this.handleChange}>
         <MenuItem value={1} label="5 am - 12 pm" primaryText="Morning"/>
         <MenuItem value={2} label="12 pm - 5 pm" primaryText="Afternoon"/>
-        <MenuItem value={3} label="5 pm to 9 pm" primaryText="Evening"/>
-        <MenuItem value={4} label="9 pm to 4 am" primaryText="Night"/>
+        <MenuItem value={3} label="5 pm - 9 pm" primaryText="Evening"/>
+        <MenuItem value={4} label="9 pm - 5 am" primaryText="Night"/>
       </SelectField>
     );
   }

docs/src/app/components/pages/components/SelectField/ExampleFloatingLabel.jsx

@@ -25,15 +25,15 @@ export default class SelectFieldExampleFloatingLabel extends React.Component {
         <SelectField
           value={this.state.value}
           onChange={this.handleChange}
-          floatingLabelText="Float Label Text"
+          floatingLabelText="Floating Label Text"
         >
           {items}
         </SelectField>
-        <br/>
+        <br />
         <SelectField
           value={this.state.value}
           onChange={this.handleChange}
-          floatingLabelText="Custom Float Label Text"
+          floatingLabelText="Styled Floating Label Text"
           floatingLabelStyle={{color: 'red'}}
         >
           {items}

docs/src/app/components/pages/components/SelectField/ExampleLongMenu.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import SelectField from 'material-ui/lib/SelectField';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+const items = [];
+for (let i = 0; i < 100; i++ ) {
+  items.push(<MenuItem value={i} key={i} primaryText={`Item ${i}`}/>);
+}
+
+export default class DropDownMenuLongMenuExample extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {value: 10};
+  }
+
+  handleChange = (event, index, value) => this.setState({value});
+
+  render() {
+    return (
+      <SelectField maxHeight={300} value={this.state.value} onChange={this.handleChange}>
+        {items}
+      </SelectField>
+    );
+  }
+}

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

@@ -13,13 +13,20 @@ export default class SelectFieldExampleSimple extends React.Component {
 
   render() {
     return (
-      <SelectField value={this.state.value} onChange={this.handleChange}>
-        <MenuItem value={1} primaryText="Never"/>
-        <MenuItem value={2} primaryText="Every Night"/>
-        <MenuItem value={3} primaryText="Weeknights"/>
-        <MenuItem value={4} primaryText="Weekends"/>
-        <MenuItem value={5} primaryText="Weekly"/>
-      </SelectField>
+      <div>
+        <SelectField value={this.state.value} onChange={this.handleChange}>
+          <MenuItem value={1} primaryText="Never"/>
+          <MenuItem value={2} primaryText="Every Night"/>
+          <MenuItem value={3} primaryText="Weeknights"/>
+          <MenuItem value={4} primaryText="Weekends"/>
+          <MenuItem value={5} primaryText="Weekly"/>
+        </SelectField>
+        <br />
+        <SelectField value={1} disabled={true}>
+          <MenuItem value={1} primaryText="Never"/>
+          <MenuItem value={2} primaryText="Every Night"/>
+        </SelectField>
+      </div>
     );
   }
 }

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

@@ -6,8 +6,8 @@ import MarkdownElement from '../../../MarkdownElement';
 import selectFieldReadmeText from './README';
 import SelectFieldExampleSimple from './ExampleSimple';
 import selectFieldExampleSimpleCode from '!raw!./ExampleSimple';
-import SelectFieldExampleDisabled from './ExampleDisabled';
-import selectFieldExampleDisabledCode from '!raw!./ExampleDisabled';
+import SelectFieldLongMenuExample from './ExampleLongMenu';
+import selectFieldLongMenuExampleCode from '!raw!./ExampleLongMenu';
 import SelectFieldExampleCustomLabel from './ExampleCustomLabel';
 import selectFieldExampleCustomLabelCode from '!raw!./ExampleCustomLabel';
 import SelectFieldExampleFloatingLabel from './ExampleFloatingLabel';
@@ -16,22 +16,55 @@ import SelectFieldExampleError from './ExampleError';
 import selectFieldExampleErrorCode from '!raw!./ExampleError';
 import selectFieldCode from '!raw!material-ui/lib/SelectField/SelectField';
 
+const descriptions = {
+  simple: '`SelectField` is implemented as a controlled component, with the current selection set through the ' +
+  '`value` property. The `SelectField` can be disabled with the `disabled` property.',
+  long: 'With the `maxHeight` property set, the Select Field will be scrollable if the number of items causes the ' +
+  'height to exceed this limit.',
+  label: 'With a `label` applied to each `MenuItem`, `SelectField` displays a complementary description of the ' +
+  'selected item.',
+  floating: '`SelectField` supports a floating label with the `floatingLabelText` property. This can be customised ' +
+  'with `the floatingLabelText` property.',
+  errorText: 'The `errorText` property displays an error message below the Select Field. This can be customised with ' +
+  'the `errorStyle` property.',
+};
+
 const SelectFieldPage = () => (
   <div>
     <MarkdownElement text={selectFieldReadmeText} />
-    <CodeExample code={selectFieldExampleSimpleCode}>
+    <CodeExample
+      title="Simple examples"
+      description={descriptions.simple}
+      code={selectFieldExampleSimpleCode}
+    >
       <SelectFieldExampleSimple />
     </CodeExample>
-    <CodeExample code={selectFieldExampleDisabledCode}>
-      <SelectFieldExampleDisabled />
+    <CodeExample
+      title="Long example"
+      description={descriptions.long}
+      code={selectFieldLongMenuExampleCode}
+    >
+      <SelectFieldLongMenuExample />
     </CodeExample>
-    <CodeExample code={selectFieldExampleCustomLabelCode}>
+    <CodeExample
+      title="Label example"
+      description={descriptions.label}
+      code={selectFieldExampleCustomLabelCode}
+    >
       <SelectFieldExampleCustomLabel />
     </CodeExample>
-    <CodeExample code={selectFieldExampleFloatingLabelCode}>
+    <CodeExample
+      title="Floating label example"
+      description={descriptions.floating}
+      code={selectFieldExampleFloatingLabelCode}
+    >
       <SelectFieldExampleFloatingLabel />
     </CodeExample>
-    <CodeExample code={selectFieldExampleErrorCode}>
+    <CodeExample
+      title="ErrorText example"
+      description={descriptions.errorText}
+      code={selectFieldExampleErrorCode}
+    >
       <SelectFieldExampleError />
     </CodeExample>
     <PropTypeDescription code={selectFieldCode}/>

src/refresh-indicator.jsx

@@ -13,7 +13,7 @@ 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.
+     * "ready" and it's percentage is less than 100.
      */
     color: React.PropTypes.string,
 
@@ -24,7 +24,7 @@ const RefreshIndicator = React.createClass({
 
     /**
      * Override the theme's color of the indicator while
-     * it's status is "loading" or it's percentage is 100.
+     * it's status is "loading" or when it's percentage is 100.
      */
     loadingColor: React.PropTypes.string,
 
@@ -53,7 +53,7 @@ const RefreshIndicator = React.createClass({
     style: React.PropTypes.object,
 
     /**
-     * The absolute right position of the indicator in pixels.
+     * The absolute top position of the indicator in pixels.
      */
     top: React.PropTypes.number.isRequired,
   },