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) => ;
+
+const GridItem = (props: GridProps) => (
+
+);
+
+export const CommonGridExamples = () => {
+ const cards = Array.from({ length: 8 }, (_, i) => i + 1);
+ return (
+ <>
+
+ Default: Grid container without spacing, an unstyled Grid item and an
+ unstyled Card
+
+
+ {cards.map(cardContent => (
+
+ {cardContent}
+
+ ))}
+
+
+
+ Grid container with spacing=2, an unstyled Grid item and an unstyled
+ Card
+
+
+ {cards.map(cardContent => (
+
+ {cardContent}
+
+ ))}
+
+
+
+ Grid container with spacing=4, an unstyled Grid item and a Card with
+ padding=2
+
+
+ {cards.map(cardContent => (
+
+ {cardContent}
+
+ ))}
+
+
+ );
+};
+
+const DebugGridExamples = () => {
+ const backgroundColors = [
+ '#600',
+ '#060',
+ '#800',
+ '#080',
+ '#a00',
+ '#0a0',
+ '#d00',
+ '#0d0',
+ ];
+ return (
+ <>
+
+ Grid container without spacing, an unstyled Grid item and colorized Card
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+
+ {index + 1}
+
+
+ ))}
+
+
+
+ Grid container with colorized Grid item to show all-sided padding, Card
+ position is fine
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+ {index + 1}
+
+ ))}
+
+
+
+ Grid container with spacing=4, an unstyled Grid item and a colorized
+ Card with padding=16
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+
+ {index + 1}
+
+
+ ))}
+
+
+
+ Grid container with spacing=4, an colorized Grid item to show all-sided
+ padding, Card position is fine
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+ {index + 1}
+
+ ))}
+
+
+
+ Grid container without spacing and Grid item with padding=32 result in
+ aligned Cards! (Not in MUI v5!)
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+ {index + 1}
+
+ ))}
+
+
+
+ Grid container with spacing=4 and Grid item with padding=32 result also
+ in aligned Cards! (Not in MUI v5!)
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+ {index + 1}
+
+ ))}
+
+
+ );
+};
+
+export const GridExamples = () => {
+ const [showDebugExamples, setShowDebugExamples] = React.useState(false);
+ return (
+ <>
+
+
+ setShowDebugExamples(checked)}
+ />
+ }
+ label="Show debug examples"
+ />
+
+ {showDebugExamples && }
+
+ );
+};
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 (
-
+
- }
- />
- }
- />
- }
- />
- }
- />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
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) => ;
+
+const GridItem = (props: GridProps) => (
+
+);
+
+export const CommonGridExamples = () => {
+ const cards = Array.from({ length: 8 }, (_, i) => i + 1);
+ return (
+ <>
+
+ Default: Grid container without spacing, an unstyled Grid item and an
+ unstyled Card
+
+
+ {cards.map(cardContent => (
+
+ {cardContent}
+
+ ))}
+
+
+
+ Grid container with spacing=2, an unstyled Grid item and an unstyled
+ Card
+
+
+ {cards.map(cardContent => (
+
+ {cardContent}
+
+ ))}
+
+
+
+ Grid container with spacing=4, an unstyled Grid item and a Card with
+ padding=2
+
+
+ {cards.map(cardContent => (
+
+ {cardContent}
+
+ ))}
+
+
+ );
+};
+
+const DebugGridExamples = () => {
+ const backgroundColors = [
+ '#600',
+ '#060',
+ '#800',
+ '#080',
+ '#a00',
+ '#0a0',
+ '#d00',
+ '#0d0',
+ ];
+ return (
+ <>
+
+ Grid container without spacing, an unstyled Grid item and colorized Card
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+ {index + 1}
+
+ ))}
+
+
+
+ Grid container with colorized Grid item to show one-sided padding, Card
+ position is fine
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+ {index + 1}
+
+ ))}
+
+
+
+ Grid container with spacing=4, an unstyled Grid item and a colorized
+ Card with p=2
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+
+ {index + 1}
+
+
+ ))}
+
+
+
+ Grid container with spacing=4, an colorized Grid item to show one-sided
+ padding, Card position is fine
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+ {index + 1}
+
+ ))}
+
+
+
+ Grid container without spacing and Grid item with p=4 result in
+ unaligned Cards! (Too much padding on the right side!)
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+ {index + 1}
+
+ ))}
+
+
+
+ Grid container with spacing=4 and Grid item with p=4 result also in
+ unaligned Cards! (Too much padding on the right side!)
+
+
+ {backgroundColors.map((backgroundColor, index) => (
+
+ {index + 1}
+
+ ))}
+
+
+ );
+};
+
+export const GridExamples = () => {
+ const [showDebugExamples, setShowDebugExamples] = React.useState(false);
+ return (
+ <>
+
+
+ setShowDebugExamples(checked)}
+ />
+ }
+ label="Show debug examples"
+ />
+
+ {showDebugExamples && }
+
+ );
+};
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 = () => {
- }
- />
- }
- />
- }
- />
- }
- />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);