From e5d1a5a997ec69d5a35503f981cc9ab3022b7252 Mon Sep 17 00:00:00 2001
From: Christoph Jerolimov <jerolimov+git@redhat.com>
Date: Sat, 14 Dec 2024 20:57:58 +0100
Subject: [PATCH] fix(theme): add mui v4 and v5 grid examples

Signed-off-by: Christoph Jerolimov <jerolimov+git@redhat.com>
---
 .../src/components/FormComponents.tsx         |   4 +-
 .../mui4-test/src/components/GridExamples.tsx | 201 ++++++++++++++++++
 .../mui4-test/src/components/MUI4TestPage.tsx |  40 ++--
 .../src/components/FormComponents.tsx         |   2 +-
 .../mui5-test/src/components/GridExamples.tsx | 199 +++++++++++++++++
 .../mui5-test/src/components/MUI5TestPage.tsx |  38 ++--
 6 files changed, 438 insertions(+), 46 deletions(-)
 create mode 100644 workspaces/theme/plugins/mui4-test/src/components/GridExamples.tsx
 create mode 100644 workspaces/theme/plugins/mui5-test/src/components/GridExamples.tsx

diff --git a/workspaces/theme/plugins/mui4-test/src/components/FormComponents.tsx b/workspaces/theme/plugins/mui4-test/src/components/FormComponents.tsx
index 1591ca0f9..057c19756 100644
--- a/workspaces/theme/plugins/mui4-test/src/components/FormComponents.tsx
+++ b/workspaces/theme/plugins/mui4-test/src/components/FormComponents.tsx
@@ -37,7 +37,7 @@ const Buttons = () => {
       </tr>
       {colors.map(color => (
         <tr key={color}>
-          <td>{color ?? 'undefined'}</td>
+          <td>{color ?? 'no color'}</td>
           {variants.map(variant => (
             <td key={variant}>
               <Button color={color} variant={variant}>
@@ -74,7 +74,7 @@ const Checkboxes = () => {
       </tr>
       {colors.map(color => (
         <tr key={color}>
-          <td>{color ?? 'undefined'}</td>
+          <td>{color ?? 'no color'}</td>
           <td>
             <FormControlLabel
               control={<Checkbox defaultChecked color={color} />}
diff --git a/workspaces/theme/plugins/mui4-test/src/components/GridExamples.tsx b/workspaces/theme/plugins/mui4-test/src/components/GridExamples.tsx
new file mode 100644
index 000000000..744f10088
--- /dev/null
+++ b/workspaces/theme/plugins/mui4-test/src/components/GridExamples.tsx
@@ -0,0 +1,201 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Card from '@material-ui/core/Card';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Grid, { GridProps } from '@material-ui/core/Grid';
+
+const GridContainer = (props: GridProps) => <Grid container {...props} />;
+
+const GridItem = (props: GridProps) => (
+  <Grid
+    item
+    xs={12} // show 1 item  per row on extra small screens
+    sm={6} // show 2 items per row on small screens
+    md={4} // show 3 items per row on medium screens
+    lg={3} // show 4 items per row on large screens
+    xl={2} // show 6 items per row on extra large screens
+    {...props}
+  />
+);
+
+export const CommonGridExamples = () => {
+  const cards = Array.from({ length: 8 }, (_, i) => i + 1);
+  return (
+    <>
+      <h1>
+        Default: Grid container without spacing, an unstyled Grid item and an
+        unstyled Card
+      </h1>
+      <GridContainer>
+        {cards.map(cardContent => (
+          <GridItem key={cardContent}>
+            <Card>{cardContent}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=2, an unstyled Grid item and an unstyled
+        Card
+      </h1>
+      <GridContainer spacing={2}>
+        {cards.map(cardContent => (
+          <GridItem key={cardContent}>
+            <Card>{cardContent}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=4, an unstyled Grid item and a Card with
+        padding=2
+      </h1>
+      <GridContainer spacing={4}>
+        {cards.map(cardContent => (
+          <GridItem key={cardContent}>
+            <Card style={{ padding: 16 }}>{cardContent}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+    </>
+  );
+};
+
+const DebugGridExamples = () => {
+  const backgroundColors = [
+    '#600',
+    '#060',
+    '#800',
+    '#080',
+    '#a00',
+    '#0a0',
+    '#d00',
+    '#0d0',
+  ];
+  return (
+    <>
+      <h1>
+        Grid container without spacing, an unstyled Grid item and colorized Card
+      </h1>
+      <GridContainer>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem key={backgroundColor}>
+            <Card style={{ color: '#ffffff', backgroundColor }}>
+              {index + 1}
+            </Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with colorized Grid item to show all-sided padding, Card
+        position is fine
+      </h1>
+      <GridContainer>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem
+            key={backgroundColor}
+            style={{ color: '#ffffff', backgroundColor }}
+          >
+            <Card>{index + 1}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=4, an unstyled Grid item and a colorized
+        Card with padding=16
+      </h1>
+      <GridContainer spacing={4}>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem key={backgroundColor}>
+            <Card style={{ color: '#ffffff', backgroundColor, padding: 16 }}>
+              {index + 1}
+            </Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=4, an colorized Grid item to show all-sided
+        padding, Card position is fine
+      </h1>
+      <GridContainer spacing={4}>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem
+            key={backgroundColor}
+            style={{ color: '#ffffff', backgroundColor }}
+          >
+            <Card style={{ padding: 16 }}>{index + 1}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container without spacing and Grid item with padding=32 result in
+        aligned Cards! (Not in MUI v5!)
+      </h1>
+      <GridContainer>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem
+            key={backgroundColor}
+            style={{ color: '#ffffff', backgroundColor, padding: 32 }}
+          >
+            <Card>{index + 1}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=4 and Grid item with padding=32 result also
+        in aligned Cards! (Not in MUI v5!)
+      </h1>
+      <GridContainer spacing={4}>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem
+            key={backgroundColor}
+            style={{ color: '#ffffff', backgroundColor, padding: 32 }}
+          >
+            <Card>{index + 1}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+    </>
+  );
+};
+
+export const GridExamples = () => {
+  const [showDebugExamples, setShowDebugExamples] = React.useState(false);
+  return (
+    <>
+      <CommonGridExamples />
+      <Box sx={{ pt: 4, pb: 4 }}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              onChange={(_, checked) => setShowDebugExamples(checked)}
+            />
+          }
+          label="Show debug examples"
+        />
+      </Box>
+      {showDebugExamples && <DebugGridExamples />}
+    </>
+  );
+};
diff --git a/workspaces/theme/plugins/mui4-test/src/components/MUI4TestPage.tsx b/workspaces/theme/plugins/mui4-test/src/components/MUI4TestPage.tsx
index 584b415b6..7ac5d5448 100644
--- a/workspaces/theme/plugins/mui4-test/src/components/MUI4TestPage.tsx
+++ b/workspaces/theme/plugins/mui4-test/src/components/MUI4TestPage.tsx
@@ -19,36 +19,32 @@ import { UserSettingsThemeToggle } from '@backstage/plugin-user-settings';
 
 import { FormComponents } from './FormComponents';
 import { PaperExamples } from './PaperExamples';
-import { InlineStyles } from './InlineStyles';
 import { TabExamples } from './TabExamples';
+import { GridExamples } from './GridExamples';
+import { InlineStyles } from './InlineStyles';
 
 export const MUI4TestPage = () => {
   return (
     <Page themeId="tool">
-      <Header title="MUI v4 / Material UI Test Page">
+      <Header title="MUI v4 Test Page">
         <UserSettingsThemeToggle />
       </Header>
       <TabbedLayout>
-        <TabbedLayout.Route
-          path="/"
-          title="Form components"
-          children={<FormComponents />}
-        />
-        <TabbedLayout.Route
-          path="/paper-examples"
-          title="Paper examples"
-          children={<PaperExamples />}
-        />
-        <TabbedLayout.Route
-          path="/inline-styles"
-          title="Inline styles"
-          children={<InlineStyles />}
-        />
-        <TabbedLayout.Route
-          path="/tabs"
-          title="Tabs"
-          children={<TabExamples />}
-        />
+        <TabbedLayout.Route path="/" title="Form components">
+          <FormComponents />
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/papers" title="Papers">
+          <PaperExamples />
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/tabs" title="Tabs">
+          <TabExamples />
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/grids" title="Grids">
+          <GridExamples />
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/inline-styles" title="Inline styles">
+          <InlineStyles />
+        </TabbedLayout.Route>
       </TabbedLayout>
     </Page>
   );
diff --git a/workspaces/theme/plugins/mui5-test/src/components/FormComponents.tsx b/workspaces/theme/plugins/mui5-test/src/components/FormComponents.tsx
index 02f025c5e..18a3c8c0c 100644
--- a/workspaces/theme/plugins/mui5-test/src/components/FormComponents.tsx
+++ b/workspaces/theme/plugins/mui5-test/src/components/FormComponents.tsx
@@ -87,7 +87,7 @@ const Checkboxes = () => {
       </tr>
       {colors.map(color => (
         <tr key={color}>
-          <td>{color ?? 'undefined'}</td>
+          <td>{color ?? 'no color'}</td>
           <td>
             <FormControlLabel
               control={<Checkbox defaultChecked color={color} />}
diff --git a/workspaces/theme/plugins/mui5-test/src/components/GridExamples.tsx b/workspaces/theme/plugins/mui5-test/src/components/GridExamples.tsx
new file mode 100644
index 000000000..9d581a09a
--- /dev/null
+++ b/workspaces/theme/plugins/mui5-test/src/components/GridExamples.tsx
@@ -0,0 +1,199 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Grid, { GridProps } from '@mui/material/Grid';
+
+const GridContainer = (props: GridProps) => <Grid container {...props} />;
+
+const GridItem = (props: GridProps) => (
+  <Grid
+    item
+    xs={12} // show 1 item  per row on extra small screens
+    sm={6} // show 2 items per row on small screens
+    md={4} // show 3 items per row on medium screens
+    lg={3} // show 4 items per row on large screens
+    xl={2} // show 6 items per row on extra large screens
+    {...props}
+  />
+);
+
+export const CommonGridExamples = () => {
+  const cards = Array.from({ length: 8 }, (_, i) => i + 1);
+  return (
+    <>
+      <h1>
+        Default: Grid container without spacing, an unstyled Grid item and an
+        unstyled Card
+      </h1>
+      <GridContainer>
+        {cards.map(cardContent => (
+          <GridItem key={cardContent}>
+            <Card>{cardContent}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=2, an unstyled Grid item and an unstyled
+        Card
+      </h1>
+      <GridContainer spacing={2}>
+        {cards.map(cardContent => (
+          <GridItem key={cardContent}>
+            <Card>{cardContent}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=4, an unstyled Grid item and a Card with
+        padding=2
+      </h1>
+      <GridContainer spacing={4}>
+        {cards.map(cardContent => (
+          <GridItem key={cardContent}>
+            <Card sx={{ p: 2 }}>{cardContent}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+    </>
+  );
+};
+
+const DebugGridExamples = () => {
+  const backgroundColors = [
+    '#600',
+    '#060',
+    '#800',
+    '#080',
+    '#a00',
+    '#0a0',
+    '#d00',
+    '#0d0',
+  ];
+  return (
+    <>
+      <h1>
+        Grid container without spacing, an unstyled Grid item and colorized Card
+      </h1>
+      <GridContainer>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem key={backgroundColor}>
+            <Card sx={{ color: '#ffffff', backgroundColor }}>{index + 1}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with colorized Grid item to show one-sided padding, Card
+        position is fine
+      </h1>
+      <GridContainer>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem
+            key={backgroundColor}
+            sx={{ color: '#ffffff', backgroundColor }}
+          >
+            <Card>{index + 1}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=4, an unstyled Grid item and a colorized
+        Card with p=2
+      </h1>
+      <GridContainer spacing={4}>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem key={backgroundColor}>
+            <Card sx={{ color: '#ffffff', backgroundColor, p: 2 }}>
+              {index + 1}
+            </Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=4, an colorized Grid item to show one-sided
+        padding, Card position is fine
+      </h1>
+      <GridContainer spacing={4}>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem
+            key={backgroundColor}
+            sx={{ color: '#ffffff', backgroundColor }}
+          >
+            <Card sx={{ p: 2 }}>{index + 1}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container without spacing and Grid item with p=4 result in
+        unaligned Cards! (Too much padding on the right side!)
+      </h1>
+      <GridContainer>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem
+            key={backgroundColor}
+            sx={{ color: '#ffffff', backgroundColor, p: 4 }}
+          >
+            <Card>{index + 1}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+
+      <h1>
+        Grid container with spacing=4 and Grid item with p=4 result also in
+        unaligned Cards! (Too much padding on the right side!)
+      </h1>
+      <GridContainer spacing={4}>
+        {backgroundColors.map((backgroundColor, index) => (
+          <GridItem
+            key={backgroundColor}
+            sx={{ color: '#ffffff', backgroundColor, p: 4 }}
+          >
+            <Card>{index + 1}</Card>
+          </GridItem>
+        ))}
+      </GridContainer>
+    </>
+  );
+};
+
+export const GridExamples = () => {
+  const [showDebugExamples, setShowDebugExamples] = React.useState(false);
+  return (
+    <>
+      <CommonGridExamples />
+      <Box sx={{ pt: 4, pb: 4 }}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              onChange={(_, checked) => setShowDebugExamples(checked)}
+            />
+          }
+          label="Show debug examples"
+        />
+      </Box>
+      {showDebugExamples && <DebugGridExamples />}
+    </>
+  );
+};
diff --git a/workspaces/theme/plugins/mui5-test/src/components/MUI5TestPage.tsx b/workspaces/theme/plugins/mui5-test/src/components/MUI5TestPage.tsx
index d3e63710f..b76497377 100644
--- a/workspaces/theme/plugins/mui5-test/src/components/MUI5TestPage.tsx
+++ b/workspaces/theme/plugins/mui5-test/src/components/MUI5TestPage.tsx
@@ -19,8 +19,9 @@ import { UserSettingsThemeToggle } from '@backstage/plugin-user-settings';
 
 import { FormComponents } from './FormComponents';
 import { PaperExamples } from './PaperExamples';
-import { InlineStyles } from './InlineStyles';
 import { TabExamples } from './TabExamples';
+import { GridExamples } from './GridExamples';
+import { InlineStyles } from './InlineStyles';
 
 export const MUI5TestPage = () => {
   return (
@@ -29,26 +30,21 @@ export const MUI5TestPage = () => {
         <UserSettingsThemeToggle />
       </Header>
       <TabbedLayout>
-        <TabbedLayout.Route
-          path="/form-components"
-          title="Form components"
-          children={<FormComponents />}
-        />
-        <TabbedLayout.Route
-          path="/paper-examples"
-          title="Paper examples"
-          children={<PaperExamples />}
-        />
-        <TabbedLayout.Route
-          path="/inline-styles"
-          title="Inline styles"
-          children={<InlineStyles />}
-        />
-        <TabbedLayout.Route
-          path="/tabs"
-          title="Tabs"
-          children={<TabExamples />}
-        />
+        <TabbedLayout.Route path="/form-components" title="Form components">
+          <FormComponents />
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/papers" title="Papers">
+          <PaperExamples />
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/tabs" title="Tabs">
+          <TabExamples />
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/grids" title="Grids">
+          <GridExamples />
+        </TabbedLayout.Route>
+        <TabbedLayout.Route path="/inline-styles" title="Inline styles">
+          <InlineStyles />
+        </TabbedLayout.Route>
       </TabbedLayout>
     </Page>
   );