Merge pull request #5827 from oliviertassinari/layout-improve

[Layout] Allow the component to be an item & container
mui · Dec 28, 2016 · 1450e2b · 1450e2b
2 parents 7df873a + b0a76aa
commit 1450e2b
Show file tree

Hide file tree

Showing 11 changed files with 207 additions and 74 deletions.
diff --git a/docs/site/src/pages/layout/responsive-ui/AutoLayout.js b/docs/site/src/pages/layout/responsive-ui/AutoLayout.js
@@ -21,35 +21,35 @@ export default function AutoLayout(props, context) {
 
   return (
     <div className={classes.root}>
-      <Layout type="container" xsGutter={24}>
-        <Layout type="item" xs>
+      <Layout container xsGutter={24}>
+        <Layout item xs>
           <Paper className={classes.paper}>
             xs
           </Paper>
         </Layout>
-        <Layout type="item" xs>
+        <Layout item xs>
           <Paper className={classes.paper}>
             xs
           </Paper>
         </Layout>
-        <Layout type="item" xs>
+        <Layout item xs>
           <Paper className={classes.paper}>
             xs
           </Paper>
         </Layout>
       </Layout>
-      <Layout type="container" xsGutter={24}>
-        <Layout type="item" xs>
+      <Layout container xsGutter={24}>
+        <Layout item xs>
           <Paper className={classes.paper}>
             xs
           </Paper>
         </Layout>
-        <Layout type="item" xs={6}>
+        <Layout item xs={6}>
           <Paper className={classes.paper}>
             xs=6
           </Paper>
         </Layout>
-        <Layout type="item" xs>
+        <Layout item xs>
           <Paper className={classes.paper}>
             xs
           </Paper>

diff --git a/docs/site/src/pages/layout/responsive-ui/CenteredLayout.js b/docs/site/src/pages/layout/responsive-ui/CenteredLayout.js
@@ -21,38 +21,38 @@ export default function CenteredLayout(props, context) {
 
   return (
     <div className={classes.root}>
-      <Layout type="container" xsGutter={24}>
-        <Layout type="item" xs={12}>
+      <Layout container xsGutter={24}>
+        <Layout item xs={12}>
           <Paper className={classes.paper}>
             xs=12
           </Paper>
         </Layout>
-        <Layout type="item" xs={6}>
+        <Layout item xs={6}>
           <Paper className={classes.paper}>
             xs=6
           </Paper>
         </Layout>
-        <Layout type="item" xs={6}>
+        <Layout item xs={6}>
           <Paper className={classes.paper}>
             xs=6
           </Paper>
         </Layout>
-        <Layout type="item" xs={3}>
+        <Layout item xs={3}>
           <Paper className={classes.paper}>
             xs=3
           </Paper>
         </Layout>
-        <Layout type="item" xs={3}>
+        <Layout item xs={3}>
           <Paper className={classes.paper}>
             xs=3
           </Paper>
         </Layout>
-        <Layout type="item" xs={3}>
+        <Layout item xs={3}>
           <Paper className={classes.paper}>
             xs=3
           </Paper>
         </Layout>
-        <Layout type="item" xs={3}>
+        <Layout item xs={3}>
           <Paper className={classes.paper}>
             xs=3
           </Paper>

diff --git a/docs/site/src/pages/layout/responsive-ui/FullWidthLayout.js b/docs/site/src/pages/layout/responsive-ui/FullWidthLayout.js
@@ -22,38 +22,38 @@ export default function FullWidthLayout(props, context) {
 
   return (
     <div className={classes.root}>
-      <Layout type="container" xsGutter={24}>
-        <Layout type="item" xs={12}>
+      <Layout container xsGutter={24}>
+        <Layout item xs={12}>
           <Paper className={classes.paper}>
             xs=12
           </Paper>
         </Layout>
-        <Layout type="item" xs={12} sm={6}>
+        <Layout item xs={12} sm={6}>
           <Paper className={classes.paper}>
             xs=12 sm=6
           </Paper>
         </Layout>
-        <Layout type="item" xs={12} sm={6}>
+        <Layout item xs={12} sm={6}>
           <Paper className={classes.paper}>
             xs=12 sm=6
           </Paper>
         </Layout>
-        <Layout type="item" xs={6} sm={3}>
+        <Layout item xs={6} sm={3}>
           <Paper className={classes.paper}>
             xs=6 sm=3
           </Paper>
         </Layout>
-        <Layout type="item" xs={6} sm={3}>
+        <Layout item xs={6} sm={3}>
           <Paper className={classes.paper}>
             xs=6 sm=3
           </Paper>
         </Layout>
-        <Layout type="item" xs={6} sm={3}>
+        <Layout item xs={6} sm={3}>
           <Paper className={classes.paper}>
             xs=6 sm=3
           </Paper>
         </Layout>
-        <Layout type="item" xs={6} sm={3}>
+        <Layout item xs={6} sm={3}>
           <Paper className={classes.paper}>
             xs=6 sm=3
           </Paper>

diff --git a/docs/site/src/pages/layout/responsive-ui/GuttersLayout.js b/docs/site/src/pages/layout/responsive-ui/GuttersLayout.js
@@ -50,25 +50,25 @@ export default class GuttersLayout extends Component {
     } = this.state;
 
     return (
-      <Layout type="container" className={classes.root}>
-        <Layout type="item" xs={12}>
+      <Layout container className={classes.root}>
+        <Layout item xs={12}>
           <Layout
-            type="container"
+            container
             className={classes.demo}
             xsJustify="center"
             xsGutter={xsGutter === 'false' ? false : Number(xsGutter)}
           >
             {CELLS.map((cell, i) => (
-              <Layout key={i} type="item">
+              <Layout key={i} item>
                 <Paper className={classes.paper} />
               </Layout>
             ))}
           </Layout>
         </Layout>
-        <Layout type="item" xs={12}>
+        <Layout item xs={12}>
           <Paper className={classes.control}>
-            <Layout type="container">
-              <Layout type="item">
+            <Layout container>
+              <Layout item>
                 <FormLabel>xsGutter</FormLabel>
                 <RadioGroup
                   aria-label="xsGutter"

diff --git a/docs/site/src/pages/layout/responsive-ui/InteractiveLayout.js b/docs/site/src/pages/layout/responsive-ui/InteractiveLayout.js
@@ -58,39 +58,41 @@ export default class InteractiveLayout extends Component {
     } = this.state;
 
     return (
-      <Layout type="container" className={classes.root}>
-        <Layout type="item" xs={12}>
+      <Layout container className={classes.root}>
+        <Layout item xs={12}>
           <Layout
-            type="container"
+            container
             className={classes.demo}
             xsAlign={xsAlign}
             xsDirection={xsDirection}
             xsJustify={xsJustify}
           >
             {CELLS.map((cell, i) => (
-              <Layout key={i} type="item">
+              <Layout key={i} item>
                 <Paper className={classes.paper}>
                   {`Cell ${i + 1}`}
                 </Paper>
               </Layout>
             ))}
           </Layout>
         </Layout>
-        <Layout type="item" xs={12}>
+        <Layout item xs={12}>
           <Paper className={classes.control}>
-            <Layout type="container">
-              <Layout type="item" xs={6} sm={4}>
+            <Layout container>
+              <Layout item xs={6} sm={4}>
                 <FormLabel>xsDirection</FormLabel>
                 <RadioGroup
                   aria-label="xsDirection"
                   selectedValue={xsDirection}
                   onChange={this.handleChange('xsDirection')}
                 >
                   <LabelRadio label="row" value="row" />
+                  <LabelRadio label="row-reverse" value="row-reverse" />
                   <LabelRadio label="column" value="column" />
+                  <LabelRadio label="column-reverse" value="column-reverse" />
                 </RadioGroup>
               </Layout>
-              <Layout type="item" xs={6} sm={4}>
+              <Layout item xs={6} sm={4}>
                 <FormLabel>xsJustify</FormLabel>
                 <RadioGroup
                   aria-label="xsJustify"
@@ -104,7 +106,7 @@ export default class InteractiveLayout extends Component {
                   <LabelRadio label="space-around" value="space-around" />
                 </RadioGroup>
               </Layout>
-              <Layout type="item" xs={6} sm={4}>
+              <Layout item xs={6} sm={4}>
                 <FormLabel>xsAlign</FormLabel>
                 <RadioGroup
                   aria-label="xsAlign"

diff --git a/src/Layout/Layout.js b/src/Layout/Layout.js
@@ -79,6 +79,12 @@ export const styleSheet = createStyleSheet('Layout', (theme) => {
     'direction-xs-column': {
       flexDirection: 'column',
     },
+    'direction-xs-column-reverse': {
+      flexDirection: 'column-reverse',
+    },
+    'direction-xs-row-reverse': {
+      flexDirection: 'row-reverse',
+    },
     'wrap-xs-nowrap': {
       flexWrap: 'nowrap',
     },
@@ -118,7 +124,8 @@ function Layout(props, context) {
     children,
     className,
     component: ComponentProp,
-    type,
+    container,
+    item,
     xsAlign,
     xsDirection,
     xs,
@@ -137,9 +144,9 @@ function Layout(props, context) {
   return (
     <ComponentProp
       className={classNames({
-        [classes.typeContainer]: type === 'container',
-        [classes.typeItem]: type === 'item',
-        [classes[`gutter-xs-${xsGutter}`]]: type === 'container' && xsGutter !== false,
+        [classes.typeContainer]: container,
+        [classes.typeItem]: item,
+        [classes[`gutter-xs-${xsGutter}`]]: container && xsGutter !== false,
         [classes[`direction-xs-${xsDirection}`]]: xsDirection !== Layout.defaultProps.xsDirection,
         [classes[`wrap-xs-${xsWrap}`]]: xsWrap !== Layout.defaultProps.xsWrap,
         [classes[`align-xs-${xsAlign}`]]: xsAlign !== Layout.defaultProps.xsAlign,
@@ -184,10 +191,15 @@ Layout.propTypes = {
     PropTypes.func,
   ]),
   /**
-   * Defines the type of the component.
-   * You should be wrapping a type `item` by a type `container`.
+   * It true, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   */
+  container: PropTypes.bool,
+  /**
+   * It true, the component will have the flex *item* behavior.
+   * You should be wrapping *items* with a *container*.
    */
-  type: PropTypes.oneOf(['container', 'item']),
+  item: PropTypes.bool,
   /**
    * Defines the number of grids the component is going to use.
    * It's applied for all the screen sizes with the lowest priority.
@@ -217,12 +229,22 @@ Layout.propTypes = {
    * Defines the `align-items` style property.
    * It's applied for all the screen sizes.
    */
-  xsAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch']),
+  xsAlign: PropTypes.oneOf([
+    'flex-start',
+    'center',
+    'flex-end',
+    'stretch',
+  ]),
   /**
    * Defines the `flex-direction` style property.
    * It's applied for all the screen sizes.
    */
-  xsDirection: PropTypes.oneOf(['column', 'row']),
+  xsDirection: PropTypes.oneOf([
+    'row',
+    'row-reverse',
+    'column',
+    'column-reverse',
+  ]),
   /**
    * Defines the space between the type `item` component.
    * It can only be used on a type `container` component.
@@ -235,17 +257,28 @@ Layout.propTypes = {
    * Defines the `justify-content` style property.
    * It's applied for all the screen sizes.
    */
-  xsJustify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
+  xsJustify: PropTypes.oneOf([
+    'flex-start',
+    'center',
+    'flex-end',
+    'space-between',
+    'space-around',
+  ]),
   /**
    * Defines the `flex-wrap` style property.
    * It's applied for all the screen sizes.
    */
-  xsWrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
+  xsWrap: PropTypes.oneOf([
+    'nowrap',
+    'wrap',
+    'wrap-reverse',
+  ]),
 };
 
 Layout.defaultProps = {
   component: 'div',
-  type: 'item',
+  container: false,
+  item: false,
   xsAlign: 'flex-start',
   xsDirection: 'row',
   xsGutter: 16,

diff --git a/src/Layout/Layout.spec.js b/src/Layout/Layout.spec.js
@@ -21,14 +21,16 @@ describe('<Layout />', () => {
     assert.strictEqual(wrapper.hasClass('woof'), true, 'should have the user class');
   });
 
-  describe('prop: type', () => {
-    it('should apply the right container class', () => {
-      const wrapper = shallow(<Layout type="container" />);
+  describe('prop: container', () => {
+    it('should apply the container class', () => {
+      const wrapper = shallow(<Layout container />);
       assert.strictEqual(wrapper.hasClass(classes.typeContainer), true);
     });
+  });
 
-    it('should apply the right item class', () => {
-      const wrapper = shallow(<Layout type="item" />);
+  describe('prop: item', () => {
+    it('should apply the item class', () => {
+      const wrapper = shallow(<Layout item />);
       assert.strictEqual(wrapper.hasClass(classes.typeItem), true);
     });
   });
@@ -49,7 +51,7 @@ describe('<Layout />', () => {
 
   describe('prop: xsGutter', () => {
     it('should have a default gutter', () => {
-      const wrapper = shallow(<Layout type="container" />);
+      const wrapper = shallow(<Layout container />);
       assert.strictEqual(wrapper.hasClass(classes['gutter-xs-16']), true);
     });
   });

diff --git a/...essions/screenshots/baseline/Layout/StressLayout/chrome-53.0.2785.143-linux.png b/...essions/screenshots/baseline/Layout/StressLayout/chrome-53.0.2785.143-linux.png