[Layout] Warn about wrong usage of the item & container combination

src/Layout/Layout.js

@@ -296,4 +296,40 @@ Layout.contextTypes = {
   styleManager: customPropTypes.muiRequired,
 };
 
-export default Layout;
+/**
+ * Add a wrapper component to generate some helper messages in the development
+ * environment.
+ */
+let LayoutWrapper = Layout; // eslint-disable-line import/no-mutable-exports
+
+if (process.env.NODE_ENV !== 'production') {
+  const requireProp = (requiredProp) =>
+    (props, propName, componentName, location, propFullName) => {
+      const propFullNameSafe = propFullName || propName;
+
+      if (typeof props[propName] !== 'undefined' && !props[requiredProp]) {
+        return new Error(
+          `The property \`${propFullNameSafe}\` of ` +
+          `\`Layout\` must be used on \`${requiredProp}\`.`,
+        );
+      }
+
+      return null;
+    };
+
+  LayoutWrapper = (props) => <Layout {...props} />;
+
+  LayoutWrapper.propTypes = {
+    align: requireProp('container'),
+    direction: requireProp('container'),
+    gutter: requireProp('container'),
+    justify: requireProp('container'),
+    lg: requireProp('item'),
+    md: requireProp('item'),
+    sm: requireProp('item'),
+    wrap: requireProp('container'),
+    xs: requireProp('item'),
+  };
+}
+
+export default LayoutWrapper;

src/Layout/Layout.spec.js

@@ -11,8 +11,14 @@ describe('<Layout />', () => {
   let classes;
 
   before(() => {
-    shallow = createShallowWithContext();
-    classes = shallow.context.styleManager.render(styleSheet);
+    const shallowInner = createShallowWithContext();
+    // Render deeper to bypass the LayoutWrapper.
+    shallow = (node) => {
+      return shallowInner(node).find('Layout').shallow({
+        context: shallowInner.context,
+      });
+    };
+    classes = shallowInner.context.styleManager.render(styleSheet);
   });
 
   it('should render', () => {
@@ -44,12 +50,12 @@ describe('<Layout />', () => {
 
   describe('prop: xs', () => {
     it('should apply the flex-grow class', () => {
-      const wrapper = shallow(<Layout xs />);
+      const wrapper = shallow(<Layout item xs />);
       assert.strictEqual(wrapper.hasClass(classes['grid-xs']), true);
     });
 
     it('should apply the flex size class', () => {
-      const wrapper = shallow(<Layout xs={3} />);
+      const wrapper = shallow(<Layout item xs={3} />);
       assert.strictEqual(wrapper.hasClass(classes['grid-xs-3']), true);
     });
   });