Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(theme): add mui v4 and v5 grid examples #187

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(theme): add mui v4 and v5 grid examples #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c566f6
fix(theme): add mui v4 and v5 grid examples
christoph-jerolimov Dec 14, 2024
1728bf7
fix(theme): add workaround to load mui v5 theme correctly when packag…
christoph-jerolimov Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion workspaces/theme/plugins/bc-test/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
"dependencies": {
"@backstage/core-components": "^0.15.1",
"@backstage/core-plugin-api": "^1.10.0",
"@backstage/plugin-user-settings": "^0.8.16"
"@backstage/plugin-user-settings": "^0.8.16",
"@mui/material": "^5"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
Expand Down
8 changes: 8 additions & 0 deletions workspaces/theme/plugins/bc-test/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

ClassNameGenerator.configure(componentName => {
return componentName.startsWith('v5-')
? componentName
: `v5-${componentName}`;
});

export * from './plugin';
3 changes: 2 additions & 1 deletion workspaces/theme/plugins/mui4-test/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
"@backstage/plugin-user-settings": "^0.8.16",
"@material-ui/core": "^4.9.13",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.61"
"@material-ui/lab": "^4.0.0-alpha.61",
"@mui/material": "^5"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
Expand Down
4 changes: 2 additions & 2 deletions workspaces/theme/plugins/mui4-test/src/components/FormComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down Expand Up @@ -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} />}
Expand Down
201 changes: 201 additions & 0 deletions workspaces/theme/plugins/mui4-test/src/components/GridExamples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />}
</>
);
};
40 changes: 18 additions & 22 deletions workspaces/theme/plugins/mui4-test/src/components/MUI4TestPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
8 changes: 8 additions & 0 deletions workspaces/theme/plugins/mui4-test/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';

ClassNameGenerator.configure(componentName => {
return componentName.startsWith('v5-')
? componentName
: `v5-${componentName}`;
});

export * from './plugin';
2 changes: 1 addition & 1 deletion workspaces/theme/plugins/mui5-test/src/components/FormComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />}
Expand Down
Loading
Loading