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

Jump to bottom

[WIP] feat: Upgrade Material IU to v6 #6490

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
+9,829 −3,377
Open

[WIP] feat: Upgrade Material IU to v6 #6490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
370722c
feat: update material ui to 6
alicanerdurmaz Nov 13, 2024
f51abc6
Merge branch 'master' into RK-798-refine-mui-6-upgrade
alicanerdurmaz Nov 13, 2024
130faa5
fix(docs): typo
alicanerdurmaz Nov 13, 2024
a8bbc70
fix(inferencer): remove debug script
alicanerdurmaz Nov 13, 2024
1f65aa8
feat: update @mui/x-data-grid to 7
alicanerdurmaz Nov 15, 2024
599cf09
Merge branch 'master' into RK-798-refine-mui-6-upgrade
alicanerdurmaz Nov 15, 2024
8b3cf2f
test(inferencer): update snapshots
alicanerdurmaz Nov 15, 2024
ba002de
test(mui): fix type error
alicanerdurmaz Nov 15, 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
2 changes: 1 addition & 1 deletion documentation/blog/2022-07-21-admin-panel-with-materialui-and-strapi.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export const PostList: React.FC = () => {

return (
<List>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
<DataGrid {...dataGridProps} columns={columns} />
</List>
);
};
Expand Down
11 changes: 5 additions & 6 deletions documentation/blog/2022-08-23-mui-usedatagrid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,8 +214,7 @@ const EmployeeList: React.FC = () => {
headerName: "Full Name",
minWidth: 150,
flex: 1,
valueGetter: (params) =>
`${params.row.first_name || ""} ${params.row.last_name || ""}`,
valueGetter: (_, row) => `${first_name || ""} ${last_name || ""}`,
},
{
field: "email",
Expand Down Expand Up @@ -482,8 +481,8 @@ const EmployeeList: React.FC = () => {
headerName: "Full Name",
minWidth: 150,
flex: 1,
valueGetter: (params) =>
`${params.row.first_name || ""} ${params.row.last_name || ""}`,
valueGetter: (_, row) =>
`${row.first_name || ""} ${row.last_name || ""}`,
},
{
field: "email",
Expand Down Expand Up @@ -653,8 +652,8 @@ const EmployeeList: React.FC = () => {
headerName: "Full Name",
minWidth: 150,
flex: 1,
valueGetter: (params) =>
`${params.row.first_name || ""} ${params.row.last_name || ""}`,
valueGetter: (_, row) =>
`${row.first_name || ""} ${row.last_name || ""}`,
},
{
field: "email",
Expand Down
2 changes: 1 addition & 1 deletion documentation/blog/2022-12-23-dynamic-hook-form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ Finally, declare the `<DataGrid>` component within the `List` component and add

return (
<List>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
<DataGrid {...dataGridProps} columns={columns} />
</List>
);
```
Expand Down
103 changes: 72 additions & 31 deletions documentation/blog/2024-05-22-mui-grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ When using Material UI Grid:
To get started, import the `<Grid />` component into your project like this:

```tsx
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";
or;
import { Grid } from "@mui/material";
```
Expand All @@ -90,15 +90,15 @@ Typically, Material UI Grid provides two types of layouts; `containers` and `ite
The items need to be wrapped in a container:

```tsx
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";

return (
<>
{/* A flexbox container represented in an Material UI Grid container */}
<Grid container>
Container
{/* A Child grid container */}
<Grid item>
<Grid>
<div>A flex item</div> {/* A simple flex item */}
</Grid>
</Grid>
Expand All @@ -114,7 +114,7 @@ Consider the code below:

```tsx
import React, { useState } from "react";
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";
import FormControlLabel from "@mui/material/FormControlLabel";
import RadioGroup from "@mui/material/RadioGroup";
import Radio from "@mui/material/Radio";
Expand Down Expand Up @@ -150,7 +150,7 @@ const MUIspacing = () => {
<Grid container spacing={spacing}>
{/*Rethreeder 3 empty black boxes as items of this container*/}
{[0, 1, 2].map((value) => (
<Grid key={value} item>
<Grid key={value}>
<Camera style={styles.paper} />
</Grid>
))}
Expand Down Expand Up @@ -198,7 +198,7 @@ Here’s the result:

### Fluid Grids

Fluid Grids in Material UI use column widths and breakpoints to scale grid items and resize content within them. We can create layouts for different screen sizes using the breakpoint props (`xs`, `sm`, `md`, `lg`, and `xl`) on the grid items.
Fluid Grids in Material UI use column widths and breakpoints to scale grid items and resize content within them. We can create layouts for different screen sizes using the `size` prop on the grid items.

### Basic Fluid Grids

Expand All @@ -209,24 +209,40 @@ Here’s a simple illustration of how to use Basic Fluid Grids in Material UI.
```tsx
import React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";
import "../App.css";

const BasicGrid = () => {
return (
<Box sx={{ flexGrow: 1 }}>
{/* Setting up the Fluid Grid system */}
<Grid container spacing={2}>
<Grid item xs={6}>
<Grid
size={{
xs: 6,
}}
>
<div className="grid-elements">xs=6</div>
</Grid>
<Grid item xs={6}>
<Grid
size={{
xs: 6,
}}
>
<div className="grid-elements">xs=6</div>
</Grid>
<Grid item xs={8}>
<Grid
size={{
xs: 8,
}}
>
<div className="grid-elements">xs=4</div>
</Grid>
<Grid item xs={4}>
<Grid
size={{
xs: 4,
}}
>
<div className="grid-elements">xs=8</div>
</Grid>
</Grid>
Expand All @@ -246,14 +262,14 @@ Here’s the result;
### Fluid Grids with multiple breakpoints

Components may be defined with multiple widths, causing the layout to change at the defined breakpoint. Width values assigned to larger breakpoints precede those assigned to smaller ones.
For example`xs={12} sm={6}` sizes a component to takes half of the 6 columns when viewport width is minimum 600px or above. The component fills all 12 available columns in smaller viewports.
For example with the prop `size={{ xs: 6, md: 8 }}`, the component will take up half of the 12-column grid (6 columns) when the viewport is 600px or wider, and it will fill all 12 columns on smaller screens.

Consider the code below:

```tsx
import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";

const ComplexFluidGrid = () => {
return (
Expand Down Expand Up @@ -305,19 +321,23 @@ Consider the code below:
```tsx
import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";

const AutoGrid = () => {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<Grid size="grow">
<div className="grid-elements">xs</div>
</Grid>
<Grid item xs={6}>
<Grid
size={{
xs: 6,
}}
>
<div className="grid-elements">xs=6</div>
</Grid>
<Grid item xs>
<Grid size="grow">
<div className="grid-elements">xs</div>
</Grid>
</Grid>
Expand All @@ -338,25 +358,37 @@ The code above depicts three grid elements. The middle element is set to take ha

### Nested Grids

You can combine the `container` and `item` props so that the `<Grid />` component can act as both a flex container and a child item. This allows us to have another grid set within the grid item.
The `<Grid container />` that renders as a direct child inside another `<Grid container />` is a nested grid that inherits its columns and spacing from the top level. This allows you to create complex layouts with multiple grid items.

Consider the code below:

```tsx
import * as React from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";

function NestedGrid() {
return (
<React.Fragment>
<Grid item xs={4}>
<Grid
size={{
xs: 4,
}}
>
<div className="grid-elements">Grid Element</div>
</Grid>
<Grid item xs={4}>
<Grid
size={{
xs: 4,
}}
>
<div className="grid-elements">Grid Element</div>
</Grid>
<Grid item xs={4}>
<Grid
size={{
xs: 4,
}}
>
<div className="grid-elements">Grid Element</div>
</Grid>
</React.Fragment>
Expand All @@ -367,13 +399,13 @@ export default function NestedGridGroup() {
return (
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={1}>
<Grid container item spacing={3}>
<Grid container spacing={3}>
<NestedGrid />
</Grid>
<Grid container item spacing={3}>
<Grid container spacing={3}>
<NestedGrid />
</Grid>
<Grid container item spacing={3}>
<Grid container spacing={3}>
<NestedGrid />
</Grid>
</Grid>
Expand Down Expand Up @@ -404,7 +436,7 @@ Study the code:
import * as React from "react";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";
import Box from "@mui/material/Box";

function MainFeaturedPost(props) {
Expand Down Expand Up @@ -441,7 +473,11 @@ function MainFeaturedPost(props) {
}}
/>
<Grid container>
<Grid item md={6}>
<Grid
size={{
md: 6,
}}
>
<Box
sx={{
position: "relative",
Expand Down Expand Up @@ -475,7 +511,7 @@ Study the code below:
```tsx
import * as React from "react";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";
import Card from "@mui/material/Card";
import CardActionArea from "@mui/material/CardActionArea";
import CardContent from "@mui/material/CardContent";
Expand All @@ -485,7 +521,12 @@ function FeaturedPost(props) {
const { post } = props;

return (
<Grid item xs={12} md={6}>
<Grid
size={{
xs: 12,
md: 6,
}}
>
<CardActionArea component="a" href="#">
<Card sx={{ display: "flex" }}>
<CardContent sx={{ flex: 1 }}>
Expand Down Expand Up @@ -526,7 +567,7 @@ Here’s the code for the Blog component:
```tsx
import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import Grid from "@mui/material/Grid";
import Grid from "@mui/material/Grid2";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Header from "./Header";
Expand Down Expand Up @@ -658,7 +699,7 @@ In practice, you can set the `zeroMinWidth` property as follows:

### direction: column | column-reverse

`direction="column"` and `direction="column-reverse"` containers do not support the `xs`, `sm`, `md`, `lg`, and `xl` props. These breakpoints are primarily concerned with controlling width and have no effect on height within column containers.
`direction="column"` and `direction="column-reverse"` containers do not support the `size={{ xs, sm, md , lg ,xl }}` prop. These breakpoints are primarily concerned with controlling width and have no effect on height within column containers.

## Conclusion

Expand Down
Loading
Loading