[docs] Add an One line example for GridLists

Thanks @sottar.

Closes mui#5258.
Closes mui#5300.

Author: sottar

docs/src/app/components/pages/components/GridList/ExampleComplex.js

@@ -13,7 +13,6 @@ const styles = {
     width: 500,
     height: 450,
     overflowY: 'auto',
-    marginBottom: 24,
   },
 };
 
@@ -62,6 +61,10 @@ const tilesData = [
   },
 ];
 
+/**
+ * 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`.
+ */
 const GridListExampleComplex = () => (
   <div style={styles.root}>
     <GridList

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

@@ -12,9 +12,8 @@ const styles = {
   },
   gridList: {
     width: 500,
-    height: 500,
+    height: 450,
     overflowY: 'auto',
-    marginBottom: 24,
   },
 };
 
@@ -61,10 +60,13 @@ const tilesData = [
   },
 ];
 
+/**
+ * A simple example of a scrollable `GridList` containing a [Subheader](/#/components/subheader).
+ */
 const GridListExampleSimple = () => (
   <div style={styles.root}>
     <GridList
-      cellHeight={200}
+      cellHeight={180}
       style={styles.gridList}
     >
       <Subheader>December</Subheader>

docs/src/app/components/pages/components/GridList/ExampleSingleLine.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import {GridList, GridTile} from 'material-ui/GridList';
+import IconButton from 'material-ui/IconButton';
+import StarBorder from 'material-ui/svg-icons/toggle/star-border';
+
+const styles = {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+  },
+  gridList: {
+    display: 'flex',
+    flexWrap: 'nowrap',
+    overflowX: 'auto',
+  },
+};
+
+const tilesData = [
+  {
+    img: 'images/grid-list/00-52-29-429_640.jpg',
+    title: 'Breakfast',
+    author: 'jill111',
+  },
+  {
+    img: 'images/grid-list/burger-827309_640.jpg',
+    title: 'Tasty burger',
+    author: 'pashminu',
+  },
+  {
+    img: 'images/grid-list/camera-813814_640.jpg',
+    title: 'Camera',
+    author: 'Danson67',
+  },
+  {
+    img: 'images/grid-list/morning-819362_640.jpg',
+    title: 'Morning',
+    author: 'fancycrave1',
+  },
+  {
+    img: 'images/grid-list/hats-829509_640.jpg',
+    title: 'Hats',
+    author: 'Hans',
+  },
+  {
+    img: 'images/grid-list/honey-823614_640.jpg',
+    title: 'Honey',
+    author: 'fancycravel',
+  },
+  {
+    img: 'images/grid-list/vegetables-790022_640.jpg',
+    title: 'Vegetables',
+    author: 'jill111',
+  },
+  {
+    img: 'images/grid-list/water-plant-821293_640.jpg',
+    title: 'Water plant',
+    author: 'BkrmadtyaKarki',
+  },
+];
+
+/**
+ * This example demonstrates the horizontal scrollable single-line grid list of images.
+ */
+const GridListExampleSingleLine = () => (
+  <div style={styles.root}>
+    <GridList style={styles.gridList} cols={2.2}>
+      {tilesData.map((tile) => (
+        <GridTile
+          key={tile.img}
+          title={tile.title}
+          actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
+        >
+          <img src={tile.img} />
+        </GridTile>
+      ))}
+    </GridList>
+  </div>
+);
+
+export default GridListExampleSingleLine;

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

@@ -10,33 +10,33 @@ import gridListExampleSimpleCode from '!raw!./ExampleSimple';
 import GridListExampleSimple from './ExampleSimple';
 import gridListExampleComplexCode from '!raw!./ExampleComplex';
 import GridListExampleComplex from './ExampleComplex';
+import gridListExampleSingleLineCode from '!raw!./ExampleSingleLine';
+import GridListExampleSingleLine from './ExampleSingleLine';
 import gridListCode from '!raw!material-ui/GridList/GridList';
 import gridTileCode from '!raw!material-ui/GridList/GridTile';
 
-const descriptions = {
-  simple: 'A simple example of a scrollable `GridList` containing a [Subheader](/#/components/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`.',
-};
-
 const GridListPage = () => (
   <div>
     <Title render={(previousTitle) => `Grid List - ${previousTitle}`} />
     <MarkdownElement text={gridListReadmeText} />
     <CodeExample
       title="Simple example"
-      description={descriptions.simple}
       code={gridListExampleSimpleCode}
     >
       <GridListExampleSimple />
     </CodeExample>
     <CodeExample
       title="Complex example"
-      description={descriptions.complex}
       code={gridListExampleComplexCode}
     >
       <GridListExampleComplex />
     </CodeExample>
+    <CodeExample
+      title="One line example"
+      code={gridListExampleSingleLineCode}
+    >
+      <GridListExampleSingleLine />
+    </CodeExample>
     <PropTypeDescription header="### GridList Properties" code={gridListCode} />
     <PropTypeDescription header="### GridTile Properties" code={gridTileCode} />
   </div>