Added GridList subheader

docs/src/app/app-routes.jsx

@@ -13,6 +13,7 @@ import Prerequisites from './components/pages/get-started/Prerequisites';
 import Installation from './components/pages/get-started/Installation';
 import Usage from './components/pages/get-started/Usage';
 import Examples from './components/pages/get-started/Examples';
+import ServerRendering from './components/pages/get-started/ServerRendering';
 
 import Colors from './components/pages/customization/colors';
 import Themes from './components/pages/customization/themes';
@@ -77,6 +78,7 @@ const AppRoutes = (
       <Route path="installation" component={Installation} />
       <Route path="usage" component={Usage} />
       <Route path="examples" component={Examples} />
+      <Route path="server-rendering" component={ServerRendering} />
     </Route>
     <Redirect from="customization" to="/customization/themes" />
     <Route path="customization">

docs/src/app/components/PropTypeDescription.jsx

@@ -53,13 +53,11 @@ function generateDescription(required, description, type) {
   if (type.name === 'custom') {
     const deprecatedInfo = getDeprecatedInfo(type);
 
-    if (deprecatedInfo !== false) {
-      deprecated = `**DEPRECATED**. ${deprecatedInfo.explanation}<br><br>`;
+    if (deprecatedInfo) {
+      deprecated = `*Deprecated*. ${deprecatedInfo.explanation}<br><br>`;
     }
   }
 
-  const requirement = `${required ? '**required**' : '*optional*'}.`;
-
   const parsed = parseDoctrine(description);
 
   // two new lines result in a newline in the table. all other new lines
@@ -75,7 +73,7 @@ function generateDescription(required, description, type) {
     signature += parsed.tags.map(tag => `*${tag.name}:* ${tag.description}`).join('<br>');
   }
 
-  return `${deprecated} ${requirement} ${jsDocText}${signature}`;
+  return `${deprecated} ${jsDocText}${signature}`;
 }
 
 const PropTypeDescription = React.createClass({
@@ -97,6 +95,8 @@ const PropTypeDescription = React.createClass({
       header,
     } = this.props;
 
+    let requiredProps = 0;
+
     let text = `${header}
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|\n`;
@@ -112,14 +112,30 @@ const PropTypeDescription = React.createClass({
         defaultValue = prop.defaultValue.value.replace(/\n/g, '');
       }
 
+      if (prop.required) {
+        key = `<span style="color: #31a148">${key} \*</span>`;
+        requiredProps += 1;
+      }
+
+      if (prop.type.name === 'custom') {
+        if (getDeprecatedInfo(prop.type)) {
+          key = `~~${key}~~`;
+        }
+      }
+
       const description = generateDescription(prop.required, prop.description, prop.type);
 
       text += `| ${key} | ${generatePropType(prop.type)} | ${defaultValue} | ${description} |\n`;
     }
 
+    const requiredPropFootnote = (requiredProps === 1) ? '* required property' :
+      (requiredProps > 1) ? '* required properties' :
+        '';
+
     return (
       <div className="propTypeDescription">
         <MarkdownElement text={text} />
+        <div style={{fontSize: '90%', paddingLeft: '15px'}}>{requiredPropFootnote}</div>
       </div>
     );
   },

docs/src/app/components/app-left-nav.jsx

@@ -93,6 +93,7 @@ const AppLeftNav = React.createClass({
               <ListItem primaryText="Installation" value="/get-started/installation" />,
               <ListItem primaryText="Usage" value="/get-started/usage" />,
               <ListItem primaryText="Examples" value="/get-started/examples" />,
+              <ListItem primaryText="Server Rendering" value="/get-started/server-rendering" />,
             ]}
           />
           <ListItem

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/FlatButton/ExampleComplex.jsx

@@ -30,13 +30,14 @@ const FlatButtonExampleComplex = () => (
       icon={<ActionAndroid />}
     />
 
-    <a href="https://github.com/callemall/material-ui">
-      <FlatButton
-        label="GitHub Link"
-        secondary={true}
-        icon={<FontIcon className="muidocs-icon-custom-github" />}
-      />
-    </a>
+    <FlatButton
+      label="GitHub Link"
+      linkButton={true}
+      href="https://github.com/callemall/material-ui"
+      secondary={true}
+      icon={<FontIcon className="muidocs-icon-custom-github" />}
+    />
+
   </div>
 );
 

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

@@ -14,7 +14,7 @@ const descriptions = {
   simple: '`FlatButton` with default color, `primary`, `secondary` and and `disabled` props applied.',
   complex: 'The first example uses an `input` as a child component, ' +
   'the next has next has an [SVG Icon](/#/components/svg-icon), with the label positioned after. ' +
-  'The final example uses a [FontIcon](/#/components/font-icon), and is wrapped in an anchor tag.',
+  'The final example uses a [Font Icon](/#/components/font-icon), and is wrapped in an anchor tag.',
 };
 
 const FlatButtonPage = () => (

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

@@ -16,33 +16,19 @@ const FloatingActionButtonExampleSimple = () => (
       <ContentAdd />
     </FloatingActionButton>
 
-    <FloatingActionButton
-      secondary={true}
-      style={style}
-    >
+    <FloatingActionButton secondary={true} style={style}>
       <ContentAdd />
     </FloatingActionButton>
 
-    <FloatingActionButton
-      mini={true}
-      secondary={true}
-      style={style}
-    >
+    <FloatingActionButton mini={true} secondary={true} style={style}>
       <ContentAdd />
     </FloatingActionButton>
 
-    <FloatingActionButton
-      disabled={true}
-      style={style}
-    >
+    <FloatingActionButton disabled={true} style={style}>
       <ContentAdd />
     </FloatingActionButton>
 
-    <FloatingActionButton
-      mini={true}
-      disabled={true}
-      style={style}
-    >
+    <FloatingActionButton mini={true} disabled={true} style={style}>
       <ContentAdd />
     </FloatingActionButton>
   </div>

docs/src/app/components/pages/components/FontIcon/ExampleIcons.jsx

@@ -8,7 +8,7 @@ const iconStyles = {
 
 const FontIconExampleIcons = () => (
   <div>
-    <FontIcon className="material-icons" style={iconStyles} >home</FontIcon>
+    <FontIcon className="material-icons" style={iconStyles}>home</FontIcon>
     <FontIcon className="material-icons" style={iconStyles} color={Colors.red500}>flight_takeoff</FontIcon>
     <FontIcon className="material-icons" style={iconStyles} color={Colors.yellow500}>cloud_download</FontIcon>
     <FontIcon className="material-icons" style={iconStyles} color={Colors.blue500}>videogame_asset</FontIcon>

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

@@ -11,23 +11,25 @@ import IconExampleIcons from './ExampleIcons';
 import iconExampleIconsCode from '!raw!./ExampleIcons';
 
 const descriptions = {
-  custom: 'These examples use a custom font. The `className` defines the specific icon. ' +
-  'The third example has a `hoverColor` defined.',
-  public: 'These examples use the Material Design icon font, referenced in the `<head>` of the docs site index page.',
+  custom: 'This example uses a custom font (not part of Material-UI). The `className` defines the specific ' +
+  'icon. The third example has a `hoverColor` defined.',
+  public: 'This example uses the [Material icons font]' +
+  '(http://google.github.io/material-design-icons/#icon-font-for-the-web), referenced in the `<head>` of the docs ' +
+  'site index page. The `className` defines the font, and the `IconFont` tag content defines the specific icon.',
 };
 
 const FontIconPage = () => (
   <div>
     <MarkdownElement text={iconReadmeText} />
     <CodeExample
-      title="Custom icon-font"
+      title="Custom icon font"
       description={descriptions.custom}
       code={iconExampleSimpleCode}
     >
       <IconExampleSimple />
     </CodeExample>
     <CodeExample
-      title="Public icon-font"
+      title="Public icon font"
       description={descriptions.public}
       code={iconExampleIconsCode}
     >

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

@@ -1,7 +1,13 @@
 ## Font Icon
+
 This component will render any [icon](https://www.google.com/design/spec/style/icons.html#icons-system-icons) 
-defined in any style sheets included in your project. You can use sites like [IcoMoon](https://icomoon.io/) 
-to generate custom font files. To use `FontIcon`, add the icon stylesheet to your project and reference the 
-icon's class in the `className` prop.
+defined in any stylesheet included in your project. You can use sites like [IcoMoon](https://icomoon.io/) 
+to generate custom font files, or use prebuilt fonts such as [Material icons](https://design.google.com/icons/) or 
+[Font Awesome](http://fontawesome.io/) either included in your project, or served from a public 
+[Content Delivery Network](https://en.wikipedia.org/wiki/Content_delivery_network). 
+
+To use `FontIcon`, add the icon stylesheet to your project and reference the icon's class in the `className` prop. 
+If  the icon font supports ligatures, reference the font in the `className` and enclose the icon name in the `FontIcon` 
+tag.
 
 ### Examples

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

@@ -3,6 +3,7 @@ import GridList from 'material-ui/lib/grid-list/grid-list';
 import GridTile from 'material-ui/lib/grid-list/grid-tile';
 import StarBorder from 'material-ui/svg-icons/toggle/star-border';
 import IconButton from 'material-ui/lib/icon-button';
+import Subheader from 'material-ui/lib/Subheader';
 
 const styles = {
   root: {
@@ -68,6 +69,7 @@ const GridListExampleSimple = () => (
       cellHeight={200}
       style={styles.gridList}
     >
+      <Subheader>December</Subheader>
       {tilesData.map(tile => (
         <GridTile
           key={tile.img}

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

@@ -12,7 +12,7 @@ import gridListExampleComplexCode from '!raw!./ExampleComplex';
 import GridListExampleComplex from './ExampleComplex';
 
 const descriptions = {
-  simple: 'A simple example of a scrollable `GridList`.',
+  simple: 'A simple example of a scrollable `GridList` and GridList `Subheader`.',
   complex: 'This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the ' +
   'tile. The tiles have a customised title, positioned at the top and with a custom gradient `titleBackground`.',
 };

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

@@ -9,14 +9,17 @@ import radioButtonGroupCode from '!raw!material-ui/lib/radio-button-group';
 import RadioButtonExampleSimple from './ExampleSimple';
 import radioButtonExampleSimpleCode from '!raw!./ExampleSimple';
 
+const description = 'The second button is selected by default using the `defaultSelected` property of ' +
+  '`RadioButtonGroup`. The third button is disabled using the `disabled` property of `RadioButton.';
+
 const RadioButtonPage = () => (
   <div>
     <MarkdownElement text={radioButtonReadmeText} />
-    <CodeExample code={radioButtonExampleSimpleCode}>
+    <CodeExample description={description} code={radioButtonExampleSimpleCode}>
       <RadioButtonExampleSimple />
     </CodeExample>
-    <PropTypeDescription code={radioButtonCode} header="### RadioButton Properties" />
-    <PropTypeDescription code={radioButtonGroupCode} header="### RadioButtonGroup Properties" />
+    <PropTypeDescription header="### RadioButton Properties" code={radioButtonCode} />
+    <PropTypeDescription header="### RadioButtonGroup Properties" code={radioButtonGroupCode} />
   </div>
 );
 

docs/src/app/components/pages/components/RaisedButton/ExampleComplex.jsx

@@ -23,24 +23,17 @@ const RaisedButtonExampleComplex = () => (
   <div>
     <RaisedButton
       label="Choose an Image"
-      primary={true}
       style={styles.button}
     >
       <input type="file" style={styles.exampleImageInput} />
     </RaisedButton>
     <RaisedButton
       label="Label after"
       labelPosition="after"
-      secondary={true}
+      primary={true}
       icon={<ActionAndroid />}
       style={styles.button}
     />
-    <RaisedButton
-      label="Disabled"
-      disabled={true}
-      style={styles.button}
-    />
-    <br />
     <RaisedButton
       label="Github Link"
       linkButton={true}

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

@@ -10,6 +10,7 @@ const RaisedButtonExampleSimple = () => (
     <RaisedButton label="Default" style={style} />
     <RaisedButton label="Primary" primary={true} style={style} />
     <RaisedButton label="Secondary" secondary={true} style={style} />
+    <RaisedButton label="Disabled" disabled={true} style={style} />
   </div>
 );