[Masonry] Add new component

docs/pages/api-docs/masonry-item.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './masonry-item.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/masonry-item',
+    false,
+    /masonry-item.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/masonry-item.json

@@ -0,0 +1,19 @@
+{
+  "props": {
+    "children": { "type": { "name": "element" }, "required": true },
+    "classes": { "type": { "name": "object" } },
+    "columnSpan": { "type": { "name": "number" }, "default": "1" },
+    "component": { "type": { "name": "elementType" } },
+    "defaultHeight": { "type": { "name": "number" } },
+    "sx": { "type": { "name": "object" } }
+  },
+  "name": "MasonryItem",
+  "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiMasonryItem" },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui-lab/src/MasonryItem/MasonryItem.js",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/masonry/\">Masonry</a></li></ul>",
+  "styledComponent": true,
+  "cssComponent": false
+}

docs/pages/api-docs/masonry.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './masonry.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context('docs/translations/api-docs/masonry', false, /masonry.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/masonry.json

@@ -0,0 +1,31 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" }, "required": true },
+    "classes": { "type": { "name": "object" } },
+    "columns": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
+      },
+      "default": "4"
+    },
+    "component": { "type": { "name": "elementType" } },
+    "spacing": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
+      },
+      "default": "1"
+    },
+    "sx": { "type": { "name": "object" } }
+  },
+  "name": "Masonry",
+  "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiMasonry" },
+  "spread": true,
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/material-ui-lab/src/Masonry/Masonry.js",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/masonry/\">Masonry</a></li></ul>",
+  "styledComponent": true,
+  "cssComponent": false
+}

docs/pages/components/masonry.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/src/pages/components/masonry/masonry.md?@material-ui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}

docs/src/pages.ts

@@ -187,6 +187,7 @@ const pages: readonly MuiPage[] = [
               { pathname: '/components/time-picker' },
             ],
           },
+          { pathname: '/components/masonry' },
           { pathname: '/components/timeline' },
           { pathname: '/components/trap-focus' },
           { pathname: '/components/tree-view' },

