From 6e9331981df28bdf163ba54f7744d157246a1eb1 Mon Sep 17 00:00:00 2001
From: igorbt <igorbt@yahoo.com>
Date: Thu, 22 Oct 2015 07:33:24 +0300
Subject: [PATCH 1/2] adding back grid-list code examples

---
 .../components/pages/components/grid-list.jsx | 108 ++++++------------
 .../components/raw-code/grid-list-code.txt    |  32 ++++++
 2 files changed, 70 insertions(+), 70 deletions(-)
 create mode 100644 docs/src/app/components/raw-code/grid-list-code.txt

diff --git a/docs/src/app/components/pages/components/grid-list.jsx b/docs/src/app/components/pages/components/grid-list.jsx
index 4c42eb526a753a..edd1029abc0421 100644
--- a/docs/src/app/components/pages/components/grid-list.jsx
+++ b/docs/src/app/components/pages/components/grid-list.jsx
@@ -5,48 +5,14 @@ let StarBorder = require('svg-icons/toggle/star-border');
 let IconButton = require('icon-button');
 
 let ComponentDoc = require('../../component-doc');
-
+let Code = require('grid-list-code');
+let CodeExample = require('../../code-example/code-example');
 
 class GridListPage extends React.Component {
 
   constructor(props) {
     super(props);
 
-    this.code = `
-{/* Basic grid list with mostly default options */}
-<GridList
-  cellHeight={200}
-  style={{width: 320, height: 640, overflowY: 'auto'}}
-  >
-  {
-    tilesData.map(tile => <GridTile
-      title={tile.title}
-      subtitle={<span>by <b>{tile.author}</b></span>}
-      actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-      ><img src={tile.img} /></GridTile>)
-  }
-</GridList>
-{/* Grid list with all possible overrides */}
-<GridList
-  cols={2}
-  cellHeight={200}
-  padding={1}
-  style={{width: 320, height: 640, overflowY: 'auto'}}
-  >
-  {
-    tilesData.map(tile => <GridTile
-      title={tile.title}
-      actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-      actionPosition="left"
-      titlePosition="top"
-      titleBackground={gradientBg}
-      cols={tile.featured ? 2 : 1}
-      rows={tile.featured ? 2 : 1}
-      ><img src={tile.img} /></GridTile>)
-  }
-</GridList>
-    `;
-
     this.desc = <p>Simple flex-box based <a
                   href="https://www.google.com/design/spec/components/grid-lists.html"
                   >Grid List</a> implementation. Support tiles with arbitrary cell size,
@@ -207,40 +173,42 @@ class GridListPage extends React.Component {
         code={this.code}
         desc={this.desc}
         componentInfo={this.componentInfo}>
-        <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
-          {/* Basic grid list with mostly default options */}
-          <GridList
-            cellHeight={200}
-            style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
-            >
-            {
-              tilesData.map(tile => <GridTile
-                title={tile.title}
-                subtitle={<span>by <b>{tile.author}</b></span>}
-                actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-                ><img src={tile.img} /></GridTile>)
-            }
-          </GridList>
-          {/* Grid list with all possible overrides */}
-          <GridList
-            cols={2}
-            cellHeight={200}
-            padding={1}
-            style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
-            >
-            {
-              tilesData.map(tile => <GridTile
-                title={tile.title}
-                actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
-                actionPosition="left"
-                titlePosition="top"
-                titleBackground={gradientBg}
-                cols={tile.featured ? 2 : 1}
-                rows={tile.featured ? 2 : 1}
-                ><img src={tile.img} /></GridTile>)
-            }
-          </GridList>
-        </div>
+        <CodeExample code={Code}>
+          <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
+            {/* Basic grid list with mostly default options */}
+            <GridList
+              cellHeight={200}
+              style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
+              >
+              {
+                tilesData.map(tile => <GridTile
+                  title={tile.title}
+                  subtitle={<span>by <b>{tile.author}</b></span>}
+                  actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+                  ><img src={tile.img} /></GridTile>)
+              }
+            </GridList>
+            {/* Grid list with all possible overrides */}
+            <GridList
+              cols={2}
+              cellHeight={200}
+              padding={1}
+              style={{width: 320, height: 640, overflowY: 'auto', marginBottom: 24}}
+              >
+              {
+                tilesData.map(tile => <GridTile
+                  title={tile.title}
+                  actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+                  actionPosition="left"
+                  titlePosition="top"
+                  titleBackground={gradientBg}
+                  cols={tile.featured ? 2 : 1}
+                  rows={tile.featured ? 2 : 1}
+                  ><img src={tile.img} /></GridTile>)
+              }
+            </GridList>
+          </div>
+        </CodeExample>
       </ComponentDoc>
     );
   }
diff --git a/docs/src/app/components/raw-code/grid-list-code.txt b/docs/src/app/components/raw-code/grid-list-code.txt
new file mode 100644
index 00000000000000..0fa7b71d181d1f
--- /dev/null
+++ b/docs/src/app/components/raw-code/grid-list-code.txt
@@ -0,0 +1,32 @@
+{/* Basic grid list with mostly default options */}
+<GridList
+  cellHeight={200}
+  style={{width: 320, height: 640, overflowY: 'auto'}}
+  >
+  {
+    tilesData.map(tile => <GridTile
+      title={tile.title}
+      subtitle={<span>by <b>{tile.author}</b></span>}
+      actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+      ><img src={tile.img} /></GridTile>)
+  }
+</GridList>
+{/* Grid list with all possible overrides */}
+<GridList
+  cols={2}
+  cellHeight={200}
+  padding={1}
+  style={{width: 320, height: 640, overflowY: 'auto'}}
+  >
+  {
+    tilesData.map(tile => <GridTile
+      title={tile.title}
+      actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
+      actionPosition="left"
+      titlePosition="top"
+      titleBackground={gradientBg}
+      cols={tile.featured ? 2 : 1}
+      rows={tile.featured ? 2 : 1}
+      ><img src={tile.img} /></GridTile>)
+  }
+</GridList>

From 8aaa2230b35c144c5d804868c8ef757215ad0bfa Mon Sep 17 00:00:00 2001
From: igorbt <igorbt@yahoo.com>
Date: Wed, 28 Oct 2015 06:28:43 +0200
Subject: [PATCH 2/2] fixed warning about keys and style

---
 docs/src/app/components/pages/components/grid-list.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/components/pages/components/grid-list.jsx b/docs/src/app/components/pages/components/grid-list.jsx
index edd1029abc0421..db250fab9834f4 100644
--- a/docs/src/app/components/pages/components/grid-list.jsx
+++ b/docs/src/app/components/pages/components/grid-list.jsx
@@ -165,7 +165,7 @@ class GridListPage extends React.Component {
       },
     ];
 
-    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%);';
+    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 (
       <ComponentDoc
@@ -182,6 +182,7 @@ class GridListPage extends React.Component {
               >
               {
                 tilesData.map(tile => <GridTile
+                  key={tile.img}
                   title={tile.title}
                   subtitle={<span>by <b>{tile.author}</b></span>}
                   actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
@@ -197,6 +198,7 @@ class GridListPage extends React.Component {
               >
               {
                 tilesData.map(tile => <GridTile
+                  key={tile.img}
                   title={tile.title}
                   actionIcon={<IconButton><StarBorder color="white"/></IconButton>}
                   actionPosition="left"