[GridList] Migrate to v1 branch

docs/src/components/AppFrame.js

@@ -45,11 +45,6 @@ const styleSheet = createStyleSheet('AppFrame', theme => ({
       WebkitFontSmoothing: 'antialiased', // Antialiasing.
       MozOsxFontSmoothing: 'grayscale', // Antialiasing.
     },
-    img: {
-      maxWidth: '100%',
-      height: 'auto',
-      width: 'auto',
-    },
   },
   root: {
     display: 'flex',

docs/src/pages/component-api/Grid/Grid.md

@@ -13,13 +13,13 @@
 | component | union:&nbsp;string<br>&nbsp;Function<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | container | boolean | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. |
 | direction | union:&nbsp;'row'<br>&nbsp;'row-reverse'<br>&nbsp;'column'<br>&nbsp;'column-reverse'<br> | 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. |
-| gutter | union:&nbsp;0, 8, 16, 24, 40<br> | 16 | Defines the space between the type `item` component. It can only be used on a type `container` component. |
 | hidden | [HiddenProps](/layout/hidden) | undefined | If provided, will wrap with [Hidden](/component-api/Hidden) component and given properties. |
 | item | boolean | false | It true, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. |
 | justify | union:&nbsp;'flex-start', 'center', 'flex-end', 'space-between', 'space-around'<br> | 'flex-start' | Defines the `justify-content` style property. It is applied for all screen sizes. |
 | lg | union:&nbsp;boolean, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
 | md | union:&nbsp;boolean, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
 | sm | union:&nbsp;boolean, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. |
+| spacing | union:&nbsp;0, 8, 16, 24, 40<br> | 16 | Defines the space between the type `item` component. It can only be used on a type `container` component. |
 | wrap | union:&nbsp;'nowrap'<br>&nbsp;'wrap'<br>&nbsp;'wrap-reverse'<br> | 'wrap' | Defines the `flex-wrap` style property. It's applied for all screen sizes. |
 | xl | union:&nbsp;boolean, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for the `xl` breakpoint and wider screens. |
 | xs | union:&nbsp;boolean, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12<br> |  | Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority. |
@@ -44,10 +44,10 @@ This property accepts the following keys:
 - `justify-xs-flex-end`
 - `justify-xs-space-between`
 - `justify-xs-space-around`
-- `gutter-xs-8`
-- `gutter-xs-16`
-- `gutter-xs-24`
-- `gutter-xs-40`
+- `spacing-xs-8`
+- `spacing-xs-16`
+- `spacing-xs-24`
+- `spacing-xs-40`
 - `grid-xs`
 - `grid-xs-1`
 - `grid-xs-2`

docs/src/pages/component-api/GridList/GridList.md

@@ -0,0 +1,30 @@
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# GridList
+
+
+
+## Props
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| cellHeight | union:&nbsp;number<br>&nbsp;[object Object]<br> | 180 | Number of px for one cell height. You can set `'auto'` if you want to let the children determine the height. |
+| <span style="color: #31a148">children *</span> | node |  | Grid Tiles that will be in Grid List. |
+| classes | object |  | Useful to extend the style applied to components. |
+| cols | number | 2 | Number of columns. |
+| component | union:&nbsp;string<br>&nbsp;func<br> | 'ul' | The component used for the root node. Either a string to use a DOM element or a component. By default we map the type to a good default headline component. |
+| spacing | number | 4 | Number of px for the spacing between tiles. |
+
+Any other properties supplied will be spread to the root element.
+
+## CSS API
+
+You can overrides all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiGridList`.

docs/src/pages/component-api/GridList/GridListTile.md

@@ -0,0 +1,32 @@
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# GridListTile
+
+
+
+## Props
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| children | node |  | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). |
+| classes | object |  | Useful to extend the style applied to components. |
+| cols | number | 1 | Width of the tile in number of grid cells. |
+| component | union:&nbsp;string<br>&nbsp;func<br> | 'li' | The component used for the root node. Either a string to use a DOM element or a component. |
+| rows | number | 1 | Height of the tile in number of grid cells. |
+
+Any other properties supplied will be spread to the root element.
+
+## CSS API
+
+You can overrides all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+- `tile`
+- `imgFullHeight`
+- `imgFullWidth`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiGridListTile`.

docs/src/pages/component-api/GridList/GridListTileBar.md

@@ -0,0 +1,40 @@
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# GridListTileBar
+
+
+
+## Props
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| actionIcon | element |  | An IconButton element to be used as secondary action target (primary action target is the tile itself). |
+| actionPosition | enum:&nbsp;'left'<br>&nbsp;'right'<br> | 'right' | Position of secondary action IconButton. |
+| classes | object |  | Useful to extend the style applied to components. |
+| subtitle | node |  | String or element serving as subtitle (support text). |
+| <span style="color: #31a148">title *</span> | node |  | Title to be displayed on tile. |
+| titlePosition | enum:&nbsp;'top'<br>&nbsp;'bottom'<br> | 'bottom' | Position of the title bar. |
+
+Any other properties supplied will be spread to the root element.
+
+## CSS API
+
+You can overrides all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+- `rootBottom`
+- `rootTop`
+- `rootWithSubtitle`
+- `titleWrap`
+- `titleWrapActionLeft`
+- `titleWrapActionRight`
+- `title`
+- `subtitle`
+- `actionIconPositionLeft`
+- `childImg`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
+section for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiGridListTileBar`.

docs/src/pages/component-api/Radio/RadioGroup.md

@@ -10,7 +10,7 @@
 | children | Element |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | name | string |  | The name used to reference the value of the control. |
-| onChange | Function |  | Callback fired when a radio button is selected.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
+| onChange | Function |  | Callback fired when a radio button is selected.<br><br>**Signature:**<br>`function(event: object, value: string) => void`<br>*event:* The event source of the callback<br>*value:* The `value` of the selected radio button |
 | selectedValue | string |  | Value of the selected radio button |
 
 Any other properties supplied will be spread to the root element.

docs/src/pages/component-api/transitions/Slide.md

@@ -18,7 +18,6 @@
 | onExit | function |  | Callback fired before the component exits. |
 | onExited | function |  | Callback fired when the component has exited. |
 | onExiting | function |  | Callback fired when the component is exiting. |
-| <span style="color: #31a148">theme *</span> | object |  |  |
 
 Any other properties supplied will be spread to the root element.
 

docs/src/pages/component-demos/cards/NowPlayingCard.js

@@ -9,7 +9,7 @@ import Typography from 'material-ui/Typography';
 import SkipPreviousIcon from 'material-ui-icons/SkipPrevious';
 import PlayArrowIcon from 'material-ui-icons/PlayArrow';
 import SkipNextIcon from 'material-ui-icons/SkipNext';
-import albumCover from 'docs/src/assets/images/live-from-space.jpg';
+import albumCover from 'docs/src/assets/images/cards/live-from-space.jpg';
 
 const styleSheet = createStyleSheet({
   card: {

docs/src/pages/component-demos/cards/RecipeReviewCard.js

@@ -13,10 +13,12 @@ import red from 'material-ui/colors/red';
 import FavoriteIcon from 'material-ui-icons/Favorite';
 import ShareIcon from 'material-ui-icons/Share';
 import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
-import paellaImage from 'docs/src/assets/images/paella.jpg';
+import paellaImage from 'docs/src/assets/images/cards/paella.jpg';
 
 const styleSheet = createStyleSheet(theme => ({
-  card: { maxWidth: 400 },
+  card: {
+    maxWidth: 400,
+  },
   expand: {
     transform: 'rotate(0deg)',
     transition: theme.transitions.create('transform', {
@@ -26,8 +28,12 @@ const styleSheet = createStyleSheet(theme => ({
   expandOpen: {
     transform: 'rotate(180deg)',
   },
-  avatar: { backgroundColor: red[500] },
-  flexGrow: { flex: '1 1 auto' },
+  avatar: {
+    backgroundColor: red[500],
+  },
+  flexGrow: {
+    flex: '1 1 auto',
+  },
 }));
 
 class RecipeReviewCard extends Component {

docs/src/pages/component-demos/cards/SimpleMediaCard.js

@@ -6,7 +6,7 @@ import { withStyles, createStyleSheet } from 'material-ui/styles';
 import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card';
 import Button from 'material-ui/Button';
 import Typography from 'material-ui/Typography';
-import reptileImage from 'docs/src/assets/images/contemplative-reptile.jpg';
+import reptileImage from 'docs/src/assets/images/cards/contemplative-reptile.jpg';
 
 const styleSheet = createStyleSheet({
   card: {

docs/src/pages/component-demos/grid-list/AdvancedGridList.js

@@ -0,0 +1,81 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyleSheet, withStyles } from 'material-ui/styles';
+import { GridList, GridListTile, GridListTileBar } from 'material-ui/GridList';
+import IconButton from 'material-ui/IconButton';
+import StarBorderIcon from 'material-ui-icons/StarBorder';
+import tileData from './tileData';
+
+const styleSheet = createStyleSheet(theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    overflow: 'hidden',
+    background: theme.palette.background.paper,
+  },
+  gridList: {
+    width: 500,
+    height: 450,
+    // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
+    transform: 'translateZ(0)',
+  },
+  titleBar: {
+    background:
+      'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +
+      'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
+  },
+}));
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ *   {
+ *     img: image,
+ *     title: 'Image',
+ *     author: 'author',
+ *     featured: true,
+ *   },
+ *   {
+ *     [etc...]
+ *   },
+ * ];
+ */
+function AdvancedGridList(props) {
+  const classes = props.classes;
+
+  return (
+    <div className={classes.root}>
+      <GridList cellHeight={200} spacing={1} className={classes.gridList}>
+        {tileData.map(tile =>
+          <GridListTile key={tile.img} cols={tile.featured ? 2 : 1} rows={tile.featured ? 2 : 1}>
+            <img src={tile.img} alt={tile.title} />
+            <GridListTileBar
+              title={tile.title}
+              titlePosition="top"
+              actionIcon={
+                <IconButton>
+                  <StarBorderIcon color="white" />
+                </IconButton>
+              }
+              actionPosition="left"
+              className={classes.titleBar}
+            />
+          </GridListTile>,
+        )}
+      </GridList>
+    </div>
+  );
+}
+
+AdvancedGridList.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(AdvancedGridList);

docs/src/pages/component-demos/grid-list/ImageGridList.js

@@ -0,0 +1,64 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyleSheet, withStyles } from 'material-ui/styles';
+import { GridList, GridListTile } from 'material-ui/GridList';
+import tileData from './tileData';
+
+const styleSheet = createStyleSheet(theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-around',
+    overflow: 'hidden',
+    background: theme.palette.background.paper,
+  },
+  gridList: {
+    width: 500,
+    height: 450,
+  },
+  subheader: {
+    width: '100%',
+  },
+}));
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ *   {
+ *     img: image,
+ *     title: 'Image',
+ *     author: 'author',
+ *     cols: 2,
+ *   },
+ *   {
+ *     [etc...]
+ *   },
+ * ];
+ */
+function ImageGridList(props) {
+  const classes = props.classes;
+
+  return (
+    <div className={classes.root}>
+      <GridList cellHeight={160} className={classes.gridList} cols={3}>
+        {tileData.map(tile =>
+          <GridListTile key={tile.img} cols={tile.cols || 1}>
+            <img src={tile.img} alt={tile.title} />
+          </GridListTile>,
+        )}
+      </GridList>
+    </div>
+  );
+}
+
+ImageGridList.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(ImageGridList);