docs/src/pages/components/masonry/BasicMasonry.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Masonry from '@material-ui/lab/Masonry';
+import MasonryItem from '@material-ui/lab/MasonryItem';
+
+const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
+
+export default function BasicMasonry() {
+  return (
+    <Box sx={{ width: 500, minHeight: 393 }}>
+      <Masonry columns={4} spacing={1}>
+        {heights.map((height, index) => (
+          <MasonryItem key={index}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                height,
+                border: 1,
+                bgcolor: 'background.paper',
+              }}
+            >
+              {index + 1}
+            </Box>
+          </MasonryItem>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}

docs/src/pages/components/masonry/BasicMasonry.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Masonry from '@material-ui/lab/Masonry';
+import MasonryItem from '@material-ui/lab/MasonryItem';
+
+const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80];
+
+export default function BasicMasonry() {
+  return (
+    <Box sx={{ width: 500, minHeight: 393 }}>
+      <Masonry columns={4} spacing={1}>
+        {heights.map((height, index) => (
+          <MasonryItem key={index}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                height,
+                border: 1,
+                bgcolor: 'background.paper',
+              }}
+            >
+              {index + 1}
+            </Box>
+          </MasonryItem>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}

docs/src/pages/components/masonry/DiffColSizeMasonry.js

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Masonry from '@material-ui/lab/Masonry';
+import MasonryItem from '@material-ui/lab/MasonryItem';
+
+export default function DiffColSizeMasonry() {
+  return (
+    <Box sx={{ width: 500, minHeight: 500 }}>
+      <Masonry columns={4} spacing={1}>
+        {itemData.map((item, index) => (
+          <MasonryItem key={index} columnSpan={item.span}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                height: item.height,
+                border: 1,
+                bgcolor: 'background.paper',
+              }}
+            >
+              {index + 1}
+            </Box>
+          </MasonryItem>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}
+
+const itemData = [
+  { height: 150 },
+  { height: 30 },
+  { height: 90, span: 2 },
+  { height: 110 },
+  { height: 150 },
+  { height: 150 },
+  { height: 130, span: 2 },
+  { height: 80, span: 2 },
+  { height: 50 },
+  { height: 90 },
+  { height: 100, span: 2 },
+  { height: 150 },
+  { height: 50 },
+  { height: 50, span: 2 },
+  { height: 50 },
+];

docs/src/pages/components/masonry/DiffColSizeMasonry.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Masonry from '@material-ui/lab/Masonry';
+import MasonryItem from '@material-ui/lab/MasonryItem';
+
+export default function DiffColSizeMasonry() {
+  return (
+    <Box sx={{ width: 500, minHeight: 500 }}>
+      <Masonry columns={4} spacing={1}>
+        {itemData.map((item, index) => (
+          <MasonryItem key={index} columnSpan={item.span}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                height: item.height,
+                border: 1,
+                bgcolor: 'background.paper',
+              }}
+            >
+              {index + 1}
+            </Box>
+          </MasonryItem>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}
+
+const itemData = [
+  { height: 150 },
+  { height: 30 },
+  { height: 90, span: 2 },
+  { height: 110 },
+  { height: 150 },
+  { height: 150 },
+  { height: 130, span: 2 },
+  { height: 80, span: 2 },
+  { height: 50 },
+  { height: 90 },
+  { height: 100, span: 2 },
+  { height: 150 },
+  { height: 50 },
+  { height: 50, span: 2 },
+  { height: 50 },
+];

docs/src/pages/components/masonry/DiffColSizeMasonryBroken.js

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Masonry from '@material-ui/lab/Masonry';
+import MasonryItem from '@material-ui/lab/MasonryItem';
+
+export default function DiffColSizeMasonryBroken() {
+  return (
+    <Box sx={{ width: 500, minHeight: 503 }}>
+      <Masonry columns={4} spacing={1}>
+        {itemData.map((item, index) => (
+          <MasonryItem key={index} columnSpan={item.span}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                height: item.height,
+                border: 1,
+                bgcolor: 'background.paper',
+              }}
+            >
+              {index + 1}
+            </Box>
+          </MasonryItem>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}
+
+const itemData = [
+  { height: 150 },
+  { height: 30 },
+  { height: 90, span: 2 },
+  { height: 70 },
+  { height: 150 },
+  { height: 120 },
+  { height: 100, span: 2 },
+  { height: 80, span: 2 },
+  { height: 35 },
+  { height: 70 },
+  { height: 100, span: 2 },
+  { height: 157 },
+  { height: 50 },
+  { height: 50, span: 2 },
+  { height: 50 },
+];

docs/src/pages/components/masonry/DiffColSizeMasonryBroken.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Masonry from '@material-ui/lab/Masonry';
+import MasonryItem from '@material-ui/lab/MasonryItem';
+
+export default function DiffColSizeMasonryBroken() {
+  return (
+    <Box sx={{ width: 500, minHeight: 503 }}>
+      <Masonry columns={4} spacing={1}>
+        {itemData.map((item, index) => (
+          <MasonryItem key={index} columnSpan={item.span}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                height: item.height,
+                border: 1,
+                bgcolor: 'background.paper',
+              }}
+            >
+              {index + 1}
+            </Box>
+          </MasonryItem>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}
+
+const itemData = [
+  { height: 150 },
+  { height: 30 },
+  { height: 90, span: 2 },
+  { height: 70 },
+  { height: 150 },
+  { height: 120 },
+  { height: 100, span: 2 },
+  { height: 80, span: 2 },
+  { height: 35 },
+  { height: 70 },
+  { height: 100, span: 2 },
+  { height: 157 },
+  { height: 50 },
+  { height: 50, span: 2 },
+  { height: 50 },
+];

docs/src/pages/components/masonry/FixedColumns.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Masonry from '@material-ui/lab/Masonry';
+import MasonryItem from '@material-ui/lab/MasonryItem';
+
+const heights = [150, 30, 90, 70, 90, 100, 150, 30, 50, 80];
+
+export default function FixedColumns() {
+  return (
+    <Box sx={{ width: 500, minHeight: 253 }}>
+      <Masonry columns={4} spacing={1}>
+        {heights.map((height, index) => (
+          <MasonryItem key={index}>
+            <Box
+              sx={{
+                textAlign: 'center',
+                height,
+                border: 1,
+                bgcolor: 'background.paper',
+              }}
+            >
+              {index + 1}
+            </Box>
+          </MasonryItem>
+        ))}
+      </Masonry>
+    </Box>
+  );
+}