diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx
index f2cd2d745e2232..bdf00f2ff3b926 100644
--- a/docs/src/app/app-routes.jsx
+++ b/docs/src/app/app-routes.jsx
@@ -32,7 +32,7 @@ import DatePicker from './components/pages/components/date-picker';
import DialogPage from './components/pages/components/Dialog/Page';
import DividerPage from './components/pages/components/Divider/Page';
import DropDownMenuPage from './components/pages/components/DropDownMenu/Page';
-import GridList from './components/pages/components/grid-list';
+import GridListPage from './components/pages/components/GridList/Page';
import Icons from './components/pages/components/icons';
import IconButtons from './components/pages/components/icon-buttons';
import IconMenus from './components/pages/components/icon-menus';
@@ -93,7 +93,7 @@ const AppRoutes = (
-
+
diff --git a/docs/src/app/components/pages/components/GridList/ExampleComplex.jsx b/docs/src/app/components/pages/components/GridList/ExampleComplex.jsx
new file mode 100644
index 00000000000000..5070e1b4efa7eb
--- /dev/null
+++ b/docs/src/app/components/pages/components/GridList/ExampleComplex.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+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/lib/svg-icons/toggle/star-border';
+import IconButton from 'material-ui/lib/icon-button';
+
+const tilesData = [
+ {
+ img: 'images/grid-list/00-52-29-429_640.jpg',
+ title: 'Breakfast',
+ author: 'jill111',
+ featured: true,
+ },
+ {
+ 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',
+ featured: true,
+ },
+ {
+ 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',
+ },
+];
+
+const gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)';
+const tileElements = tilesData.map(tile => }
+ actionPosition="left"
+ titlePosition="top"
+ titleBackground={gradientBg}
+ cols={tile.featured ? 2 : 1}
+ rows={tile.featured ? 2 : 1}
+ >
);
+const gridListStyle = {width: 500, height: 400, overflowY: 'auto', marginBottom: 24};
+
+const GridListExampleComplex = () => (
+
+ {/*Grid list with all possible overrides*/}
+
+ {tileElements}
+
+
+);
+
+export default GridListExampleComplex;
diff --git a/docs/src/app/components/pages/components/GridList/ExampleSimple.jsx b/docs/src/app/components/pages/components/GridList/ExampleSimple.jsx
new file mode 100644
index 00000000000000..7f146211282670
--- /dev/null
+++ b/docs/src/app/components/pages/components/GridList/ExampleSimple.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+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';
+
+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',
+ },
+];
+
+const tileElements = tilesData.map(tile => by {tile.author}}
+ actionIcon={}
+ >);
+const gridListStyle = {width: 500, height: 400, overflowY: 'auto', marginBottom: 24};
+
+const GridListExampleSimple = () => (
+
+ {/* Basic grid list with mostly default options */}
+
+ {tileElements}
+
+
+);
+
+export default GridListExampleSimple;
diff --git a/docs/src/app/components/pages/components/GridList/Page.jsx b/docs/src/app/components/pages/components/GridList/Page.jsx
new file mode 100644
index 00000000000000..d989657c8972fd
--- /dev/null
+++ b/docs/src/app/components/pages/components/GridList/Page.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import gridListCode from '!raw!material-ui/lib/grid-list/grid-list';
+import gridTileCode from '!raw!material-ui/lib/grid-list/grid-tile';
+import gridListReadmeText from './README';
+import gridListExampleSimpleCode from '!raw!./ExampleSimple';
+import GridListExampleSimple from './ExampleSimple';
+import gridListExampleComplexCode from '!raw!./ExampleComplex';
+import GridListExampleComplex from './ExampleComplex';
+
+const GridListPage = () => (
+
+);
+
+export default GridListPage;
diff --git a/docs/src/app/components/pages/components/GridList/README.md b/docs/src/app/components/pages/components/GridList/README.md
new file mode 100644
index 00000000000000..cdcbdb87e38920
--- /dev/null
+++ b/docs/src/app/components/pages/components/GridList/README.md
@@ -0,0 +1,3 @@
+## Grid List
+Simple flex-box based [Grid List](https://www.google.com/design/spec/components/grid-lists.html) implementation. Support tiles with arbitrary cell size, but cannot implement complex layouts (limited to flex-box limitations).
+### Examples
diff --git a/docs/src/app/components/pages/components/grid-list.jsx b/docs/src/app/components/pages/components/grid-list.jsx
deleted file mode 100644
index aea92f1ee37de6..00000000000000
--- a/docs/src/app/components/pages/components/grid-list.jsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import React from 'react';
-import {GridList, GridTile, Paper} from 'material-ui';
-
-import StarBorder from 'material-ui/svg-icons/toggle/star-border';
-import IconButton from 'icon-button';
-
-import ComponentDoc from '../../component-doc';
-import Code from 'grid-list-code';
-import CodeExample from '../../CodeExample';
-import CodeBlock from '../../CodeExample/CodeBlock';
-
-class GridListPage extends React.Component {
-
- constructor(props) {
- super(props);
-
- this.desc = (
-
- Simple flex-box based Grid List implementation. Support tiles with arbitrary cell size,
- but cannot implement complex layouts (like Angular Material GridList)
- , is limited to flex-box limitations.
-
- );
-
- this.componentInfo = [
- {
- name: 'GridList Props',
- infoArray: [
- {
- name: 'cols',
- type: 'number',
- header: 'optional',
- desc: 'Number of columns. Defaults to 2.',
- },
- {
- name: 'padding',
- type: 'number',
- header: 'optional',
- desc: 'Number of px for the padding/spacing between items. Defaults to 4.',
- },
- {
- name: 'cellHeight',
- type: 'number',
- header: 'optional',
- desc: 'Number of px for one cell height. Defaults to 180.',
- },
- {
- name: 'style',
- type: 'object',
- header: 'optional',
- desc: 'Override the inline-styles of the grid list\'s root element.',
- },
- ],
- },
- {
- name: 'GridTile Props',
- infoArray: [
- {
- name: 'title',
- type: 'node',
- header: 'optional',
- desc: 'Title to be displayed on tile.',
- },
- {
- name: 'subtitle',
- type: 'node',
- header: 'optional',
- desc: 'String or element serving as subtitle (support text).',
- },
- {
- name: 'titlePosition',
- type: 'oneOf ["top", "bottom"]',
- header: 'optional',
- desc: `Position of the title bar (container of title, subtitle and action icon).
- Defaults to "bottom".`,
- },
- {
- name: 'titleBackground',
- type: 'string',
- header: 'optional',
- desc: `Style used for title bar background.
- Defaults to "rgba(0, 0, 0, 0.4)".
- Useful for setting custom gradients for example`,
- },
- {
- name: 'actionIcon',
- type: 'element',
- header: 'optional',
- desc: `An IconButton element to be used as secondary action target
- (primary action target is the tile itself).`,
- },
- {
- name: 'actionPosition',
- type: 'oneOf ["left", "right"]',
- header: 'optional',
- desc: 'Position of secondary action IconButton. Defaults to "right".',
- },
- {
- name: 'cols',
- type: 'number',
- header: 'optional',
- desc: 'Width of the tile in number of grid cells. Defaults to 1.',
- },
- {
- name: 'rows',
- type: 'number',
- header: 'optional',
- desc: 'Height of the tile in number of grid cells. Defaults to 1.',
- },
- {
- name: 'style',
- type: 'object',
- header: 'optional',
- desc: 'Override the inline-styles of the grid tile\'s root element.',
- },
- {
- name: 'rootClass',
- type: 'string|ReactComponent',
- header: 'optional',
- desc: `Either a string used as tag name for the tile root element, or a ReactComponent.
- Defaults to "div".
- This is useful when you have, for example,
- a custom implementation of a navigation link (that knows about your routes)
- and you want to use it as primary tile action. In case you pass a ReactComponent,
- please make sure that it passes all props, accepts styles overrides and render it's children.`,
- },
- {
- name: 'children',
- type: 'node',
- header: 'required',
- desc: `Theoretically you can pass any node as children, but the main use case is to pass an img,
- in which case GridTile takes care of making the image "cover" available space
- (similar to background-size: cover or to object-fit:cover)`,
- },
- ],
- },
- ];
- }
-
- render() {
- let tilesData = [
- {
- img: 'images/grid-list/00-52-29-429_640.jpg',
- title: 'Breakfast',
- author: 'jill111',
- featured: true,
- },
- {
- 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',
- featured: true,
- },
- {
- 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',
- },
- ];
-
- let gradientBg = 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)';
-
- return (
-
-
-
-
- {
- '//Import statement:\nimport GridList from \'material-ui/lib/grid-list/grid-list\';\n' +
- 'import GridTile from \'material-ui/lib/grid-list/grid-tile\';\n\n' +
- '//See material-ui/lib/index.js for more\n'
- }
-
-
-
-
-
- {/* Basic grid list with mostly default options */}
-
- {
- tilesData.map(tile => by {tile.author}}
- actionIcon={}
- >)
- }
-
- {/* Grid list with all possible overrides */}
-
- {
- tilesData.map(tile => }
- actionPosition="left"
- titlePosition="top"
- titleBackground={gradientBg}
- cols={tile.featured ? 2 : 1}
- rows={tile.featured ? 2 : 1}
- >)
- }
-
-