From 0901a36b52aefcf353c4917667ea576ae89ccc56 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Thu, 20 Feb 2025 17:15:47 -0300 Subject: [PATCH 1/6] Rename Grid2 to Grid --- apps/bare-next-app/src/app/grid/page.tsx | 2 +- .../src/app/material-ui/react-grid/page.tsx | 2 +- .../app-bar/DashboardLayoutBasic.js | 2 +- .../app-bar/DashboardLayoutBasic.tsx | 2 +- .../components/autocomplete/GoogleMaps.js | 14 +++---- .../components/autocomplete/GoogleMaps.tsx | 14 +++---- .../breadcrumbs/PageContainerBasic.js | 2 +- .../breadcrumbs/PageContainerBasic.tsx | 2 +- .../components/grid-legacy/grid-legacy.md | 4 +- .../components/{grid2 => grid}/AutoGrid.js | 2 +- .../components/{grid2 => grid}/AutoGrid.tsx | 2 +- .../{grid2 => grid}/AutoGrid.tsx.preview | 0 .../components/{grid2 => grid}/BasicGrid.js | 2 +- .../components/{grid2 => grid}/BasicGrid.tsx | 2 +- .../{grid2 => grid}/BasicGrid.tsx.preview | 0 .../{grid2 => grid}/CenteredElementGrid.js | 2 +- .../{grid2 => grid}/CenteredElementGrid.tsx | 2 +- .../CenteredElementGrid.tsx.preview | 0 .../{grid2 => grid}/ColumnLayoutInsideGrid.js | 2 +- .../ColumnLayoutInsideGrid.tsx | 2 +- .../ColumnLayoutInsideGrid.tsx.preview | 0 .../components/{grid2 => grid}/ColumnsGrid.js | 2 +- .../{grid2 => grid}/ColumnsGrid.tsx | 2 +- .../{grid2 => grid}/ColumnsGrid.tsx.preview | 0 .../{grid2 => grid}/FullBorderedGrid.js | 2 +- .../{grid2 => grid}/FullBorderedGrid.tsx | 2 +- .../{grid2 => grid}/FullWidthGrid.js | 2 +- .../{grid2 => grid}/FullWidthGrid.tsx | 2 +- .../{grid2 => grid}/FullWidthGrid.tsx.preview | 0 .../{grid2 => grid}/HalfBorderedGrid.js | 2 +- .../{grid2 => grid}/HalfBorderedGrid.tsx | 2 +- .../{grid2 => grid}/InteractiveGrid.js | 2 +- .../{grid2 => grid}/InteractiveGrid.tsx | 2 +- .../components/{grid2 => grid}/NestedGrid.js | 2 +- .../components/{grid2 => grid}/NestedGrid.tsx | 2 +- .../{grid2 => grid}/NestedGridColumns.js | 2 +- .../{grid2 => grid}/NestedGridColumns.tsx | 2 +- .../components/{grid2 => grid}/OffsetGrid.js | 2 +- .../components/{grid2 => grid}/OffsetGrid.tsx | 2 +- .../{grid2 => grid}/OffsetGrid.tsx.preview | 0 .../{grid2 => grid}/ResponsiveGrid.js | 2 +- .../{grid2 => grid}/ResponsiveGrid.tsx | 2 +- .../ResponsiveGrid.tsx.preview | 0 .../{grid2 => grid}/RowAndColumnSpacing.js | 2 +- .../{grid2 => grid}/RowAndColumnSpacing.tsx | 2 +- .../RowAndColumnSpacing.tsx.preview | 0 .../components/{grid2 => grid}/SpacingGrid.js | 2 +- .../{grid2 => grid}/SpacingGrid.tsx | 2 +- .../{grid2 => grid}/VariableWidthGrid.js | 2 +- .../{grid2 => grid}/VariableWidthGrid.tsx | 2 +- .../VariableWidthGrid.tsx.preview | 0 .../{grid2/grid2.md => grid/grid.md} | 6 +-- .../templates/blog/components/Latest.js | 2 +- .../templates/blog/components/Latest.tsx | 2 +- .../templates/blog/components/MainContent.js | 2 +- .../templates/blog/components/MainContent.tsx | 2 +- .../templates/checkout/Checkout.js | 2 +- .../templates/checkout/Checkout.tsx | 2 +- .../checkout/components/AddressForm.js | 2 +- .../checkout/components/AddressForm.tsx | 2 +- .../dashboard/components/MainGrid.js | 2 +- .../dashboard/components/MainGrid.tsx | 2 +- .../marketing-page/components/Highlights.js | 2 +- .../marketing-page/components/Highlights.tsx | 2 +- .../marketing-page/components/Pricing.js | 2 +- .../marketing-page/components/Pricing.tsx | 2 +- .../marketing-page/components/Testimonials.js | 2 +- .../components/Testimonials.tsx | 2 +- .../migration-v4/v5-component-changes.md | 2 +- docs/data/material/pages.ts | 2 +- docs/data/material/pagesApi.js | 2 +- .../blog/build-layouts-faster-with-grid-v2.md | 10 ++--- .../material-ui/api/{grid-2.js => grid.js} | 4 +- .../api/{grid-2.json => grid.json} | 16 ++++---- docs/pages/material-ui/api/pigment-grid.json | 2 +- .../{react-grid2.js => react-grid.js} | 2 +- docs/pages/system/api/grid.json | 2 +- docs/src/components/about/HowToSupport.tsx | 2 +- docs/src/components/about/OurValues.tsx | 2 +- docs/src/components/about/Team.tsx | 2 +- docs/src/components/careers/CareersFaq.tsx | 2 +- docs/src/components/careers/PerksBenefits.tsx | 2 +- docs/src/components/home/CompaniesGrid.tsx | 2 +- docs/src/components/home/DiamondSponsors.tsx | 2 +- docs/src/components/home/GoldSponsors.tsx | 2 +- docs/src/components/home/ProductSuite.tsx | 2 +- .../home/ToolpadCoreShowcaseDemo.tsx | 2 +- docs/src/components/home/UserFeedbacks.tsx | 2 +- docs/src/components/home/ValueProposition.tsx | 2 +- docs/src/components/pricing/PricingFAQ.tsx | 2 +- .../productBaseUI/BaseUIComponents.tsx | 2 +- .../components/productBaseUI/BaseUIEnd.tsx | 2 +- .../productBaseUI/BaseUISummary.tsx | 2 +- .../productBaseUI/BaseUITestimonial.tsx | 2 +- .../components/productCore/CoreProducts.tsx | 2 +- .../productDesignKit/DesignKitDemo.tsx | 2 +- .../productDesignKit/DesignKitFAQ.tsx | 2 +- .../productDesignKit/DesignKitValues.tsx | 2 +- .../productDesignKit/SyncFeatures.tsx | 2 +- .../productMaterial/MaterialComponents.tsx | 2 +- .../productMaterial/MaterialDesignKits.tsx | 2 +- .../productMaterial/MaterialEnd.tsx | 2 +- .../productMaterial/MaterialStyling.tsx | 2 +- .../productMaterial/MaterialTheming.tsx | 2 +- .../productTemplate/TemplateDemo.tsx | 2 +- docs/src/components/productX/XComponents.tsx | 2 +- docs/src/components/productX/XDataGrid.tsx | 2 +- docs/src/components/productX/XPlans.tsx | 2 +- docs/src/components/productX/XRoadmap.tsx | 2 +- docs/src/components/productX/XTheming.tsx | 2 +- .../components/JoyStartingLinksCollection.js | 2 +- .../modules/components/MaterialShowcase.js | 2 +- .../MaterialStartingLinksCollection.js | 2 +- .../MaterialLayoutComponents.js | 4 +- .../MaterialUtilComponents.js | 2 +- .../components/MaterialUIDesignResources.js | 2 +- .../components/MaterialUIExampleCollection.js | 2 +- docs/translations/api-docs/grid-2/grid-2.json | 37 ------------------- .../api-docs/grid-legacy/grid-legacy.json | 2 +- docs/translations/translations.json | 2 +- .../mui-name-matches-component-name.test.js | 20 +++++----- .../Grid2.test.js => Grid/Grid.test.js} | 24 ++++++------ .../src/{Grid2/Grid2.tsx => Grid/Grid.tsx} | 32 ++++++++-------- .../grid2Classes.ts => Grid/gridClasses.ts} | 12 +++--- packages/mui-material/src/Grid/index.ts | 4 ++ packages/mui-material/src/Grid2/index.ts | 4 -- .../src/GridLegacy/GridLegacy.d.ts | 6 +-- .../mui-material/src/GridLegacy/GridLegacy.js | 2 +- .../src/PigmentGrid/PigmentGrid.tsx | 4 +- .../mui-material/src/PigmentGrid/index.ts | 2 +- packages/mui-material/src/index.d.ts | 4 +- packages/mui-material/src/index.js | 4 +- .../mui-material/src/styles/components.ts | 8 ++-- .../src/styles/createTheme.spec.ts | 2 +- packages/mui-material/src/styles/overrides.ts | 4 +- packages/mui-material/src/styles/props.ts | 4 +- packages/mui-system/src/Grid/Grid.test.js | 6 +-- packages/mui-system/src/Grid/Grid.tsx | 1 + .../src/Grid/deleteLegacyGridProps.ts | 2 +- scripts/generateCodeowners.mjs | 2 +- .../{GridLegacy => Grid}/Issue43707.js | 2 +- .../StressNestedGrid.js} | 4 +- .../StyledGrid2.js => Grid/StyledGrid.js} | 4 +- 143 files changed, 216 insertions(+), 252 deletions(-) rename docs/data/material/components/{grid2 => grid}/AutoGrid.js (95%) rename docs/data/material/components/{grid2 => grid}/AutoGrid.tsx (95%) rename docs/data/material/components/{grid2 => grid}/AutoGrid.tsx.preview (100%) rename docs/data/material/components/{grid2 => grid}/BasicGrid.js (95%) rename docs/data/material/components/{grid2 => grid}/BasicGrid.tsx (95%) rename docs/data/material/components/{grid2 => grid}/BasicGrid.tsx.preview (100%) rename docs/data/material/components/{grid2 => grid}/CenteredElementGrid.js (94%) rename docs/data/material/components/{grid2 => grid}/CenteredElementGrid.tsx (94%) rename docs/data/material/components/{grid2 => grid}/CenteredElementGrid.tsx.preview (100%) rename docs/data/material/components/{grid2 => grid}/ColumnLayoutInsideGrid.js (96%) rename docs/data/material/components/{grid2 => grid}/ColumnLayoutInsideGrid.tsx (96%) rename docs/data/material/components/{grid2 => grid}/ColumnLayoutInsideGrid.tsx.preview (100%) rename docs/data/material/components/{grid2 => grid}/ColumnsGrid.js (94%) rename docs/data/material/components/{grid2 => grid}/ColumnsGrid.tsx (94%) rename docs/data/material/components/{grid2 => grid}/ColumnsGrid.tsx.preview (100%) rename docs/data/material/components/{grid2 => grid}/FullBorderedGrid.js (95%) rename docs/data/material/components/{grid2 => grid}/FullBorderedGrid.tsx (95%) rename docs/data/material/components/{grid2 => grid}/FullWidthGrid.js (95%) rename docs/data/material/components/{grid2 => grid}/FullWidthGrid.tsx (95%) rename docs/data/material/components/{grid2 => grid}/FullWidthGrid.tsx.preview (100%) rename docs/data/material/components/{grid2 => grid}/HalfBorderedGrid.js (96%) rename docs/data/material/components/{grid2 => grid}/HalfBorderedGrid.tsx (96%) rename docs/data/material/components/{grid2 => grid}/InteractiveGrid.js (99%) rename docs/data/material/components/{grid2 => grid}/InteractiveGrid.tsx (99%) rename docs/data/material/components/{grid2 => grid}/NestedGrid.js (98%) rename docs/data/material/components/{grid2 => grid}/NestedGrid.tsx (98%) rename docs/data/material/components/{grid2 => grid}/NestedGridColumns.js (96%) rename docs/data/material/components/{grid2 => grid}/NestedGridColumns.tsx (96%) rename docs/data/material/components/{grid2 => grid}/OffsetGrid.js (95%) rename docs/data/material/components/{grid2 => grid}/OffsetGrid.tsx (95%) rename docs/data/material/components/{grid2 => grid}/OffsetGrid.tsx.preview (100%) rename docs/data/material/components/{grid2 => grid}/ResponsiveGrid.js (95%) rename docs/data/material/components/{grid2 => grid}/ResponsiveGrid.tsx (95%) rename docs/data/material/components/{grid2 => grid}/ResponsiveGrid.tsx.preview (100%) rename docs/data/material/components/{grid2 => grid}/RowAndColumnSpacing.js (95%) rename docs/data/material/components/{grid2 => grid}/RowAndColumnSpacing.tsx (95%) rename docs/data/material/components/{grid2 => grid}/RowAndColumnSpacing.tsx.preview (100%) rename docs/data/material/components/{grid2 => grid}/SpacingGrid.js (98%) rename docs/data/material/components/{grid2 => grid}/SpacingGrid.tsx (98%) rename docs/data/material/components/{grid2 => grid}/VariableWidthGrid.js (95%) rename docs/data/material/components/{grid2 => grid}/VariableWidthGrid.tsx (95%) rename docs/data/material/components/{grid2 => grid}/VariableWidthGrid.tsx.preview (100%) rename docs/data/material/components/{grid2/grid2.md => grid/grid.md} (98%) rename docs/pages/material-ui/api/{grid-2.js => grid.js} (77%) rename docs/pages/material-ui/api/{grid-2.json => grid.json} (85%) rename docs/pages/material-ui/{react-grid2.js => react-grid.js} (78%) delete mode 100644 docs/translations/api-docs/grid-2/grid-2.json rename packages/mui-material/src/{Grid2/Grid2.test.js => Grid/Grid.test.js} (74%) rename packages/mui-material/src/{Grid2/Grid2.tsx => Grid/Grid.tsx} (92%) rename packages/mui-material/src/{Grid2/grid2Classes.ts => Grid/gridClasses.ts} (80%) create mode 100644 packages/mui-material/src/Grid/index.ts delete mode 100644 packages/mui-material/src/Grid2/index.ts rename test/regressions/fixtures/{GridLegacy => Grid}/Issue43707.js (98%) rename test/regressions/fixtures/{GridLegacy/StressNestedGrid2.js => Grid/StressNestedGrid.js} (96%) rename test/regressions/fixtures/{GridLegacy/StyledGrid2.js => Grid/StyledGrid.js} (90%) diff --git a/apps/bare-next-app/src/app/grid/page.tsx b/apps/bare-next-app/src/app/grid/page.tsx index 7045f40d96156b..3a3bfa09380d22 100644 --- a/apps/bare-next-app/src/app/grid/page.tsx +++ b/apps/bare-next-app/src/app/grid/page.tsx @@ -1,6 +1,6 @@ 'use client'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import { styled } from '@mui/material'; const Item = styled('div')` diff --git a/apps/bare-next-app/src/app/material-ui/react-grid/page.tsx b/apps/bare-next-app/src/app/material-ui/react-grid/page.tsx index c7c73d648a0dce..d6f1076aa60fd4 100644 --- a/apps/bare-next-app/src/app/material-ui/react-grid/page.tsx +++ b/apps/bare-next-app/src/app/material-ui/react-grid/page.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import { styled } from '@mui/material'; const Item = styled(Paper)(({ theme }) => ({ diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.js b/docs/data/material/components/app-bar/DashboardLayoutBasic.js index 2c8f565c766594..dbf9cc97e573c6 100644 --- a/docs/data/material/components/app-bar/DashboardLayoutBasic.js +++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.js @@ -8,7 +8,7 @@ import LayersIcon from '@mui/icons-material/Layers'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const NAVIGATION = [ { diff --git a/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx index 8adbc7aa4cac4d..7bb6e519f619bf 100644 --- a/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx +++ b/docs/data/material/components/app-bar/DashboardLayoutBasic.tsx @@ -8,7 +8,7 @@ import LayersIcon from '@mui/icons-material/Layers'; import { AppProvider, Navigation, Router } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer } from '@toolpad/core/PageContainer'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const NAVIGATION: Navigation = [ { diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js index 944fe71bda7f93..b7f192f757d74d 100644 --- a/docs/data/material/components/autocomplete/GoogleMaps.js +++ b/docs/data/material/components/autocomplete/GoogleMaps.js @@ -5,7 +5,7 @@ import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; import Paper from '@mui/material/Paper'; import LocationOnIcon from '@mui/icons-material/LocationOn'; -import Grid2 from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import { useTheme } from '@mui/material/styles'; import parse from 'autosuggest-highlight/parse'; @@ -212,11 +212,11 @@ export default function GoogleMaps() { ); return (
  • - - + + - - + + {parts.map((part, index) => ( ) : null} - - + +
    • ); }} diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/GoogleMaps.tsx index f0f5bd0d2e2829..31859e368276ee 100644 --- a/docs/data/material/components/autocomplete/GoogleMaps.tsx +++ b/docs/data/material/components/autocomplete/GoogleMaps.tsx @@ -4,7 +4,7 @@ import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; import Paper, { PaperProps } from '@mui/material/Paper'; import LocationOnIcon from '@mui/icons-material/LocationOn'; -import Grid2 from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import { useTheme } from '@mui/material/styles'; import parse from 'autosuggest-highlight/parse'; @@ -230,11 +230,11 @@ export default function GoogleMaps() { ); return (
  • - - + + - - + + {parts.map((part, index) => ( ) : null} - - + +
    • ); }} diff --git a/docs/data/material/components/breadcrumbs/PageContainerBasic.js b/docs/data/material/components/breadcrumbs/PageContainerBasic.js index d38dcc5ff8a786..cedec02bbedb02 100644 --- a/docs/data/material/components/breadcrumbs/PageContainerBasic.js +++ b/docs/data/material/components/breadcrumbs/PageContainerBasic.js @@ -7,7 +7,7 @@ import { PageHeader, PageHeaderToolbar, } from '@toolpad/core/PageContainer'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; diff --git a/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx b/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx index 68065a16881dbb..81b08651fb9420 100644 --- a/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx +++ b/docs/data/material/components/breadcrumbs/PageContainerBasic.tsx @@ -7,7 +7,7 @@ import { PageHeader, PageHeaderToolbar, } from '@toolpad/core/PageContainer'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; diff --git a/docs/data/material/components/grid-legacy/grid-legacy.md b/docs/data/material/components/grid-legacy/grid-legacy.md index 247bd458db71f5..7a4ea3c79e28d0 100644 --- a/docs/data/material/components/grid-legacy/grid-legacy.md +++ b/docs/data/material/components/grid-legacy/grid-legacy.md @@ -22,8 +22,8 @@ The `GridLegacy` component shouldn't be confused with a data grid; it is closer :::warning The `GridLegacy` component has been deprecated. -Please use [Grid2](/material-ui/react-grid2/) instead. -See the [Grid2 upgrade guide](/material-ui/migration/upgrade-to-grid-v2/) for more details. +Please use [Grid](/material-ui/react-grid/) instead. +See the [Grid upgrade guide](/material-ui/migration/upgrade-to-grid-v2/) for more details. ::: ## How it works diff --git a/docs/data/material/components/grid2/AutoGrid.js b/docs/data/material/components/grid/AutoGrid.js similarity index 95% rename from docs/data/material/components/grid2/AutoGrid.js rename to docs/data/material/components/grid/AutoGrid.js index ea1617c9f5e42a..5a878506c27bbf 100644 --- a/docs/data/material/components/grid2/AutoGrid.js +++ b/docs/data/material/components/grid/AutoGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/AutoGrid.tsx b/docs/data/material/components/grid/AutoGrid.tsx similarity index 95% rename from docs/data/material/components/grid2/AutoGrid.tsx rename to docs/data/material/components/grid/AutoGrid.tsx index ea1617c9f5e42a..5a878506c27bbf 100644 --- a/docs/data/material/components/grid2/AutoGrid.tsx +++ b/docs/data/material/components/grid/AutoGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/AutoGrid.tsx.preview b/docs/data/material/components/grid/AutoGrid.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/AutoGrid.tsx.preview rename to docs/data/material/components/grid/AutoGrid.tsx.preview diff --git a/docs/data/material/components/grid2/BasicGrid.js b/docs/data/material/components/grid/BasicGrid.js similarity index 95% rename from docs/data/material/components/grid2/BasicGrid.js rename to docs/data/material/components/grid/BasicGrid.js index 7f167521cfd5d0..ad05d3b9ecaf2d 100644 --- a/docs/data/material/components/grid2/BasicGrid.js +++ b/docs/data/material/components/grid/BasicGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/BasicGrid.tsx b/docs/data/material/components/grid/BasicGrid.tsx similarity index 95% rename from docs/data/material/components/grid2/BasicGrid.tsx rename to docs/data/material/components/grid/BasicGrid.tsx index 7f167521cfd5d0..ad05d3b9ecaf2d 100644 --- a/docs/data/material/components/grid2/BasicGrid.tsx +++ b/docs/data/material/components/grid/BasicGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/BasicGrid.tsx.preview b/docs/data/material/components/grid/BasicGrid.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/BasicGrid.tsx.preview rename to docs/data/material/components/grid/BasicGrid.tsx.preview diff --git a/docs/data/material/components/grid2/CenteredElementGrid.js b/docs/data/material/components/grid/CenteredElementGrid.js similarity index 94% rename from docs/data/material/components/grid2/CenteredElementGrid.js rename to docs/data/material/components/grid/CenteredElementGrid.js index 0d4fa14b4ac95e..0a37b8eb94aaa4 100644 --- a/docs/data/material/components/grid2/CenteredElementGrid.js +++ b/docs/data/material/components/grid/CenteredElementGrid.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; export default function CenteredElementGrid() { return ( diff --git a/docs/data/material/components/grid2/CenteredElementGrid.tsx b/docs/data/material/components/grid/CenteredElementGrid.tsx similarity index 94% rename from docs/data/material/components/grid2/CenteredElementGrid.tsx rename to docs/data/material/components/grid/CenteredElementGrid.tsx index 0d4fa14b4ac95e..0a37b8eb94aaa4 100644 --- a/docs/data/material/components/grid2/CenteredElementGrid.tsx +++ b/docs/data/material/components/grid/CenteredElementGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; export default function CenteredElementGrid() { return ( diff --git a/docs/data/material/components/grid2/CenteredElementGrid.tsx.preview b/docs/data/material/components/grid/CenteredElementGrid.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/CenteredElementGrid.tsx.preview rename to docs/data/material/components/grid/CenteredElementGrid.tsx.preview diff --git a/docs/data/material/components/grid2/ColumnLayoutInsideGrid.js b/docs/data/material/components/grid/ColumnLayoutInsideGrid.js similarity index 96% rename from docs/data/material/components/grid2/ColumnLayoutInsideGrid.js rename to docs/data/material/components/grid/ColumnLayoutInsideGrid.js index 26695f10925562..6a0536dc61079b 100644 --- a/docs/data/material/components/grid2/ColumnLayoutInsideGrid.js +++ b/docs/data/material/components/grid/ColumnLayoutInsideGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; const Item = styled(Paper)(({ theme }) => ({ diff --git a/docs/data/material/components/grid2/ColumnLayoutInsideGrid.tsx b/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx similarity index 96% rename from docs/data/material/components/grid2/ColumnLayoutInsideGrid.tsx rename to docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx index 26695f10925562..6a0536dc61079b 100644 --- a/docs/data/material/components/grid2/ColumnLayoutInsideGrid.tsx +++ b/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; const Item = styled(Paper)(({ theme }) => ({ diff --git a/docs/data/material/components/grid2/ColumnLayoutInsideGrid.tsx.preview b/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/ColumnLayoutInsideGrid.tsx.preview rename to docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx.preview diff --git a/docs/data/material/components/grid2/ColumnsGrid.js b/docs/data/material/components/grid/ColumnsGrid.js similarity index 94% rename from docs/data/material/components/grid2/ColumnsGrid.js rename to docs/data/material/components/grid/ColumnsGrid.js index 442dbf01bbe105..6699251c8d63c3 100644 --- a/docs/data/material/components/grid2/ColumnsGrid.js +++ b/docs/data/material/components/grid/ColumnsGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx b/docs/data/material/components/grid/ColumnsGrid.tsx similarity index 94% rename from docs/data/material/components/grid2/ColumnsGrid.tsx rename to docs/data/material/components/grid/ColumnsGrid.tsx index 442dbf01bbe105..6699251c8d63c3 100644 --- a/docs/data/material/components/grid2/ColumnsGrid.tsx +++ b/docs/data/material/components/grid/ColumnsGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx.preview b/docs/data/material/components/grid/ColumnsGrid.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/ColumnsGrid.tsx.preview rename to docs/data/material/components/grid/ColumnsGrid.tsx.preview diff --git a/docs/data/material/components/grid2/FullBorderedGrid.js b/docs/data/material/components/grid/FullBorderedGrid.js similarity index 95% rename from docs/data/material/components/grid2/FullBorderedGrid.js rename to docs/data/material/components/grid/FullBorderedGrid.js index ccd93a973108dc..cd08c16ff386c6 100644 --- a/docs/data/material/components/grid2/FullBorderedGrid.js +++ b/docs/data/material/components/grid/FullBorderedGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; export default function FullBorderedGrid() { return ( diff --git a/docs/data/material/components/grid2/FullBorderedGrid.tsx b/docs/data/material/components/grid/FullBorderedGrid.tsx similarity index 95% rename from docs/data/material/components/grid2/FullBorderedGrid.tsx rename to docs/data/material/components/grid/FullBorderedGrid.tsx index ccd93a973108dc..cd08c16ff386c6 100644 --- a/docs/data/material/components/grid2/FullBorderedGrid.tsx +++ b/docs/data/material/components/grid/FullBorderedGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; export default function FullBorderedGrid() { return ( diff --git a/docs/data/material/components/grid2/FullWidthGrid.js b/docs/data/material/components/grid/FullWidthGrid.js similarity index 95% rename from docs/data/material/components/grid2/FullWidthGrid.js rename to docs/data/material/components/grid/FullWidthGrid.js index 94ce3c71790400..b1c8355d51393b 100644 --- a/docs/data/material/components/grid2/FullWidthGrid.js +++ b/docs/data/material/components/grid/FullWidthGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/FullWidthGrid.tsx b/docs/data/material/components/grid/FullWidthGrid.tsx similarity index 95% rename from docs/data/material/components/grid2/FullWidthGrid.tsx rename to docs/data/material/components/grid/FullWidthGrid.tsx index 94ce3c71790400..b1c8355d51393b 100644 --- a/docs/data/material/components/grid2/FullWidthGrid.tsx +++ b/docs/data/material/components/grid/FullWidthGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/FullWidthGrid.tsx.preview b/docs/data/material/components/grid/FullWidthGrid.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/FullWidthGrid.tsx.preview rename to docs/data/material/components/grid/FullWidthGrid.tsx.preview diff --git a/docs/data/material/components/grid2/HalfBorderedGrid.js b/docs/data/material/components/grid/HalfBorderedGrid.js similarity index 96% rename from docs/data/material/components/grid2/HalfBorderedGrid.js rename to docs/data/material/components/grid/HalfBorderedGrid.js index e0c51b84407fd0..c6a14082ab5f71 100644 --- a/docs/data/material/components/grid2/HalfBorderedGrid.js +++ b/docs/data/material/components/grid/HalfBorderedGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; export default function HalfBorderedGrid() { const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 }; diff --git a/docs/data/material/components/grid2/HalfBorderedGrid.tsx b/docs/data/material/components/grid/HalfBorderedGrid.tsx similarity index 96% rename from docs/data/material/components/grid2/HalfBorderedGrid.tsx rename to docs/data/material/components/grid/HalfBorderedGrid.tsx index 8c08fda0130141..f5c37e77ec5ad6 100644 --- a/docs/data/material/components/grid2/HalfBorderedGrid.tsx +++ b/docs/data/material/components/grid/HalfBorderedGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; export default function HalfBorderedGrid() { const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 } as const; diff --git a/docs/data/material/components/grid2/InteractiveGrid.js b/docs/data/material/components/grid/InteractiveGrid.js similarity index 99% rename from docs/data/material/components/grid2/InteractiveGrid.js rename to docs/data/material/components/grid/InteractiveGrid.js index b3f33df5df6557..b1cf4cc97dd5ba 100644 --- a/docs/data/material/components/grid2/InteractiveGrid.js +++ b/docs/data/material/components/grid/InteractiveGrid.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; import FormControlLabel from '@mui/material/FormControlLabel'; diff --git a/docs/data/material/components/grid2/InteractiveGrid.tsx b/docs/data/material/components/grid/InteractiveGrid.tsx similarity index 99% rename from docs/data/material/components/grid2/InteractiveGrid.tsx rename to docs/data/material/components/grid/InteractiveGrid.tsx index 6dabaafb7a974f..06f18b0ae087a7 100644 --- a/docs/data/material/components/grid2/InteractiveGrid.tsx +++ b/docs/data/material/components/grid/InteractiveGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid, { GridDirection } from '@mui/material/Grid2'; +import Grid, { GridDirection } from '@mui/material/Grid'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; import FormControlLabel from '@mui/material/FormControlLabel'; diff --git a/docs/data/material/components/grid2/NestedGrid.js b/docs/data/material/components/grid/NestedGrid.js similarity index 98% rename from docs/data/material/components/grid2/NestedGrid.js rename to docs/data/material/components/grid/NestedGrid.js index 5bb80f4483644c..280610f4823f01 100644 --- a/docs/data/material/components/grid2/NestedGrid.js +++ b/docs/data/material/components/grid/NestedGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/NestedGrid.tsx b/docs/data/material/components/grid/NestedGrid.tsx similarity index 98% rename from docs/data/material/components/grid2/NestedGrid.tsx rename to docs/data/material/components/grid/NestedGrid.tsx index 5bb80f4483644c..280610f4823f01 100644 --- a/docs/data/material/components/grid2/NestedGrid.tsx +++ b/docs/data/material/components/grid/NestedGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/NestedGridColumns.js b/docs/data/material/components/grid/NestedGridColumns.js similarity index 96% rename from docs/data/material/components/grid2/NestedGridColumns.js rename to docs/data/material/components/grid/NestedGridColumns.js index cbe82b160cf8a5..f7c5ced19c79e7 100644 --- a/docs/data/material/components/grid2/NestedGridColumns.js +++ b/docs/data/material/components/grid/NestedGridColumns.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/NestedGridColumns.tsx b/docs/data/material/components/grid/NestedGridColumns.tsx similarity index 96% rename from docs/data/material/components/grid2/NestedGridColumns.tsx rename to docs/data/material/components/grid/NestedGridColumns.tsx index cbe82b160cf8a5..f7c5ced19c79e7 100644 --- a/docs/data/material/components/grid2/NestedGridColumns.tsx +++ b/docs/data/material/components/grid/NestedGridColumns.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/OffsetGrid.js b/docs/data/material/components/grid/OffsetGrid.js similarity index 95% rename from docs/data/material/components/grid2/OffsetGrid.js rename to docs/data/material/components/grid/OffsetGrid.js index 20883b5e6bceef..9abe9d515a0ddf 100644 --- a/docs/data/material/components/grid2/OffsetGrid.js +++ b/docs/data/material/components/grid/OffsetGrid.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/OffsetGrid.tsx b/docs/data/material/components/grid/OffsetGrid.tsx similarity index 95% rename from docs/data/material/components/grid2/OffsetGrid.tsx rename to docs/data/material/components/grid/OffsetGrid.tsx index 20883b5e6bceef..9abe9d515a0ddf 100644 --- a/docs/data/material/components/grid2/OffsetGrid.tsx +++ b/docs/data/material/components/grid/OffsetGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/OffsetGrid.tsx.preview b/docs/data/material/components/grid/OffsetGrid.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/OffsetGrid.tsx.preview rename to docs/data/material/components/grid/OffsetGrid.tsx.preview diff --git a/docs/data/material/components/grid2/ResponsiveGrid.js b/docs/data/material/components/grid/ResponsiveGrid.js similarity index 95% rename from docs/data/material/components/grid2/ResponsiveGrid.js rename to docs/data/material/components/grid/ResponsiveGrid.js index 2e25849576f911..7a9d4a0ebf4cab 100644 --- a/docs/data/material/components/grid2/ResponsiveGrid.js +++ b/docs/data/material/components/grid/ResponsiveGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/ResponsiveGrid.tsx b/docs/data/material/components/grid/ResponsiveGrid.tsx similarity index 95% rename from docs/data/material/components/grid2/ResponsiveGrid.tsx rename to docs/data/material/components/grid/ResponsiveGrid.tsx index 2e25849576f911..7a9d4a0ebf4cab 100644 --- a/docs/data/material/components/grid2/ResponsiveGrid.tsx +++ b/docs/data/material/components/grid/ResponsiveGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/ResponsiveGrid.tsx.preview b/docs/data/material/components/grid/ResponsiveGrid.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/ResponsiveGrid.tsx.preview rename to docs/data/material/components/grid/ResponsiveGrid.tsx.preview diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.js b/docs/data/material/components/grid/RowAndColumnSpacing.js similarity index 95% rename from docs/data/material/components/grid2/RowAndColumnSpacing.js rename to docs/data/material/components/grid/RowAndColumnSpacing.js index 452c578fe9aa39..b40ff0ef00505a 100644 --- a/docs/data/material/components/grid2/RowAndColumnSpacing.js +++ b/docs/data/material/components/grid/RowAndColumnSpacing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx b/docs/data/material/components/grid/RowAndColumnSpacing.tsx similarity index 95% rename from docs/data/material/components/grid2/RowAndColumnSpacing.tsx rename to docs/data/material/components/grid/RowAndColumnSpacing.tsx index 452c578fe9aa39..b40ff0ef00505a 100644 --- a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx +++ b/docs/data/material/components/grid/RowAndColumnSpacing.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx.preview b/docs/data/material/components/grid/RowAndColumnSpacing.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/RowAndColumnSpacing.tsx.preview rename to docs/data/material/components/grid/RowAndColumnSpacing.tsx.preview diff --git a/docs/data/material/components/grid2/SpacingGrid.js b/docs/data/material/components/grid/SpacingGrid.js similarity index 98% rename from docs/data/material/components/grid2/SpacingGrid.js rename to docs/data/material/components/grid/SpacingGrid.js index 2b252f5f4df68a..722ca89ee1d73f 100644 --- a/docs/data/material/components/grid2/SpacingGrid.js +++ b/docs/data/material/components/grid/SpacingGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import FormLabel from '@mui/material/FormLabel'; import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; diff --git a/docs/data/material/components/grid2/SpacingGrid.tsx b/docs/data/material/components/grid/SpacingGrid.tsx similarity index 98% rename from docs/data/material/components/grid2/SpacingGrid.tsx rename to docs/data/material/components/grid/SpacingGrid.tsx index 4b9132af7ffe11..9e3283a5870712 100644 --- a/docs/data/material/components/grid2/SpacingGrid.tsx +++ b/docs/data/material/components/grid/SpacingGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import FormLabel from '@mui/material/FormLabel'; import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; diff --git a/docs/data/material/components/grid2/VariableWidthGrid.js b/docs/data/material/components/grid/VariableWidthGrid.js similarity index 95% rename from docs/data/material/components/grid2/VariableWidthGrid.js rename to docs/data/material/components/grid/VariableWidthGrid.js index 0b50197b503b8e..f8c43b0e8c5a48 100644 --- a/docs/data/material/components/grid2/VariableWidthGrid.js +++ b/docs/data/material/components/grid/VariableWidthGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/VariableWidthGrid.tsx b/docs/data/material/components/grid/VariableWidthGrid.tsx similarity index 95% rename from docs/data/material/components/grid2/VariableWidthGrid.tsx rename to docs/data/material/components/grid/VariableWidthGrid.tsx index 0b50197b503b8e..f8c43b0e8c5a48 100644 --- a/docs/data/material/components/grid2/VariableWidthGrid.tsx +++ b/docs/data/material/components/grid/VariableWidthGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/VariableWidthGrid.tsx.preview b/docs/data/material/components/grid/VariableWidthGrid.tsx.preview similarity index 100% rename from docs/data/material/components/grid2/VariableWidthGrid.tsx.preview rename to docs/data/material/components/grid/VariableWidthGrid.tsx.preview diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid/grid.md similarity index 98% rename from docs/data/material/components/grid2/grid2.md rename to docs/data/material/components/grid/grid.md index 6e8441bfab9984..3344c4f0f28920 100644 --- a/docs/data/material/components/grid2/grid2.md +++ b/docs/data/material/components/grid/grid.md @@ -1,13 +1,13 @@ --- productId: material-ui title: React Grid component -components: PigmentGrid, Grid2 +components: PigmentGrid, Grid githubLabel: 'component: Grid' materialDesign: https://m2.material.io/design/layout/understanding-layout.html -githubSource: packages/mui-material/src/Grid2 +githubSource: packages/mui-material/src/Grid --- -# Grid version 2 +# Grid

    The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

    diff --git a/docs/data/material/getting-started/templates/blog/components/Latest.js b/docs/data/material/getting-started/templates/blog/components/Latest.js index 045f935b6f0614..7f47d9949ccaa6 100644 --- a/docs/data/material/getting-started/templates/blog/components/Latest.js +++ b/docs/data/material/getting-started/templates/blog/components/Latest.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Avatar from '@mui/material/Avatar'; import AvatarGroup from '@mui/material/AvatarGroup'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Pagination from '@mui/material/Pagination'; import Typography from '@mui/material/Typography'; import { styled } from '@mui/material/styles'; diff --git a/docs/data/material/getting-started/templates/blog/components/Latest.tsx b/docs/data/material/getting-started/templates/blog/components/Latest.tsx index 24f16ed1c17a4b..9af951a80a1a20 100644 --- a/docs/data/material/getting-started/templates/blog/components/Latest.tsx +++ b/docs/data/material/getting-started/templates/blog/components/Latest.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Avatar from '@mui/material/Avatar'; import AvatarGroup from '@mui/material/AvatarGroup'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Pagination from '@mui/material/Pagination'; import Typography from '@mui/material/Typography'; import { styled } from '@mui/material/styles'; diff --git a/docs/data/material/getting-started/templates/blog/components/MainContent.js b/docs/data/material/getting-started/templates/blog/components/MainContent.js index 32a61f502b4894..2ebb142a6e3d1f 100644 --- a/docs/data/material/getting-started/templates/blog/components/MainContent.js +++ b/docs/data/material/getting-started/templates/blog/components/MainContent.js @@ -7,7 +7,7 @@ import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Chip from '@mui/material/Chip'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import FormControl from '@mui/material/FormControl'; diff --git a/docs/data/material/getting-started/templates/blog/components/MainContent.tsx b/docs/data/material/getting-started/templates/blog/components/MainContent.tsx index a4c370132d06f7..c584bcfd22ab4d 100644 --- a/docs/data/material/getting-started/templates/blog/components/MainContent.tsx +++ b/docs/data/material/getting-started/templates/blog/components/MainContent.tsx @@ -6,7 +6,7 @@ import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Chip from '@mui/material/Chip'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import FormControl from '@mui/material/FormControl'; diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js index 85bb2b70c41d2b..f34967552f27ee 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.js +++ b/docs/data/material/getting-started/templates/checkout/Checkout.js @@ -4,7 +4,7 @@ import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CssBaseline from '@mui/material/CssBaseline'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Step from '@mui/material/Step'; import StepLabel from '@mui/material/StepLabel'; diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx index 54e1749b2b8381..a412840f111437 100644 --- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx +++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx @@ -4,7 +4,7 @@ import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CssBaseline from '@mui/material/CssBaseline'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Step from '@mui/material/Step'; import StepLabel from '@mui/material/StepLabel'; diff --git a/docs/data/material/getting-started/templates/checkout/components/AddressForm.js b/docs/data/material/getting-started/templates/checkout/components/AddressForm.js index f9178ddd7951a1..3e50e63209f583 100644 --- a/docs/data/material/getting-started/templates/checkout/components/AddressForm.js +++ b/docs/data/material/getting-started/templates/checkout/components/AddressForm.js @@ -2,7 +2,7 @@ import * as React from 'react'; import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormLabel from '@mui/material/FormLabel'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import OutlinedInput from '@mui/material/OutlinedInput'; import { styled } from '@mui/material/styles'; diff --git a/docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx b/docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx index f9178ddd7951a1..3e50e63209f583 100644 --- a/docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx +++ b/docs/data/material/getting-started/templates/checkout/components/AddressForm.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormLabel from '@mui/material/FormLabel'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import OutlinedInput from '@mui/material/OutlinedInput'; import { styled } from '@mui/material/styles'; diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js index 1befcc5da5da99..f8613d3f0607ca 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js +++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx index 4acaf4679548ca..a6f5a5a7eda54c 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Highlights.js b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.js index 26400a79fe68c7..c720900cb0056b 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Highlights.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.js @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; import Container from '@mui/material/Container'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded'; diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx index 26400a79fe68c7..c720900cb0056b 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/components/Highlights.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; import Container from '@mui/material/Container'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import AutoFixHighRoundedIcon from '@mui/icons-material/AutoFixHighRounded'; diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js index 819dcda4e019f6..65daf63881da40 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.js @@ -7,7 +7,7 @@ import CardActions from '@mui/material/CardActions'; import CardContent from '@mui/material/CardContent'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'; diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx index 5baa327a7bc50d..336396af60acee 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/components/Pricing.tsx @@ -7,7 +7,7 @@ import CardActions from '@mui/material/CardActions'; import CardContent from '@mui/material/CardContent'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome'; import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'; diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js index a599e2c85527fe..a236c9aab6ae38 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js @@ -6,7 +6,7 @@ import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import { useTheme } from '@mui/system'; const userTestimonials = [ diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx index a599e2c85527fe..a236c9aab6ae38 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx +++ b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx @@ -6,7 +6,7 @@ import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import { useTheme } from '@mui/system'; const userTestimonials = [ diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md index 0d6b5011f8e8d6..695133c46d4c70 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes.md @@ -775,7 +775,7 @@ If you need negative margins on all sides, we recommend using the new Grid v2 in + import Grid from '@mui/material/Grid2'; ``` -To learn more about Grid2, check out the [Grid2 component doc](/material-ui/react-grid2/) and the [upgrade guide](/material-ui/migration/upgrade-to-grid-v2/). +To learn more about Grid2, check out the [Grid2 component doc](/material-ui/react-grid/) and the [upgrade guide](/material-ui/migration/upgrade-to-grid-v2/). :::info Grid2 was introduced in Material UI v5.9.1 and features negative margins on all sides by default. diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index a79fd5fbb3ac14..fedc188d43c971 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -107,7 +107,7 @@ const pages: MuiPage[] = [ { pathname: '/material-ui/react-box' }, { pathname: '/material-ui/react-container' }, { pathname: '/material-ui/react-grid-legacy', deprecated: true, title: 'Grid Legacy' }, - { pathname: '/material-ui/react-grid2', title: 'Grid v2' }, + { pathname: '/material-ui/react-grid' }, { pathname: '/material-ui/react-stack' }, { pathname: '/material-ui/react-image-list', title: 'Image List' }, ], diff --git a/docs/data/material/pagesApi.js b/docs/data/material/pagesApi.js index ceb00e230ce17b..54e62320c86139 100644 --- a/docs/data/material/pagesApi.js +++ b/docs/data/material/pagesApi.js @@ -47,7 +47,7 @@ module.exports = [ { pathname: '/material-ui/api/form-helper-text' }, { pathname: '/material-ui/api/form-label' }, { pathname: '/material-ui/api/global-styles' }, - { pathname: '/material-ui/api/grid-2' }, + { pathname: '/material-ui/api/grid' }, { pathname: '/material-ui/api/grid-legacy' }, { pathname: '/material-ui/api/grow' }, { pathname: '/material-ui/api/icon' }, diff --git a/docs/pages/blog/build-layouts-faster-with-grid-v2.md b/docs/pages/blog/build-layouts-faster-with-grid-v2.md index 8cfd075ad3ab12..a63eebaebd05d7 100644 --- a/docs/pages/blog/build-layouts-faster-with-grid-v2.md +++ b/docs/pages/blog/build-layouts-faster-with-grid-v2.md @@ -11,7 +11,7 @@ You can now use the new `Grid` component, shipped with [Material UI v5.9.0](htt ```js import Grid from '@mui/material/GridLegacy'; // The legacy grid, a.k.a. Grid v1 -import Grid from '@mui/material/Grid2'; // The updated grid, a.k.a. Grid v2 +import Grid from '@mui/material/Grid'; // The updated grid, a.k.a. Grid v2 ``` ## The motivation @@ -33,16 +33,16 @@ This is the same as the `Grid` in Material UI v4. :::info We believe that the migration from Grid v1 to v2 will be smooth for most users. -To get started right away, head over to the [Grid2 migration guide](/material-ui/migration/upgrade-to-grid-v2/). +To get started right away, head over to the [Grid v2 migration guide](/material-ui/migration/upgrade-to-grid-v2/). ::: ### 🚀 New features -#### [Disable the scrollbar](https://v5.mui.com/material-ui/react-grid2/#disable-the-scrollbar) +#### [Disable the scrollbar](https://v5.mui.com/material-ui/react-grid/#disable-the-scrollbar) A new prop called `disableEqualOverflow` solves the problem of an unwanted scrollbar appearing on small viewports. -#### [Offset](/material-ui/react-grid2/#offset) +#### [Offset](/material-ui/react-grid/#offset) We have added the long-awaited offset feature to v2 of the `Grid`. Thanks to CSS variables, we're able to implement this feature with just a few lines of code. @@ -140,7 +140,7 @@ Since the `Grid` has been rewritten from scratch for v2, it is currently conside We will make it stable and deprecate v1 in the next major release of Material UI. Ready to make the jump? -Check out the [Grid2 documentation](/material-ui/react-grid2/) and the [Grid2 migration guide](/material-ui/migration/upgrade-to-grid-v2/). +Check out the [Grid v2 documentation](/material-ui/react-grid/) and the [Grid v2 migration guide](/material-ui/migration/upgrade-to-grid-v2/).
    diff --git a/docs/pages/material-ui/api/grid-2.js b/docs/pages/material-ui/api/grid.js similarity index 77% rename from docs/pages/material-ui/api/grid-2.js rename to docs/pages/material-ui/api/grid.js index 39e0924da9ff1b..b365259b168867 100644 --- a/docs/pages/material-ui/api/grid-2.js +++ b/docs/pages/material-ui/api/grid.js @@ -1,7 +1,7 @@ import * as React from 'react'; import ApiPage from 'docs/src/modules/components/ApiPage'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './grid-2.json'; +import jsonPageContent from './grid.json'; export default function Page(props) { const { descriptions, pageContent } = props; @@ -9,7 +9,7 @@ export default function Page(props) { } Page.getInitialProps = () => { - const req = require.context('docs/translations/api-docs/grid-2', false, /\.\/grid-2.*.json$/); + const req = require.context('docs/translations/api-docs/grid', false, /\.\/grid.*.json$/); const descriptions = mapApiPageTranslations(req); return { diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid.json similarity index 85% rename from docs/pages/material-ui/api/grid-2.json rename to docs/pages/material-ui/api/grid.json index 7f74fa6b051eef..9459b0453fa54e 100644 --- a/docs/pages/material-ui/api/grid-2.json +++ b/docs/pages/material-ui/api/grid.json @@ -55,28 +55,28 @@ "default": "'wrap'" } }, - "name": "Grid2", - "imports": ["import Grid2 from '@mui/material/Grid2';", "import { Grid2 } from '@mui/material';"], + "name": "Grid", + "imports": ["import Grid from '@mui/material/Grid';", "import { Grid } from '@mui/material';"], "classes": [ { "key": "container", - "className": "MuiGrid2-container", + "className": "MuiGrid-container", "description": "Styles applied to the root element if `container={true}`.", "isGlobal": false }, { "key": "root", - "className": "MuiGrid2-root", + "className": "MuiGrid-root", "description": "Styles applied to the root element.", "isGlobal": false } ], "spread": true, "themeDefaultProps": true, - "muiName": "MuiGrid2", + "muiName": "MuiGrid", "forwardsRefTo": "HTMLElement", - "filename": "/packages/mui-material/src/Grid2/Grid2.tsx", + "filename": "/packages/mui-material/src/Grid/Grid.tsx", "inheritance": null, - "demos": "", - "cssComponent": false + "demos": "", + "cssComponent": true } diff --git a/docs/pages/material-ui/api/pigment-grid.json b/docs/pages/material-ui/api/pigment-grid.json index 2932f5752dc897..381d98a646c4a4 100644 --- a/docs/pages/material-ui/api/pigment-grid.json +++ b/docs/pages/material-ui/api/pigment-grid.json @@ -64,6 +64,6 @@ "muiName": "MuiPigmentGrid", "filename": "/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/react-grid2.js b/docs/pages/material-ui/react-grid.js similarity index 78% rename from docs/pages/material-ui/react-grid2.js rename to docs/pages/material-ui/react-grid.js index 99e253537cc1a6..2ffecb31f92132 100644 --- a/docs/pages/material-ui/react-grid2.js +++ b/docs/pages/material-ui/react-grid.js @@ -1,7 +1,7 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; -import * as pageProps from 'docs/data/material/components/grid2/grid2.md?muiMarkdown'; +import * as pageProps from 'docs/data/material/components/grid/grid.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json index 44892f5c03cde0..4cd038309b7d7b 100644 --- a/docs/pages/system/api/grid.json +++ b/docs/pages/system/api/grid.json @@ -107,6 +107,6 @@ "forwardsRefTo": "HTMLElement", "filename": "/packages/mui-system/src/Grid/Grid.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": true } diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx index bc0ac02fdd79f5..404e6f874abfe6 100644 --- a/docs/src/components/about/HowToSupport.tsx +++ b/docs/src/components/about/HowToSupport.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx index 7121a0676aa9c9..c14e4ceec99eb1 100644 --- a/docs/src/components/about/OurValues.tsx +++ b/docs/src/components/about/OurValues.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx index e606ac8891ff5d..0d30b3b78594b1 100644 --- a/docs/src/components/about/Team.tsx +++ b/docs/src/components/about/Team.tsx @@ -5,7 +5,7 @@ import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; import IconButton from '@mui/material/IconButton'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper, { PaperProps } from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import Tooltip from '@mui/material/Tooltip'; diff --git a/docs/src/components/careers/CareersFaq.tsx b/docs/src/components/careers/CareersFaq.tsx index 70a178bad825c8..bf8f06d05f70de 100644 --- a/docs/src/components/careers/CareersFaq.tsx +++ b/docs/src/components/careers/CareersFaq.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; diff --git a/docs/src/components/careers/PerksBenefits.tsx b/docs/src/components/careers/PerksBenefits.tsx index 626c9b1aa03d04..e65ea4e4da2b5d 100644 --- a/docs/src/components/careers/PerksBenefits.tsx +++ b/docs/src/components/careers/PerksBenefits.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx index 963705d60f0ee9..b68abbf215a150 100644 --- a/docs/src/components/home/CompaniesGrid.tsx +++ b/docs/src/components/home/CompaniesGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage'; export const CORE_CUSTOMERS: Array = [ diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx index 6ccdc1348f6563..638caece360787 100644 --- a/docs/src/components/home/DiamondSponsors.tsx +++ b/docs/src/components/home/DiamondSponsors.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useInView } from 'react-intersection-observer'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx index 5020b88b33a869..23ac7861275c2b 100644 --- a/docs/src/components/home/GoldSponsors.tsx +++ b/docs/src/components/home/GoldSponsors.tsx @@ -4,7 +4,7 @@ import Paper from '@mui/material/Paper'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import AddRounded from '@mui/icons-material/AddRounded'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import SponsorCard from 'docs/src/components/home/SponsorCard'; import BacklinkSponsor from 'docs/src/components/home/BacklinkSponsor'; import { Link } from '@mui/docs/Link'; diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx index 6e800c3dddfcad..8c57d575773427 100644 --- a/docs/src/components/home/ProductSuite.tsx +++ b/docs/src/components/home/ProductSuite.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import dynamic from 'next/dynamic'; import { useInView } from 'react-intersection-observer'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Box, { BoxProps } from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Section from 'docs/src/layouts/Section'; diff --git a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx index b2bec06d10d100..58ee2bec9a02c3 100644 --- a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx +++ b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx @@ -8,7 +8,7 @@ import { AppProvider, Router } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; import { PageContainer, type Navigation } from '@toolpad/core'; import DemoSandbox from 'docs/src/modules/components/DemoSandbox'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import { styled } from '@mui/material/styles'; const NAVIGATION: Navigation = [ diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx index c9e280c40132b8..44f50b9ed6ea4c 100644 --- a/docs/src/components/home/UserFeedbacks.tsx +++ b/docs/src/components/home/UserFeedbacks.tsx @@ -3,7 +3,7 @@ import { alpha } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import MuiStatistics from 'docs/src/components/home/MuiStatistics'; const TESTIMONIALS = [ diff --git a/docs/src/components/home/ValueProposition.tsx b/docs/src/components/home/ValueProposition.tsx index de021e0c070de6..95841e74187a89 100644 --- a/docs/src/components/home/ValueProposition.tsx +++ b/docs/src/components/home/ValueProposition.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import InvertColorsRoundedIcon from '@mui/icons-material/InvertColorsRounded'; import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded'; import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded'; diff --git a/docs/src/components/pricing/PricingFAQ.tsx b/docs/src/components/pricing/PricingFAQ.tsx index e87cad9037e9e2..a581f1fee8e6b7 100644 --- a/docs/src/components/pricing/PricingFAQ.tsx +++ b/docs/src/components/pricing/PricingFAQ.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Link from '@mui/material/Link'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx index ee720b2bbe7c1a..c57f7e7f4e3d0c 100644 --- a/docs/src/components/productBaseUI/BaseUIComponents.tsx +++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled as materialStyled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import SmartButtonRoundedIcon from '@mui/icons-material/SmartButtonRounded'; import TabUnselectedRoundedIcon from '@mui/icons-material/TabUnselectedRounded'; diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx index 60206f1cc03785..625d97cb04f18e 100644 --- a/docs/src/components/productBaseUI/BaseUIEnd.tsx +++ b/docs/src/components/productBaseUI/BaseUIEnd.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/productBaseUI/BaseUISummary.tsx b/docs/src/components/productBaseUI/BaseUISummary.tsx index 00c945e07903fc..ecb9cd2c957244 100644 --- a/docs/src/components/productBaseUI/BaseUISummary.tsx +++ b/docs/src/components/productBaseUI/BaseUISummary.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import StyleRoundedIcon from '@mui/icons-material/StyleRounded'; import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded'; import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded'; diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx index 96a49163b6d500..5825c8d122030c 100644 --- a/docs/src/components/productBaseUI/BaseUITestimonial.tsx +++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Divider from '@mui/material/Divider'; import Typography from '@mui/material/Typography'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx index 6f1adb0f36e10f..b4ca7e99b98ce7 100644 --- a/docs/src/components/productCore/CoreProducts.tsx +++ b/docs/src/components/productCore/CoreProducts.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Section from 'docs/src/layouts/Section'; import { InfoCard } from '@mui/docs/InfoCard'; import { Theme } from '@mui/material/styles'; diff --git a/docs/src/components/productDesignKit/DesignKitDemo.tsx b/docs/src/components/productDesignKit/DesignKitDemo.tsx index 65d99d7dea44b3..29c2bb344de7eb 100644 --- a/docs/src/components/productDesignKit/DesignKitDemo.tsx +++ b/docs/src/components/productDesignKit/DesignKitDemo.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Fade from '@mui/material/Fade'; import Typography from '@mui/material/Typography'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx index 1b51239d348f2b..1f99d74f2a5544 100644 --- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx +++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import Paper from '@mui/material/Paper'; diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx index 51ee8cf70d5342..ad20fdd8197251 100644 --- a/docs/src/components/productDesignKit/DesignKitValues.tsx +++ b/docs/src/components/productDesignKit/DesignKitValues.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Palette from '@mui/icons-material/Palette'; import LibraryBooks from '@mui/icons-material/LibraryBooks'; import { InfoCard } from '@mui/docs/InfoCard'; diff --git a/docs/src/components/productDesignKit/SyncFeatures.tsx b/docs/src/components/productDesignKit/SyncFeatures.tsx index 596270f65cdd1f..edb04b36ba26ef 100644 --- a/docs/src/components/productDesignKit/SyncFeatures.tsx +++ b/docs/src/components/productDesignKit/SyncFeatures.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import Fade from '@mui/material/Fade'; diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx index 94fb2a407b8e7e..2ae92897be99f4 100644 --- a/docs/src/components/productMaterial/MaterialComponents.tsx +++ b/docs/src/components/productMaterial/MaterialComponents.tsx @@ -3,7 +3,7 @@ import { CssVarsProvider } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Alert from '@mui/material/Alert'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; diff --git a/docs/src/components/productMaterial/MaterialDesignKits.tsx b/docs/src/components/productMaterial/MaterialDesignKits.tsx index dcd432db4d2de0..ad4ab8eef52434 100644 --- a/docs/src/components/productMaterial/MaterialDesignKits.tsx +++ b/docs/src/components/productMaterial/MaterialDesignKits.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Fade from '@mui/material/Fade'; import Typography from '@mui/material/Typography'; import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded'; diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx index 777fc3faa3ee00..d490609411ae52 100644 --- a/docs/src/components/productMaterial/MaterialEnd.tsx +++ b/docs/src/components/productMaterial/MaterialEnd.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx index 2cf91516e1da3a..56268c9d538b9a 100644 --- a/docs/src/components/productMaterial/MaterialStyling.tsx +++ b/docs/src/components/productMaterial/MaterialStyling.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import DevicesOtherRoundedIcon from '@mui/icons-material/DevicesOtherRounded'; import SwitchAccessShortcutRoundedIcon from '@mui/icons-material/SwitchAccessShortcutRounded'; diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx index 9b30439d4a044e..91ca8cb8888c97 100644 --- a/docs/src/components/productMaterial/MaterialTheming.tsx +++ b/docs/src/components/productMaterial/MaterialTheming.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { CssVarsProvider } from '@mui/material/styles'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import AutoAwesomeRounded from '@mui/icons-material/AutoAwesomeRounded'; import { HighlightedCode } from '@mui/docs/HighlightedCode'; diff --git a/docs/src/components/productTemplate/TemplateDemo.tsx b/docs/src/components/productTemplate/TemplateDemo.tsx index 3a8b392f97cedf..e18bdddd6cce9d 100644 --- a/docs/src/components/productTemplate/TemplateDemo.tsx +++ b/docs/src/components/productTemplate/TemplateDemo.tsx @@ -3,7 +3,7 @@ import SwipeableViews from 'react-swipeable-views'; import { alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import LaunchRounded from '@mui/icons-material/LaunchRounded'; import KeyboardArrowLeftRounded from '@mui/icons-material/KeyboardArrowLeftRounded'; diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx index 9c6a9a25eb36ad..fd56f42921b2e0 100644 --- a/docs/src/components/productX/XComponents.tsx +++ b/docs/src/components/productX/XComponents.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx index 8dcaa8acdea390..2508da4b2e0fed 100644 --- a/docs/src/components/productX/XDataGrid.tsx +++ b/docs/src/components/productX/XDataGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Paper from '@mui/material/Paper'; import EditRoundedIcon from '@mui/icons-material/EditRounded'; diff --git a/docs/src/components/productX/XPlans.tsx b/docs/src/components/productX/XPlans.tsx index 70d7889ac777d6..570fa3a8b07067 100644 --- a/docs/src/components/productX/XPlans.tsx +++ b/docs/src/components/productX/XPlans.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx index a53390bea636c5..695f1f58c12961 100644 --- a/docs/src/components/productX/XRoadmap.tsx +++ b/docs/src/components/productX/XRoadmap.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; diff --git a/docs/src/components/productX/XTheming.tsx b/docs/src/components/productX/XTheming.tsx index f248030852792d..00bc61fb022f3c 100644 --- a/docs/src/components/productX/XTheming.tsx +++ b/docs/src/components/productX/XTheming.tsx @@ -8,7 +8,7 @@ import { import { useDemoData } from '@mui/x-data-grid-generator'; import { CssVarsProvider } from '@mui/material/styles'; import { red } from '@mui/material/colors'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Paper from '@mui/material/Paper'; import Section from 'docs/src/layouts/Section'; diff --git a/docs/src/modules/components/JoyStartingLinksCollection.js b/docs/src/modules/components/JoyStartingLinksCollection.js index b2e25c6f5e2ec7..077da800cee6c8 100644 --- a/docs/src/modules/components/JoyStartingLinksCollection.js +++ b/docs/src/modules/components/JoyStartingLinksCollection.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded'; import WebRoundedIcon from '@mui/icons-material/WebRounded'; import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; diff --git a/docs/src/modules/components/MaterialShowcase.js b/docs/src/modules/components/MaterialShowcase.js index eee7f2ce5dafe4..d0993e48b93dcc 100644 --- a/docs/src/modules/components/MaterialShowcase.js +++ b/docs/src/modules/components/MaterialShowcase.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Card from '@mui/material/Card'; diff --git a/docs/src/modules/components/MaterialStartingLinksCollection.js b/docs/src/modules/components/MaterialStartingLinksCollection.js index 87e6851a7879b7..1722e73ec71701 100644 --- a/docs/src/modules/components/MaterialStartingLinksCollection.js +++ b/docs/src/modules/components/MaterialStartingLinksCollection.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded'; import WebRoundedIcon from '@mui/icons-material/WebRounded'; import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; diff --git a/docs/src/modules/components/MaterialUIComponents/MaterialLayoutComponents.js b/docs/src/modules/components/MaterialUIComponents/MaterialLayoutComponents.js index 1e71be62031d9b..474a86d6c41835 100644 --- a/docs/src/modules/components/MaterialUIComponents/MaterialLayoutComponents.js +++ b/docs/src/modules/components/MaterialUIComponents/MaterialLayoutComponents.js @@ -34,10 +34,10 @@ const layoutComponents = [ noGuidelines: true, }, { - name: 'Grid v2', + name: 'Grid', srcLight: '/static/material-ui/react-components/grid-v2-light.png', srcDark: '/static/material-ui/react-components/grid-v2-dark.png', - link: '/material-ui/react-grid2/', + link: '/material-ui/react-grid/', md1: false, md2: false, md3: false, diff --git a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js index b25f7b76208bf3..f11e006aa49b51 100644 --- a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js +++ b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import { InfoCard } from '@mui/docs/InfoCard'; import HighlightAltRoundedIcon from '@mui/icons-material/HighlightAltRounded'; import CssRoundedIcon from '@mui/icons-material/CssRounded'; diff --git a/docs/src/modules/components/MaterialUIDesignResources.js b/docs/src/modules/components/MaterialUIDesignResources.js index 9808c86517b66e..cc74a05ee97e71 100644 --- a/docs/src/modules/components/MaterialUIDesignResources.js +++ b/docs/src/modules/components/MaterialUIDesignResources.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import { InfoCard } from '@mui/docs/InfoCard'; const content = [ diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js index f691bdb63055a0..7a0afaa086dfe1 100644 --- a/docs/src/modules/components/MaterialUIExampleCollection.js +++ b/docs/src/modules/components/MaterialUIExampleCollection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; diff --git a/docs/translations/api-docs/grid-2/grid-2.json b/docs/translations/api-docs/grid-2/grid-2.json deleted file mode 100644 index 65a9cda1b84578..00000000000000 --- a/docs/translations/api-docs/grid-2/grid-2.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "componentDescription": "", - "propDescriptions": { - "children": { "description": "The content of the component." }, - "columns": { "description": "The number of columns." }, - "columnSpacing": { - "description": "Defines the horizontal space between the type item components. It overrides the value of the spacing prop." - }, - "container": { - "description": "If true, the component will have the flex container behavior. You should be wrapping items with a container." - }, - "direction": { - "description": "Defines the flex-direction style property. It is applied for all screen sizes." - }, - "offset": { - "description": "Defines the offset value for the type item components." - }, - "rowSpacing": { - "description": "Defines the vertical space between the type item components. It overrides the value of the spacing prop." - }, - "size": { "description": "Defines the size of the the type item components." }, - "spacing": { - "description": "Defines the space between the type item components. It can only be used on a type container component." - }, - "wrap": { - "description": "Defines the flex-wrap style property. It's applied for all screen sizes." - } - }, - "classDescriptions": { - "container": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "container={true}" - }, - "root": { "description": "Styles applied to the root element." } - } -} diff --git a/docs/translations/api-docs/grid-legacy/grid-legacy.json b/docs/translations/api-docs/grid-legacy/grid-legacy.json index 702c4f7cfb5d73..8534804a95953f 100644 --- a/docs/translations/api-docs/grid-legacy/grid-legacy.json +++ b/docs/translations/api-docs/grid-legacy/grid-legacy.json @@ -1,6 +1,6 @@ { "componentDescription": "", - "deprecationInfo": "Use the Grid2 component instead.", + "deprecationInfo": "Use the Grid component instead.", "propDescriptions": { "children": { "description": "The content of the component." }, "classes": { "description": "Override or extend the styles applied to the component." }, diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 3081a442be1ffa..b4c5278c647b67 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -199,7 +199,7 @@ "/material-ui/react-box": "Box", "/material-ui/react-container": "Container", "/material-ui/react-grid-legacy": "Grid Legacy", - "/material-ui/react-grid2": "Grid v2", + "/material-ui/react-grid": "Grid", "/material-ui/react-stack": "Stack", "/material-ui/react-image-list": "Image List", "/material-ui/react-click-away-listener": "Click-Away Listener", diff --git a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js index e36aaa5fb36bd3..8b9a1ea03056b8 100644 --- a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js +++ b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js @@ -37,14 +37,14 @@ ruleTester.run('mui-name-matches-component-name', rule, { }); `, ` - const Grid2 = createGrid2({ + const Grid = createGrid({ createStyledComponent: styled('div', { - name: 'MuiGrid2', + name: 'MuiGrid', overridesResolver: (props, styles) => styles.root, }), - componentName: 'MuiGrid2', - useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }), - }) as OverridableComponent; + componentName: 'MuiGrid', + useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid' }), + }) as OverridableComponent; `, { code: ` @@ -88,14 +88,14 @@ ruleTester.run('mui-name-matches-component-name', rule, { }); `, ` - const Grid2 = createGrid2({ + const Grid = createGrid({ createStyledComponent: styled('div', { - name: 'MuiGrid2', + name: 'MuiGrid', overridesResolver: (props, styles) => styles.root, }), - componentName: 'MuiGrid2', - useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }), - }) as OverridableComponent; + componentName: 'MuiGrid', + useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid' }), + }) as OverridableComponent; `, { code: ` diff --git a/packages/mui-material/src/Grid2/Grid2.test.js b/packages/mui-material/src/Grid/Grid.test.js similarity index 74% rename from packages/mui-material/src/Grid2/Grid2.test.js rename to packages/mui-material/src/Grid/Grid.test.js index eb0ea4c5f82255..40cdaadb776b8f 100644 --- a/packages/mui-material/src/Grid2/Grid2.test.js +++ b/packages/mui-material/src/Grid/Grid.test.js @@ -1,24 +1,24 @@ import * as React from 'react'; import { createRenderer, screen } from '@mui/internal-test-utils'; -import Grid2, { grid2Classes as classes } from '@mui/material/Grid2'; +import Grid, { gridClasses as classes } from '@mui/material/Grid'; import { createTheme, ThemeProvider, THEME_ID } from '@mui/material/styles'; import { expect } from 'chai'; import describeConformance from '../../test/describeConformance'; // The main tests are in mui-system Grid folder -describe('', () => { +describe('', () => { const { render } = createRenderer(); const defaultProps = { children:
    , }; - describeConformance(, () => ({ + describeConformance(, () => ({ classes, inheritComponent: 'div', render, refInstanceof: window.HTMLElement, - muiName: 'MuiGrid2', + muiName: 'MuiGrid', testVariantProps: { container: true, spacing: 5 }, skip: ['componentsProp', 'classesRoot'], })); @@ -27,24 +27,24 @@ describe('', () => { expect(() => render( - - 6 - 6 - + + 6 + 6 + , ), ).not.throw(); }); it('should render with the container class', () => { - render(); + render(); expect(screen.getByTestId('grid')).to.have.class(classes.container); }); it('should have container styles passed from theme', () => { const theme = createTheme({ components: { - MuiGrid2: { + MuiGrid: { styleOverrides: { container: { padding: '11px', @@ -55,9 +55,9 @@ describe('', () => { }); render( - + hello - + , ); expect(screen.getByTestId('grid')).to.have.style('padding', '11px'); diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid/Grid.tsx similarity index 92% rename from packages/mui-material/src/Grid2/Grid2.tsx rename to packages/mui-material/src/Grid/Grid.tsx index a16d06ebfc94cd..52a9cf4561b95e 100644 --- a/packages/mui-material/src/Grid2/Grid2.tsx +++ b/packages/mui-material/src/Grid/Grid.tsx @@ -1,6 +1,6 @@ 'use client'; import PropTypes from 'prop-types'; -import { createGrid as createGrid2 } from '@mui/system/Grid'; +import { createGrid } from '@mui/system/Grid'; import { SxProps, SystemProps } from '@mui/system'; import { OverridableComponent, OverrideProps } from '@mui/types'; import requirePropFactory from '../utils/requirePropFactory'; @@ -102,43 +102,43 @@ export interface GridBaseProps { wrap?: GridWrap; } -export interface Grid2TypeMap

    { +export interface GridTypeMap

    { props: P & GridBaseProps & { sx?: SxProps } & SystemProps; defaultComponent: D; } -export type Grid2Props< - D extends React.ElementType = Grid2TypeMap['defaultComponent'], +export type GridProps< + D extends React.ElementType = GridTypeMap['defaultComponent'], P = { component?: React.ElementType; }, -> = OverrideProps, D>; +> = OverrideProps, D>; /** * * Demos: * - * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/) + * - [Grid](https://next.mui.com/material-ui/react-grid/) * * API: * - * - [Grid2 API](https://next.mui.com/material-ui/api/grid-2/) + * - [Grid API](https://next.mui.com/material-ui/api/grid/) */ -const Grid2 = createGrid2({ +const Grid = createGrid({ createStyledComponent: styled('div', { - name: 'MuiGrid2', + name: 'MuiGrid', slot: 'Root', overridesResolver: (props, styles) => { const { ownerState } = props; return [styles.root, ownerState.container && styles.container]; }, }), - componentName: 'MuiGrid2', - useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid2' }), + componentName: 'MuiGrid', + useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiGrid' }), useTheme, -}) as OverridableComponent; +}) as OverridableComponent; -Grid2.propTypes /* remove-proptypes */ = { +Grid.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ @@ -267,8 +267,8 @@ Grid2.propTypes /* remove-proptypes */ = { } as any; if (process.env.NODE_ENV !== 'production') { - const Component = Grid2 as any; - const requireProp = requirePropFactory('Grid2', Component); + const Component = Grid as any; + const requireProp = requirePropFactory('Grid', Component); // eslint-disable-next-line no-useless-concat Component['propTypes' + ''] = { // eslint-disable-next-line react/forbid-foreign-prop-types @@ -279,4 +279,4 @@ if (process.env.NODE_ENV !== 'production') { }; } -export default Grid2; +export default Grid; diff --git a/packages/mui-material/src/Grid2/grid2Classes.ts b/packages/mui-material/src/Grid/gridClasses.ts similarity index 80% rename from packages/mui-material/src/Grid2/grid2Classes.ts rename to packages/mui-material/src/Grid/gridClasses.ts index 86c936bc30bb61..d6e72ce39544c7 100644 --- a/packages/mui-material/src/Grid2/grid2Classes.ts +++ b/packages/mui-material/src/Grid/gridClasses.ts @@ -1,17 +1,17 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; -export interface Grid2Classes { +export interface GridClasses { /** Styles applied to the root element. */ root: string; /** Styles applied to the root element if `container={true}`. */ container: string; } -export type Grid2ClassKey = keyof Grid2Classes; +export type GridClassKey = keyof GridClasses; -export function getGrid2UtilityClass(slot: string): string { - return generateUtilityClass('MuiGrid2', slot); +export function getGridUtilityClass(slot: string): string { + return generateUtilityClass('MuiGrid', slot); } const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const; @@ -19,7 +19,7 @@ const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'] as const; const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'] as const; const GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const; -const grid2Classes: Grid2Classes = generateUtilityClasses('MuiGrid2', [ +const gridClasses: GridClasses = generateUtilityClasses('MuiGrid', [ 'root', 'container', @@ -38,4 +38,4 @@ const grid2Classes: Grid2Classes = generateUtilityClasses('MuiGrid2', [ ...GRID_SIZES.map((size) => `grid-xl-${size}` as const), ]); -export default grid2Classes; +export default gridClasses; diff --git a/packages/mui-material/src/Grid/index.ts b/packages/mui-material/src/Grid/index.ts new file mode 100644 index 00000000000000..1eb8bf2e1f9244 --- /dev/null +++ b/packages/mui-material/src/Grid/index.ts @@ -0,0 +1,4 @@ +export { default } from './Grid'; +export * from './Grid'; +export { default as gridClasses } from './gridClasses'; +export * from './gridClasses'; diff --git a/packages/mui-material/src/Grid2/index.ts b/packages/mui-material/src/Grid2/index.ts deleted file mode 100644 index b85655841505cb..00000000000000 --- a/packages/mui-material/src/Grid2/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default } from './Grid2'; -export * from './Grid2'; -export { default as grid2Classes } from './grid2Classes'; -export * from './grid2Classes'; diff --git a/packages/mui-material/src/GridLegacy/GridLegacy.d.ts b/packages/mui-material/src/GridLegacy/GridLegacy.d.ts index 44f6cf38ceed8b..39867213aa8a45 100644 --- a/packages/mui-material/src/GridLegacy/GridLegacy.d.ts +++ b/packages/mui-material/src/GridLegacy/GridLegacy.d.ts @@ -150,7 +150,7 @@ export interface GridLegacyOwnProps extends SystemProps, Breakpoints { } /** - * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead. + * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead. */ export interface GridLegacyTypeMap< AdditionalProps = {}, @@ -170,12 +170,12 @@ export interface GridLegacyTypeMap< * * - [GridLegacy API](https://next.mui.com/material-ui/api/grid-legacy/) * - * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead. + * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead. */ declare const GridLegacy: OverridableComponent; /** - * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead. + * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead. */ export type GridLegacyProps< RootComponent extends React.ElementType = GridLegacyTypeMap['defaultComponent'], diff --git a/packages/mui-material/src/GridLegacy/GridLegacy.js b/packages/mui-material/src/GridLegacy/GridLegacy.js index d0396f8c587bbc..ae736e6e76dce4 100644 --- a/packages/mui-material/src/GridLegacy/GridLegacy.js +++ b/packages/mui-material/src/GridLegacy/GridLegacy.js @@ -410,7 +410,7 @@ const useUtilityClasses = (ownerState) => { }; /** - * @deprecated Use the [`Grid2`](https://mui.com/material-ui/react-grid2/) component instead. + * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead. */ const GridLegacy = React.forwardRef(function GridLegacy(inProps, ref) { const themeProps = useDefaultProps({ props: inProps, name: 'MuiGridLegacy' }); diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx index e6c9ed0fa8fae3..4fce2b283b2b7a 100644 --- a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx +++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx @@ -116,13 +116,13 @@ const useUtilityClasses = (ownerState: GridBaseProps) => { ], }; - return composeClasses(slots, (slot: string) => generateUtilityClass('MuiGrid2', slot), {}); + return composeClasses(slots, (slot: string) => generateUtilityClass('MuiGrid', slot), {}); }; /** * * Demos: * - * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/) + * - [Grid](https://next.mui.com/material-ui/react-grid/) * * API: * diff --git a/packages/mui-material/src/PigmentGrid/index.ts b/packages/mui-material/src/PigmentGrid/index.ts index d5cf10f404dccf..26a058590fefd2 100644 --- a/packages/mui-material/src/PigmentGrid/index.ts +++ b/packages/mui-material/src/PigmentGrid/index.ts @@ -1,3 +1,3 @@ export { default } from './PigmentGrid'; export * from './PigmentGrid'; -export { default as grid2Classes } from '../Grid2/grid2Classes'; +export { default as gridClasses } from '../Grid/gridClasses'; diff --git a/packages/mui-material/src/index.d.ts b/packages/mui-material/src/index.d.ts index 642a1b9bf39763..ef62e85d7927b2 100644 --- a/packages/mui-material/src/index.d.ts +++ b/packages/mui-material/src/index.d.ts @@ -206,8 +206,8 @@ export * from './FormLabel'; export { default as GridLegacy } from './GridLegacy'; export { GridLegacyProps, GridLegacyTypeMap } from './GridLegacy'; -export { default as Grid2 } from './Grid2'; -export * from './Grid2'; +export { default as Grid } from './Grid'; +export * from './Grid'; export { default as Grow } from './Grow'; export * from './Grow'; diff --git a/packages/mui-material/src/index.js b/packages/mui-material/src/index.js index 6bce8a42591ca9..9a3ef3128139ac 100644 --- a/packages/mui-material/src/index.js +++ b/packages/mui-material/src/index.js @@ -153,8 +153,8 @@ export * from './FormLabel'; export { default as GridLegacy } from './GridLegacy'; -export { default as Grid2 } from './Grid2'; -export * from './Grid2'; +export { default as Grid } from './Grid'; +export * from './Grid'; export { default as Grow } from './Grow'; export * from './Grow'; diff --git a/packages/mui-material/src/styles/components.ts b/packages/mui-material/src/styles/components.ts index 4a0b326a395839..e74f83bfb3969e 100644 --- a/packages/mui-material/src/styles/components.ts +++ b/packages/mui-material/src/styles/components.ts @@ -228,10 +228,10 @@ export interface Components { styleOverrides?: ComponentsOverrides['MuiGridLegacy']; variants?: ComponentsVariants['MuiGridLegacy']; }; - MuiGrid2?: { - defaultProps?: ComponentsProps['MuiGrid2']; - styleOverrides?: ComponentsOverrides['MuiGrid2']; - variants?: ComponentsVariants['MuiGrid2']; + MuiGrid?: { + defaultProps?: ComponentsProps['MuiGrid']; + styleOverrides?: ComponentsOverrides['MuiGrid']; + variants?: ComponentsVariants['MuiGrid']; }; MuiImageList?: { defaultProps?: ComponentsProps['MuiImageList']; diff --git a/packages/mui-material/src/styles/createTheme.spec.ts b/packages/mui-material/src/styles/createTheme.spec.ts index 2f21e1ff6bab57..3838c5973d5db8 100644 --- a/packages/mui-material/src/styles/createTheme.spec.ts +++ b/packages/mui-material/src/styles/createTheme.spec.ts @@ -155,7 +155,7 @@ const theme = createTheme(); }, }, }, - MuiGrid2: { + MuiGrid: { styleOverrides: { root: { justifyContent: 'space-between', diff --git a/packages/mui-material/src/styles/overrides.ts b/packages/mui-material/src/styles/overrides.ts index 0ef34d14932fae..772a682980e4a2 100644 --- a/packages/mui-material/src/styles/overrides.ts +++ b/packages/mui-material/src/styles/overrides.ts @@ -45,7 +45,7 @@ import { FormGroupClassKey } from '../FormGroup'; import { FormHelperTextClassKey } from '../FormHelperText'; import { FormLabelClassKey } from '../FormLabel'; import { GridLegacyClassKey } from '../GridLegacy'; -import { Grid2ClassKey } from '../Grid2'; +import { GridClassKey } from '../Grid'; import { IconButtonClassKey } from '../IconButton'; import { IconClassKey } from '../Icon'; import { ImageListClassKey } from '../ImageList'; @@ -190,7 +190,7 @@ export interface ComponentNameToClassKey { MuiFormHelperText: FormHelperTextClassKey; MuiFormLabel: FormLabelClassKey; MuiGridLegacy: GridLegacyClassKey; - MuiGrid2: Grid2ClassKey; + MuiGrid: GridClassKey; MuiIcon: IconClassKey; MuiIconButton: IconButtonClassKey; MuiImageList: ImageListClassKey; diff --git a/packages/mui-material/src/styles/props.ts b/packages/mui-material/src/styles/props.ts index 64e93825012095..fcbf747099bca5 100644 --- a/packages/mui-material/src/styles/props.ts +++ b/packages/mui-material/src/styles/props.ts @@ -43,7 +43,7 @@ import { FormGroupProps } from '../FormGroup'; import { FormHelperTextProps } from '../FormHelperText'; import { FormLabelProps } from '../FormLabel'; import { GridLegacyProps } from '../GridLegacy'; -import { Grid2Props } from '../Grid2'; +import { GridProps } from '../Grid'; import { IconButtonProps } from '../IconButton'; import { IconProps } from '../Icon'; import { ImageListProps } from '../ImageList'; @@ -168,7 +168,7 @@ export interface ComponentsPropsList { MuiFormHelperText: FormHelperTextProps; MuiFormLabel: FormLabelProps; MuiGridLegacy: GridLegacyProps; - MuiGrid2: Grid2Props; + MuiGrid: GridProps; MuiImageList: ImageListProps; MuiImageListItem: ImageListItemProps; MuiImageListItemBar: ImageListItemBarProps; diff --git a/packages/mui-system/src/Grid/Grid.test.js b/packages/mui-system/src/Grid/Grid.test.js index 66f170a4dbe433..af0ae24ec5cc41 100644 --- a/packages/mui-system/src/Grid/Grid.test.js +++ b/packages/mui-system/src/Grid/Grid.test.js @@ -258,7 +258,7 @@ describe('System ', () => { expect(() => { render(); }).toWarnDev( - 'MUI Grid2: The `item` prop has been removed and is no longer necessary. You can safely remove it.', + 'MUI Grid: The `item` prop has been removed and is no longer necessary. You can safely remove it.', ); // Should not warn again @@ -271,7 +271,7 @@ describe('System ', () => { expect(() => { render(); }).toWarnDev( - 'MUI Grid2: The `zeroMinWidth` prop has been removed and is no longer necessary. You can safely remove it.', + 'MUI Grid: The `zeroMinWidth` prop has been removed and is no longer necessary. You can safely remove it.', ); }); @@ -281,7 +281,7 @@ describe('System ', () => { render(); }).toWarnDev( // #host-reference - `MUI Grid2: The \`${breakpoint}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`, + `MUI Grid: The \`${breakpoint}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`, ); }); }); diff --git a/packages/mui-system/src/Grid/Grid.tsx b/packages/mui-system/src/Grid/Grid.tsx index fe8bbea9ee8c37..4e708392ba88df 100644 --- a/packages/mui-system/src/Grid/Grid.tsx +++ b/packages/mui-system/src/Grid/Grid.tsx @@ -6,6 +6,7 @@ import createGrid from './createGrid'; * Demos: * * - [Grid (Joy UI)](https://mui.com/joy-ui/react-grid/) + * - [Grid (Material UI)](https://mui.com/material-ui/react-grid/) * * API: * diff --git a/packages/mui-system/src/Grid/deleteLegacyGridProps.ts b/packages/mui-system/src/Grid/deleteLegacyGridProps.ts index 753c5dc8c29dff..8c5b5a28cdcadb 100644 --- a/packages/mui-system/src/Grid/deleteLegacyGridProps.ts +++ b/packages/mui-system/src/Grid/deleteLegacyGridProps.ts @@ -47,7 +47,7 @@ export default function deleteLegacyGridProps( propsToWarn.forEach((prop) => { if (!warnedAboutProps.includes(prop)) { warnedAboutProps.push(prop); - console.warn(`MUI Grid2: ${getLegacyGridWarning(prop)}\n`); + console.warn(`MUI Grid: ${getLegacyGridWarning(prop)}\n`); } }); } diff --git a/scripts/generateCodeowners.mjs b/scripts/generateCodeowners.mjs index 01f8e3e346925b..7f6a6d7e45f744 100644 --- a/scripts/generateCodeowners.mjs +++ b/scripts/generateCodeowners.mjs @@ -57,7 +57,7 @@ const componentAreas = { formlabel: 'inputs', globalstyles: 'utils', gridlegacy: 'layout', - grid2: 'layout', + grid: 'layout', grow: 'utils', hidden: 'layout', icon: 'dataDisplay', diff --git a/test/regressions/fixtures/GridLegacy/Issue43707.js b/test/regressions/fixtures/Grid/Issue43707.js similarity index 98% rename from test/regressions/fixtures/GridLegacy/Issue43707.js rename to test/regressions/fixtures/Grid/Issue43707.js index 66daf1955f6d07..394c9984bc11cf 100644 --- a/test/regressions/fixtures/GridLegacy/Issue43707.js +++ b/test/regressions/fixtures/Grid/Issue43707.js @@ -3,7 +3,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/test/regressions/fixtures/GridLegacy/StressNestedGrid2.js b/test/regressions/fixtures/Grid/StressNestedGrid.js similarity index 96% rename from test/regressions/fixtures/GridLegacy/StressNestedGrid2.js rename to test/regressions/fixtures/Grid/StressNestedGrid.js index 63b9d66e59bae0..c04af06c7f0a9b 100644 --- a/test/regressions/fixtures/GridLegacy/StressNestedGrid2.js +++ b/test/regressions/fixtures/Grid/StressNestedGrid.js @@ -1,9 +1,9 @@ import * as React from 'react'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid2'; +import Grid from '@mui/material/Grid'; -export default function StressNestedGrid2() { +export default function StressNestedGrid() { return ( From 9aa5cef0d257f9e40a677751ff5cc3d193bdd43f Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 21 Feb 2025 09:57:17 -0300 Subject: [PATCH 2/6] Replace GridLegacy internal usage --- .../scenarios/grid-material-ui/index.js | 10 +- .../components/tooltip/PositionedTooltips.js | 22 ++--- .../components/tooltip/PositionedTooltips.tsx | 22 ++--- .../components/chips/ChipsPlayground.js | 52 ++++++++--- .../components/icons/SvgMaterialIcons.js | 93 ++++++++++--------- .../components/icons/SvgMaterialIcons.tsx | 93 ++++++++++--------- .../components/lists/InteractiveList.js | 30 +++++- .../components/lists/InteractiveList.tsx | 30 +++++- .../components/material-icons/SearchIcons.js | 26 ++++-- .../material/components/paper/Elevation.js | 52 ++++++----- .../material/components/paper/Elevation.tsx | 52 ++++++----- .../components/popover/AnchorPlayground.js | 46 +++++++-- .../components/popper/PositionedPopper.js | 22 ++--- .../components/popper/PositionedPopper.tsx | 22 ++--- .../components/popper/ScrollPlayground.js | 18 ++-- .../components/skeleton/SkeletonChildren.js | 6 +- .../components/skeleton/SkeletonChildren.tsx | 6 +- .../skeleton/SkeletonChildren.tsx.preview | 4 +- .../components/skeleton/SkeletonTypography.js | 6 +- .../skeleton/SkeletonTypography.tsx | 6 +- .../skeleton/SkeletonTypography.tsx.preview | 4 +- .../material/components/skeleton/YouTube.js | 2 +- .../material/components/skeleton/YouTube.tsx | 2 +- .../material/components/slider/InputSlider.js | 8 +- .../components/slider/InputSlider.tsx | 8 +- .../components/snackbars/DirectionSnackbar.js | 6 +- .../snackbars/DirectionSnackbar.tsx | 6 +- .../snackbars/PositionedSnackbar.js | 10 +- .../snackbars/PositionedSnackbar.tsx | 10 +- .../components/stack/InteractiveStack.js | 10 +- .../components/stack/InteractiveStack.tsx | 10 +- docs/data/material/components/stack/stack.md | 2 +- .../components/tooltips/PositionedTooltips.js | 22 ++--- .../tooltips/PositionedTooltips.tsx | 22 ++--- .../components/tooltips/TriggersTooltips.js | 10 +- .../components/tooltips/TriggersTooltips.tsx | 10 +- .../transfer-list/SelectAllTransferList.js | 8 +- .../transfer-list/SelectAllTransferList.tsx | 8 +- .../components/transfer-list/TransferList.js | 8 +- .../components/transfer-list/TransferList.tsx | 8 +- .../customization/breakpoints/breakpoints.md | 2 +- .../material/customization/color/ColorTool.js | 20 +++- .../customization/dark-mode/DarkTheme.js | 4 +- .../customization/density/DensityTool.js | 12 +-- .../customization/palette/Intentions.js | 4 +- .../templates/checkout/components/Review.js | 2 +- .../templates/checkout/components/Review.tsx | 2 +- .../components/LogoCollection.js | 4 +- .../components/LogoCollection.tsx | 4 +- .../guides/responsive-ui/responsive-ui.md | 2 +- docs/data/system/palette/BackgroundColor.js | 65 +++++++++++-- docs/data/system/palette/BackgroundColor.tsx | 65 +++++++++++-- docs/data/system/shadows/ShadowsDemo.js | 2 +- docs/data/system/shadows/ShadowsDemo.tsx | 2 +- .../productBaseUI/BaseUICustomization.tsx | 16 +++- docs/src/layouts/HeroContainer.tsx | 35 +++++-- .../modules/components/BaseUIComponents.js | 11 ++- .../modules/components/MaterialShowcase.js | 2 +- .../MaterialDataDisplayComponents.js | 11 ++- .../MaterialFeedbackComponents.js | 11 ++- .../MaterialInputComponents.js | 11 ++- .../MaterialLabComponents.js | 11 ++- .../MaterialLayoutComponents.js | 11 ++- .../MaterialNavigationComponents.js | 11 ++- .../MaterialSurfaceComponents.js | 11 ++- docs/src/modules/sandbox/Dependencies.test.js | 4 +- .../gridCustomBreakpoints.spec.tsx | 22 ++++- .../gridLegacyCustomBreakpoints.spec.tsx | 37 ++++++++ .../gridLegacyCustomBreakpoints.tsconfig.json | 4 + .../material-ui/components.spec.tsx | 26 +++++- .../mui-styles/defaultTheme.spec.ts | 2 +- .../fixtures/Menu/MenuContentAnchors.js | 4 +- .../fixtures/Tooltip/PositionedTooltips.js | 16 ++-- .../fixtures/Tooltip/PositionedTooltipsRtl.js | 16 ++-- 74 files changed, 803 insertions(+), 451 deletions(-) create mode 100644 packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.spec.tsx create mode 100644 packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.tsconfig.json diff --git a/benchmark/browser/scenarios/grid-material-ui/index.js b/benchmark/browser/scenarios/grid-material-ui/index.js index 0d6fd89f42668f..d429860b087abd 100644 --- a/benchmark/browser/scenarios/grid-material-ui/index.js +++ b/benchmark/browser/scenarios/grid-material-ui/index.js @@ -1,11 +1,17 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; export default function GridMaterialUI() { return ( {new Array(1000).fill().map(() => ( - + test case ))} diff --git a/docs/data/joy/components/tooltip/PositionedTooltips.js b/docs/data/joy/components/tooltip/PositionedTooltips.js index 525425b61fb7b7..6df74955502732 100644 --- a/docs/data/joy/components/tooltip/PositionedTooltips.js +++ b/docs/data/joy/components/tooltip/PositionedTooltips.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Button from '@mui/joy/Button'; import Tooltip from '@mui/joy/Tooltip'; @@ -8,7 +8,7 @@ export default function PositionedTooltips() { return ( - + @@ -21,7 +21,7 @@ export default function PositionedTooltips() { - + @@ -34,24 +34,18 @@ export default function PositionedTooltips() { - - + + - + - + @@ -59,7 +53,7 @@ export default function PositionedTooltips() { - + diff --git a/docs/data/joy/components/tooltip/PositionedTooltips.tsx b/docs/data/joy/components/tooltip/PositionedTooltips.tsx index 525425b61fb7b7..6df74955502732 100644 --- a/docs/data/joy/components/tooltip/PositionedTooltips.tsx +++ b/docs/data/joy/components/tooltip/PositionedTooltips.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/joy/Box'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Button from '@mui/joy/Button'; import Tooltip from '@mui/joy/Tooltip'; @@ -8,7 +8,7 @@ export default function PositionedTooltips() { return ( - + @@ -21,7 +21,7 @@ export default function PositionedTooltips() { - + @@ -34,24 +34,18 @@ export default function PositionedTooltips() { - - + + - + - + @@ -59,7 +53,7 @@ export default function PositionedTooltips() { - + diff --git a/docs/data/material/components/chips/ChipsPlayground.js b/docs/data/material/components/chips/ChipsPlayground.js index 4b3f30a9d4c294..74f0ac2b7921c0 100644 --- a/docs/data/material/components/chips/ChipsPlayground.js +++ b/docs/data/material/components/chips/ChipsPlayground.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; import FormControlLabel from '@mui/material/FormControlLabel'; @@ -91,9 +91,9 @@ function ChipsPlayground() { return ( - + - ({ height: theme.spacing(10) })}> + ({ height: theme.spacing(10) })}> - + - + variant - + color - + size - + icon - + avatar - + onDelete - + diff --git a/docs/data/material/components/icons/SvgMaterialIcons.js b/docs/data/material/components/icons/SvgMaterialIcons.js index db2788b95232ac..411e4e67ffe3b6 100644 --- a/docs/data/material/components/icons/SvgMaterialIcons.js +++ b/docs/data/material/components/icons/SvgMaterialIcons.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import DeleteIcon from '@mui/icons-material/Delete'; import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; @@ -17,50 +18,52 @@ import ThreeSixtyIcon from '@mui/icons-material/ThreeSixty'; export default function SvgMaterialIcons() { return ( - - - Filled + + + + Filled + + + + + + + Outlined + + + + + + + Rounded + + + + + + + Two Tone + + + + + + + Sharp + + + + + + + Edge-cases + + + + + + - - - - - - Outlined - - - - - - - Rounded - - - - - - - Two Tone - - - - - - - Sharp - - - - - - - Edge-cases - - - - - - - + ); } diff --git a/docs/data/material/components/icons/SvgMaterialIcons.tsx b/docs/data/material/components/icons/SvgMaterialIcons.tsx index db2788b95232ac..411e4e67ffe3b6 100644 --- a/docs/data/material/components/icons/SvgMaterialIcons.tsx +++ b/docs/data/material/components/icons/SvgMaterialIcons.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import DeleteIcon from '@mui/icons-material/Delete'; import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; @@ -17,50 +18,52 @@ import ThreeSixtyIcon from '@mui/icons-material/ThreeSixty'; export default function SvgMaterialIcons() { return ( - - - Filled + + + + Filled + + + + + + + Outlined + + + + + + + Rounded + + + + + + + Two Tone + + + + + + + Sharp + + + + + + + Edge-cases + + + + + + - - - - - - Outlined - - - - - - - Rounded - - - - - - - Two Tone - - - - - - - Sharp - - - - - - - Edge-cases - - - - - - - + ); } diff --git a/docs/data/material/components/lists/InteractiveList.js b/docs/data/material/components/lists/InteractiveList.js index 2bacfb182e537c..556c0c5bce91d3 100644 --- a/docs/data/material/components/lists/InteractiveList.js +++ b/docs/data/material/components/lists/InteractiveList.js @@ -11,7 +11,7 @@ import IconButton from '@mui/material/IconButton'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import FolderIcon from '@mui/icons-material/Folder'; import DeleteIcon from '@mui/icons-material/Delete'; @@ -55,7 +55,12 @@ export default function InteractiveList() { /> - + Text only @@ -72,7 +77,12 @@ export default function InteractiveList() { - + Icon with text @@ -94,7 +104,12 @@ export default function InteractiveList() { - + Avatar with text @@ -116,7 +131,12 @@ export default function InteractiveList() { - + Avatar with text and icon diff --git a/docs/data/material/components/lists/InteractiveList.tsx b/docs/data/material/components/lists/InteractiveList.tsx index 884b509ae328c2..171652aad302be 100644 --- a/docs/data/material/components/lists/InteractiveList.tsx +++ b/docs/data/material/components/lists/InteractiveList.tsx @@ -11,7 +11,7 @@ import IconButton from '@mui/material/IconButton'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import FolderIcon from '@mui/icons-material/Folder'; import DeleteIcon from '@mui/icons-material/Delete'; @@ -55,7 +55,12 @@ export default function InteractiveList() { /> - + Text only @@ -72,7 +77,12 @@ export default function InteractiveList() { - + Icon with text @@ -94,7 +104,12 @@ export default function InteractiveList() { - + Avatar with text @@ -116,7 +131,12 @@ export default function InteractiveList() { - + Avatar with text and icon diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js index e2bda5b71d2569..6f25b55adcf6ab 100644 --- a/docs/data/material/components/material-icons/SearchIcons.js +++ b/docs/data/material/components/material-icons/SearchIcons.js @@ -5,7 +5,7 @@ import copy from 'clipboard-copy'; import InputBase from '@mui/material/InputBase'; import Typography from '@mui/material/Typography'; import PropTypes from 'prop-types'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; @@ -410,17 +410,17 @@ const DialogDetails = React.memo(function DialogDetails(props) { - + - + - + - + - + - +

    Filter the style @@ -632,7 +637,12 @@ export default function SearchIcons() {
    - + diff --git a/docs/data/material/components/paper/Elevation.js b/docs/data/material/components/paper/Elevation.js index acea3a69ab2ac9..54ea48b9412772 100644 --- a/docs/data/material/components/paper/Elevation.js +++ b/docs/data/material/components/paper/Elevation.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; @@ -17,29 +17,31 @@ const lightTheme = createTheme({ palette: { mode: 'light' } }); export default function Elevation() { return ( - - {[lightTheme, darkTheme].map((theme, index) => ( - - - - {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => ( - - {`elevation=${elevation}`} - - ))} - - - - ))} - + + + {[lightTheme, darkTheme].map((theme, index) => ( + + + + {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => ( + + {`elevation=${elevation}`} + + ))} + + + + ))} + + ); } diff --git a/docs/data/material/components/paper/Elevation.tsx b/docs/data/material/components/paper/Elevation.tsx index acea3a69ab2ac9..54ea48b9412772 100644 --- a/docs/data/material/components/paper/Elevation.tsx +++ b/docs/data/material/components/paper/Elevation.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; @@ -17,29 +17,31 @@ const lightTheme = createTheme({ palette: { mode: 'light' } }); export default function Elevation() { return ( - - {[lightTheme, darkTheme].map((theme, index) => ( - - - - {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => ( - - {`elevation=${elevation}`} - - ))} - - - - ))} - + + + {[lightTheme, darkTheme].map((theme, index) => ( + + + + {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => ( + + {`elevation=${elevation}`} + + ))} + + + + ))} + + ); } diff --git a/docs/data/material/components/popover/AnchorPlayground.js b/docs/data/material/components/popover/AnchorPlayground.js index 55b8cfb2597254..930de543cfb074 100644 --- a/docs/data/material/components/popover/AnchorPlayground.js +++ b/docs/data/material/components/popover/AnchorPlayground.js @@ -4,7 +4,7 @@ import FormLabel from '@mui/material/FormLabel'; import FormControlLabel from '@mui/material/FormControlLabel'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import { green } from '@mui/material/colors'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; @@ -125,7 +125,7 @@ function AnchorPlayground() { return (
    - + @@ -167,7 +167,12 @@ function AnchorPlayground() { The content of the Popover. - + anchorReference - + anchorPosition.top - + anchorOrigin.vertical - + transformOrigin.vertical - + anchorOrigin.horizontal - + transformOrigin.horizontal - + - +

    - - + + - + - + - + diff --git a/docs/data/material/components/popper/PositionedPopper.tsx b/docs/data/material/components/popper/PositionedPopper.tsx index f74512014fe04c..db8f008cb1c247 100644 --- a/docs/data/material/components/popper/PositionedPopper.tsx +++ b/docs/data/material/components/popper/PositionedPopper.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Popper, { PopperPlacementType } from '@mui/material/Popper'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import Fade from '@mui/material/Fade'; import Paper from '@mui/material/Paper'; @@ -39,40 +39,34 @@ export default function PositionedPopper() { )} - + - +

    - - + + - + - + - + diff --git a/docs/data/material/components/popper/ScrollPlayground.js b/docs/data/material/components/popper/ScrollPlayground.js index 82bd6bdebe58a9..0657576cd6c594 100644 --- a/docs/data/material/components/popper/ScrollPlayground.js +++ b/docs/data/material/components/popper/ScrollPlayground.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import FormControlLabel from '@mui/material/FormControlLabel'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; @@ -333,13 +333,13 @@ export default function ScrollPlayground() { - - + + Appearance - + bottom-end - + - + Modifiers (options from Popper.js) - - + + Prevent Overflow - + Flip - + - + diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx b/docs/data/material/components/skeleton/SkeletonChildren.tsx index 6e3ecb7aa5bbd1..74623d91bafe82 100644 --- a/docs/data/material/components/skeleton/SkeletonChildren.tsx +++ b/docs/data/material/components/skeleton/SkeletonChildren.tsx @@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Avatar from '@mui/material/Avatar'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Skeleton from '@mui/material/Skeleton'; const Image = styled('img')({ @@ -52,10 +52,10 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) { export default function SkeletonChildren() { return ( - + - + diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview b/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview index 394fbb978f2ade..0463b633476667 100644 --- a/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview +++ b/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview @@ -1,8 +1,8 @@ - + - + \ No newline at end of file diff --git a/docs/data/material/components/skeleton/SkeletonTypography.js b/docs/data/material/components/skeleton/SkeletonTypography.js index 51069c10b52500..c59a67afc583ce 100644 --- a/docs/data/material/components/skeleton/SkeletonTypography.js +++ b/docs/data/material/components/skeleton/SkeletonTypography.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import Typography from '@mui/material/Typography'; import Skeleton from '@mui/material/Skeleton'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; const variants = ['h1', 'h3', 'body1', 'caption']; @@ -27,10 +27,10 @@ TypographyDemo.propTypes = { export default function SkeletonTypography() { return ( - + - + diff --git a/docs/data/material/components/skeleton/SkeletonTypography.tsx b/docs/data/material/components/skeleton/SkeletonTypography.tsx index 2f03417dcf0ed3..59eeed83a1d457 100644 --- a/docs/data/material/components/skeleton/SkeletonTypography.tsx +++ b/docs/data/material/components/skeleton/SkeletonTypography.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Typography, { TypographyProps } from '@mui/material/Typography'; import Skeleton from '@mui/material/Skeleton'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; const variants = [ 'h1', @@ -27,10 +27,10 @@ function TypographyDemo(props: { loading?: boolean }) { export default function SkeletonTypography() { return ( - + - + diff --git a/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview b/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview index 76d74e6034bba7..06037c529af923 100644 --- a/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview +++ b/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview @@ -1,8 +1,8 @@ - + - + \ No newline at end of file diff --git a/docs/data/material/components/skeleton/YouTube.js b/docs/data/material/components/skeleton/YouTube.js index 856342edbd89a9..92dc192be70cf3 100644 --- a/docs/data/material/components/skeleton/YouTube.js +++ b/docs/data/material/components/skeleton/YouTube.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Skeleton from '@mui/material/Skeleton'; diff --git a/docs/data/material/components/skeleton/YouTube.tsx b/docs/data/material/components/skeleton/YouTube.tsx index ac5c237990d808..dff86e1facffb5 100644 --- a/docs/data/material/components/skeleton/YouTube.tsx +++ b/docs/data/material/components/skeleton/YouTube.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Skeleton from '@mui/material/Skeleton'; diff --git a/docs/data/material/components/slider/InputSlider.js b/docs/data/material/components/slider/InputSlider.js index f5c0cf92e28067..55fd60e3efecb1 100644 --- a/docs/data/material/components/slider/InputSlider.js +++ b/docs/data/material/components/slider/InputSlider.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Slider from '@mui/material/Slider'; import MuiInput from '@mui/material/Input'; @@ -36,17 +36,17 @@ export default function InputSlider() { Volume - + - + - + - + - + - + Up - + - + diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.tsx b/docs/data/material/components/snackbars/DirectionSnackbar.tsx index 798bb028d2cbb6..2957aac5a35d2f 100644 --- a/docs/data/material/components/snackbars/DirectionSnackbar.tsx +++ b/docs/data/material/components/snackbars/DirectionSnackbar.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import Snackbar from '@mui/material/Snackbar'; import Slide, { SlideProps } from '@mui/material/Slide'; @@ -44,10 +44,10 @@ export default function DirectionSnackbar() { - + - + diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.js b/docs/data/material/components/snackbars/PositionedSnackbar.js index 9f970ce498b94f..c170cb55f53969 100644 --- a/docs/data/material/components/snackbars/PositionedSnackbar.js +++ b/docs/data/material/components/snackbars/PositionedSnackbar.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Snackbar from '@mui/material/Snackbar'; @@ -28,22 +28,22 @@ export default function PositionedSnackbar() { - + - + - + - + diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.tsx b/docs/data/material/components/snackbars/PositionedSnackbar.tsx index 84c5885c521b52..98941a590d6762 100644 --- a/docs/data/material/components/snackbars/PositionedSnackbar.tsx +++ b/docs/data/material/components/snackbars/PositionedSnackbar.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar'; @@ -32,22 +32,22 @@ export default function PositionedSnackbar() { - + - + - + - + diff --git a/docs/data/material/components/stack/InteractiveStack.js b/docs/data/material/components/stack/InteractiveStack.js index c2699b6241456b..a2cb0dbc66fd68 100644 --- a/docs/data/material/components/stack/InteractiveStack.js +++ b/docs/data/material/components/stack/InteractiveStack.js @@ -2,7 +2,7 @@ import * as React from 'react'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; import FormControlLabel from '@mui/material/FormControlLabel'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; @@ -54,7 +54,7 @@ export default function InteractiveStack() { - + direction - + alignItems - + justifyContent - + spacing - + direction - + alignItems - + justifyContent - + spacing - + @@ -21,7 +21,7 @@ export default function PositionedTooltips() { - + @@ -34,24 +34,18 @@ export default function PositionedTooltips() { - - + + - + - + @@ -59,7 +53,7 @@ export default function PositionedTooltips() { - + diff --git a/docs/data/material/components/tooltips/PositionedTooltips.tsx b/docs/data/material/components/tooltips/PositionedTooltips.tsx index d04679d4e04cc7..3f66c60b513dc0 100644 --- a/docs/data/material/components/tooltips/PositionedTooltips.tsx +++ b/docs/data/material/components/tooltips/PositionedTooltips.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import Tooltip from '@mui/material/Tooltip'; @@ -8,7 +8,7 @@ export default function PositionedTooltips() { return ( - + @@ -21,7 +21,7 @@ export default function PositionedTooltips() { - + @@ -34,24 +34,18 @@ export default function PositionedTooltips() { - - + + - + - + @@ -59,7 +53,7 @@ export default function PositionedTooltips() { - + diff --git a/docs/data/material/components/tooltips/TriggersTooltips.js b/docs/data/material/components/tooltips/TriggersTooltips.js index 9cf7db0b9420d5..80b932ea9f9284 100644 --- a/docs/data/material/components/tooltips/TriggersTooltips.js +++ b/docs/data/material/components/tooltips/TriggersTooltips.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import Tooltip from '@mui/material/Tooltip'; import ClickAwayListener from '@mui/material/ClickAwayListener'; @@ -18,22 +18,22 @@ export default function TriggersTooltips() { return (
    - + - + - + - +
    - + - + - + - +
    - {customList('Choices', left)} - + {customList('Choices', left)} + diff --git a/docs/data/material/customization/dark-mode/DarkTheme.js b/docs/data/material/customization/dark-mode/DarkTheme.js index 4e447b617f0228..15db5953c188bf 100644 --- a/docs/data/material/customization/dark-mode/DarkTheme.js +++ b/docs/data/material/customization/dark-mode/DarkTheme.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; import { styled, ThemeProvider, useTheme, createTheme } from '@mui/material/styles'; @@ -30,7 +30,7 @@ function Demo() { const theme = useTheme(); const item = (color, name, expanded = false, border = false) => ( - +
    - + - - + + {t('spacingUnit')} - + - + diff --git a/docs/data/material/customization/palette/Intentions.js b/docs/data/material/customization/palette/Intentions.js index fcde8513920abe..d9aa7b430d8dfb 100644 --- a/docs/data/material/customization/palette/Intentions.js +++ b/docs/data/material/customization/palette/Intentions.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import { createTheme, @@ -30,7 +30,7 @@ function IntentionsInner() { const theme = useTheme(); const item = (color, name) => ( - +
    {name} diff --git a/docs/data/material/getting-started/templates/checkout/components/Review.js b/docs/data/material/getting-started/templates/checkout/components/Review.js index 71cd9ae5d54110..91ebcb4eb7a16e 100644 --- a/docs/data/material/getting-started/templates/checkout/components/Review.js +++ b/docs/data/material/getting-started/templates/checkout/components/Review.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Divider from '@mui/material/Divider'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemText from '@mui/material/ListItemText'; diff --git a/docs/data/material/getting-started/templates/checkout/components/Review.tsx b/docs/data/material/getting-started/templates/checkout/components/Review.tsx index 71cd9ae5d54110..91ebcb4eb7a16e 100644 --- a/docs/data/material/getting-started/templates/checkout/components/Review.tsx +++ b/docs/data/material/getting-started/templates/checkout/components/Review.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Divider from '@mui/material/Divider'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemText from '@mui/material/ListItemText'; diff --git a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js index 56ae010338d0a3..96d1bffa50a0ec 100644 --- a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js +++ b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import { useTheme } from '@mui/system'; const whiteLogos = [ @@ -45,7 +45,7 @@ export default function LogoCollection() { {logos.map((logo, index) => ( - + {`Fake {logos.map((logo, index) => ( - + {`Fake - + primary.main - + secondary.main - + error.main - + warning.main - + info.main - + success.main - + text.primary - + text.secondary - + text.disabled diff --git a/docs/data/system/palette/BackgroundColor.tsx b/docs/data/system/palette/BackgroundColor.tsx index 67b8e7ee5ded31..41993dc6945b37 100644 --- a/docs/data/system/palette/BackgroundColor.tsx +++ b/docs/data/system/palette/BackgroundColor.tsx @@ -1,53 +1,98 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; export default function BackgroundColor() { return ( - + primary.main - + secondary.main - + error.main - + warning.main - + info.main - + success.main - + text.primary - + text.secondary - + text.disabled diff --git a/docs/data/system/shadows/ShadowsDemo.js b/docs/data/system/shadows/ShadowsDemo.js index f02ef874113cd8..c067fb2d3c0386 100644 --- a/docs/data/system/shadows/ShadowsDemo.js +++ b/docs/data/system/shadows/ShadowsDemo.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; export default function ShadowsDemo() { diff --git a/docs/data/system/shadows/ShadowsDemo.tsx b/docs/data/system/shadows/ShadowsDemo.tsx index f02ef874113cd8..c067fb2d3c0386 100644 --- a/docs/data/system/shadows/ShadowsDemo.tsx +++ b/docs/data/system/shadows/ShadowsDemo.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; export default function ShadowsDemo() { diff --git a/docs/src/components/productBaseUI/BaseUICustomization.tsx b/docs/src/components/productBaseUI/BaseUICustomization.tsx index 60357372d16940..4143a95f91a892 100644 --- a/docs/src/components/productBaseUI/BaseUICustomization.tsx +++ b/docs/src/components/productBaseUI/BaseUICustomization.tsx @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import clsx from 'clsx'; import { Switch as SwitchUnstyled } from '@mui/base/Switch'; import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import { HighlightedCode } from '@mui/docs/HighlightedCode'; import SvgTwinkle from 'docs/src/icons/SvgTwinkle'; @@ -235,7 +235,12 @@ export default function BaseUICustomization() { return (
    - + - + ({ diff --git a/docs/src/layouts/HeroContainer.tsx b/docs/src/layouts/HeroContainer.tsx index 373707ff3f4e2f..807f1a2db38ac9 100644 --- a/docs/src/layouts/HeroContainer.tsx +++ b/docs/src/layouts/HeroContainer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box, { BoxProps } from '@mui/material/Box'; import Container from '@mui/material/Container'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; import { alpha } from '@mui/material/styles'; @@ -102,10 +102,6 @@ export default function HeroContainer(props: HeroContainerProps) { > {left} - + {renderRightWrapper({ height: { xs: 'initial', @@ -149,14 +157,21 @@ export default function HeroContainer(props: HeroContainerProps) { container sx={{ alignItems: 'center', flexWrap: 'nowrap', height: '100%', mx: 'auto' }} > - + {left} {renderRightWrapper()} diff --git a/docs/src/modules/components/BaseUIComponents.js b/docs/src/modules/components/BaseUIComponents.js index 9b4d07248f3551..668255626ff4a8 100644 --- a/docs/src/modules/components/BaseUIComponents.js +++ b/docs/src/modules/components/BaseUIComponents.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Card from '@mui/material/Card'; import CardMedia from '@mui/material/CardMedia'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import { alpha } from '@mui/material/styles'; import { Link } from '@mui/docs/Link'; @@ -136,7 +136,14 @@ export default function BaseUIComponents() { return ( {components().map((component, index) => ( - + item[sortFunctionName] !== undefined) .sort(sortFunction) .map((app) => ( - + {app.image ? ( {dataDisplayComponents.map( ({ name, link, srcLight, srcDark, md1, md2, md3, noGuidelines }) => ( - + {feedbackComponents.map(({ name, link, srcLight, srcDark, md1, md2, md3, noGuidelines }) => ( - + {inputComponents.map(({ name, link, srcLight, srcDark, md1, md2, md3, noGuidelines }) => ( - + {labComponents.map(({ name, link, srcLight, srcDark, md1, md2, md3, noGuidelines }) => ( - + {layoutComponents.map(({ name, link, srcLight, srcDark, md1, md2, md3, noGuidelines }) => ( - + {navigationComponents.map( ({ name, link, srcLight, srcDark, md1, md2, md3, noGuidelines }) => ( - + {surfaceComponents.map(({ name, link, srcLight, srcDark, md1, md2, md3, noGuidelines }) => ( - + - + ; - {/* @ts-expect-error unknown desk */} - + ; diff --git a/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.spec.tsx new file mode 100644 index 00000000000000..9fb682d4b9d023 --- /dev/null +++ b/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.spec.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import Grid from '@mui/material/GridLegacy'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; + +declare module '@mui/material/styles' { + interface BreakpointOverrides { + xs: false; + sm: false; + md: false; + lg: false; + xl: false; + mobile: true; + tablet: true; + laptop: true; + desktop: true; + } +} + +const theme = createTheme({ + breakpoints: { + values: { + mobile: 0, + tablet: 640, + laptop: 1024, + desktop: 1280, + }, + }, +}); + + + +; + + + {/* @ts-expect-error unknown desk */} + +; diff --git a/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.tsconfig.json b/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.tsconfig.json new file mode 100644 index 00000000000000..f416986760b496 --- /dev/null +++ b/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../../tsconfig.json", + "files": ["gridLegacyCustomBreakpoints.spec.tsx"] +} diff --git a/test/integration/material-ui/components.spec.tsx b/test/integration/material-ui/components.spec.tsx index 589973e016d6ae..5566b734002960 100644 --- a/test/integration/material-ui/components.spec.tsx +++ b/test/integration/material-ui/components.spec.tsx @@ -34,6 +34,7 @@ import { Fade, FormControlLabel, FormGroup, + Grid, GridLegacy, ImageList, ImageListItem, @@ -530,7 +531,7 @@ function AccordionTest() { ); } -function GridTest() { +function GridLegacyTest() { return ( @@ -549,6 +550,29 @@ function GridTest() { ); } +function GridTest() { + return ( + + ... + + ... + + + ... + + ... + + ); +} + function ImageListTest() { return ( log(event)}> diff --git a/test/integration/mui-styles/defaultTheme.spec.ts b/test/integration/mui-styles/defaultTheme.spec.ts index c21e413efbc4f1..ea5e965f407dc9 100644 --- a/test/integration/mui-styles/defaultTheme.spec.ts +++ b/test/integration/mui-styles/defaultTheme.spec.ts @@ -1,5 +1,5 @@ import { useTheme, makeStyles, styled } from '@mui/styles'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import { expectType } from '@mui/types'; declare module '@mui/styles' { diff --git a/test/regressions/fixtures/Menu/MenuContentAnchors.js b/test/regressions/fixtures/Menu/MenuContentAnchors.js index 54f2fee990c05e..11ab1e8d4f5392 100644 --- a/test/regressions/fixtures/Menu/MenuContentAnchors.js +++ b/test/regressions/fixtures/Menu/MenuContentAnchors.js @@ -1,6 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; @@ -19,7 +19,7 @@ function SimpleMenu({ selectedItem, ...props }) { const [anchorEl, setAnchorEl] = React.useState(null); return ( - + @@ -22,7 +22,7 @@ function PositionedTooltips() { - + @@ -35,18 +35,18 @@ function PositionedTooltips() { - - + + - + - + @@ -54,7 +54,7 @@ function PositionedTooltips() { - + diff --git a/test/regressions/fixtures/Tooltip/PositionedTooltipsRtl.js b/test/regressions/fixtures/Tooltip/PositionedTooltipsRtl.js index ce1ef2854e3ed3..f3ac6c0424fc16 100644 --- a/test/regressions/fixtures/Tooltip/PositionedTooltipsRtl.js +++ b/test/regressions/fixtures/Tooltip/PositionedTooltipsRtl.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/GridLegacy'; +import Grid from '@mui/material/Grid'; import Button from '@mui/material/Button'; import Tooltip from '@mui/material/Tooltip'; import { prefixer } from 'stylis'; @@ -25,7 +25,7 @@ export default function PositionedTooltipsRtl() { - + @@ -38,7 +38,7 @@ export default function PositionedTooltipsRtl() { - + @@ -51,18 +51,18 @@ export default function PositionedTooltipsRtl() { - - + + - + - + @@ -70,7 +70,7 @@ export default function PositionedTooltipsRtl() { - + From 47f331232c5a2f6b1e3f65916acbcba777d63518 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 21 Feb 2025 12:40:25 -0300 Subject: [PATCH 3/6] Add grid-props codemod --- packages/mui-codemod/README.md | 34 +++ packages/mui-codemod/src/v7.0.0/all/v7-all.js | 6 +- .../src/v7.0.0/grid-props/grid-props.js | 218 ++++++++++++++++++ .../src/v7.0.0/grid-props/grid-props.test.js | 23 ++ .../src/v7.0.0/grid-props/index.js | 1 + .../v7.0.0/grid-props/test-cases/actual.js | 48 ++++ .../test-cases/custom-breakpoints.actual.js | 7 + .../test-cases/custom-breakpoints.expected.js | 17 ++ .../v7.0.0/grid-props/test-cases/expected.js | 81 +++++++ 9 files changed, 433 insertions(+), 2 deletions(-) create mode 100644 packages/mui-codemod/src/v7.0.0/grid-props/grid-props.js create mode 100644 packages/mui-codemod/src/v7.0.0/grid-props/grid-props.test.js create mode 100644 packages/mui-codemod/src/v7.0.0/grid-props/index.js create mode 100644 packages/mui-codemod/src/v7.0.0/grid-props/test-cases/actual.js create mode 100644 packages/mui-codemod/src/v7.0.0/grid-props/test-cases/custom-breakpoints.actual.js create mode 100644 packages/mui-codemod/src/v7.0.0/grid-props/test-cases/custom-breakpoints.expected.js create mode 100644 packages/mui-codemod/src/v7.0.0/grid-props/test-cases/expected.js diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 59b97aa4a5941e..a8881703ecba91 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -2073,6 +2073,40 @@ npx @mui/codemod@latest deprecations/typography-props ### v7.0.0 +#### `grid-props` + + + +```bash +npx @mui/codemod@next v7.0.0/grid-props +``` + +Updates the usage of the `@mui/material/Grid`, `@mui/system/Grid`, and `@mui/joy/Grid` components to their updated APIs. + +```diff + +``` + +You can provide the theme breakpoints via options, for example, `--jscodeshift='--muiBreakpoints=mobile,desktop'`, to use your custom breakpoints in the transformation. + + + +```bash +npx @mui/codemod@next v7.0.0/grid-props --jscodeshift='--muiBreakpoints=mobile,desktop' +``` + +```diff +- ++ +``` + #### `lab-removed-components` diff --git a/packages/mui-codemod/src/v7.0.0/all/v7-all.js b/packages/mui-codemod/src/v7.0.0/all/v7-all.js index 9f4129a3568d9d..87ceb1009ac7a9 100644 --- a/packages/mui-codemod/src/v7.0.0/all/v7-all.js +++ b/packages/mui-codemod/src/v7.0.0/all/v7-all.js @@ -1,10 +1,12 @@ -import labRemovedComponents from '../lab-removed-components'; +import gridPropsTransform from '../grid-props'; +import labRemovedComponentsTransform from '../lab-removed-components'; /** * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ export default function v7All(file, api, options) { - labRemovedComponents(file, api, options); + gridPropsTransform(file, api, options); + labRemovedComponentsTransform(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.js b/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.js new file mode 100644 index 00000000000000..80489159772310 --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.js @@ -0,0 +1,218 @@ +const possibleDefaultImports = ['@mui/material/Grid', '@mui/system/Grid', '@mui/joy/Grid']; +const possibleNamedImports = { + '@mui/material': 'Grid', + '@mui/system': 'Grid', + '@mui/joy': 'Grid', +}; + +const defaultBreakpoints = ['xs', 'sm', 'md', 'lg', 'xl']; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function gridV2Props(file, api, options) { + if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) { + return file.source; + } + const j = api.jscodeshift; + const root = j(file.source); + const breakpoints = options.muiBreakpoints?.split(',') || defaultBreakpoints; + const printOptions = options.printOptions; + + const gridLocalNames = []; + + root + .find(j.ImportDeclaration, (decl) => possibleDefaultImports.includes(decl.source.value)) + .forEach((decl) => { + decl.node.specifiers.forEach((spec) => { + if (spec.type === 'ImportDefaultSpecifier') { + gridLocalNames.push(spec.local.name); + } + }); + }); + + root + .find(j.ImportDeclaration, (decl) => + Object.keys(possibleNamedImports).includes(decl.source.value), + ) + .forEach((decl) => { + decl.node.specifiers.forEach((spec) => { + if (spec.type === 'ImportSpecifier') { + if (possibleNamedImports[decl.node.source.value] === spec.imported.name) { + gridLocalNames.push(spec.local.name); + } + } + }); + }); + + root + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => gridLocalNames.includes(name), + }, + }, + }) + .forEach((el) => { + const size = j.objectExpression([]); + + const spreadProps = []; + const attributesToPrune = []; + + el.node.openingElement.attributes.forEach((attr) => { + if (attr.type === 'JSXSpreadAttribute') { + spreadProps.push(attr); + } + }); + + const breakpointNodes = j(el) + .find(j.JSXAttribute) + .filter( + (path) => + path.parent.parent.node === el.node && breakpoints.includes(path.node.name.name), + ); + + breakpointNodes.nodes().forEach((node) => { + const breakpoint = node.name.name; + const nodeValue = node.value; + let value; + + if (nodeValue === null) { + value = j.stringLiteral('grow'); + } else if (nodeValue.type === 'JSXExpressionContainer') { + if (nodeValue.expression.value === true) { + value = j.stringLiteral('grow'); + } else { + value = nodeValue.expression; + } + } else { + value = nodeValue; + } + + size.properties.push(j.property('init', j.identifier(breakpoint), value)); + }); + + spreadProps.forEach((spreadProp) => { + const spreadPropArgument = spreadProp.argument; + if (spreadPropArgument.type === 'ObjectExpression') { + const propertiesToPrune = []; + spreadPropArgument.properties.forEach((property) => { + if (breakpoints.includes(property.key.name)) { + size.properties.push(j.property('init', property.key, property.value)); + propertiesToPrune.push(property.key.name); + } + }); + spreadPropArgument.properties = spreadPropArgument.properties.filter( + (prop) => !propertiesToPrune.includes(prop.key.name), + ); + if (spreadPropArgument.properties.length === 0) { + attributesToPrune.push(spreadProp); + } + } + }); + + if (size.properties.length) { + let sizePropValue = size; + if (size.properties.length === 1 && size.properties[0].key.name === 'xs') { + sizePropValue = size.properties[0].value; + } + if (sizePropValue.type !== 'StringLiteral') { + sizePropValue = j.jsxExpressionContainer(sizePropValue); + } + + el.node.openingElement.attributes.push( + j.jsxAttribute(j.jsxIdentifier('size'), sizePropValue), + ); + } + + el.node.openingElement.attributes = el.node.openingElement.attributes.filter( + (attr) => !breakpoints.includes(attr?.name?.name), + ); + + const offset = j.objectExpression([]); + + const offsetNodes = j(el) + .find(j.JSXAttribute) + .filter( + (path) => + path.parent.parent.node === el.node && + path.node.name.name.endsWith('Offset') && + breakpoints.includes(path.node.name.name.replace('Offset', '')), + ); + + offsetNodes.nodes().forEach((node) => { + const breakpoint = node.name.name.replace('Offset', ''); + const value = + node.value.type === 'JSXExpressionContainer' ? node.value.expression : node.value; + + offset.properties.push(j.property('init', j.identifier(breakpoint), value)); + }); + + spreadProps.forEach((spreadProp) => { + const spreadPropArgument = spreadProp.argument; + if (spreadPropArgument.type === 'ObjectExpression') { + const propertiesToPrune = []; + spreadPropArgument.properties.forEach((property) => { + const breakpoint = property.key.name.replace('Offset', ''); + if (property.key.name.endsWith('Offset') && breakpoints.includes(breakpoint)) { + offset.properties.push(j.property('init', j.identifier(breakpoint), property.value)); + propertiesToPrune.push(property.key.name); + } + }); + spreadPropArgument.properties = spreadPropArgument.properties.filter( + (prop) => !propertiesToPrune.includes(prop.key.name), + ); + if (spreadPropArgument.properties.length === 0) { + attributesToPrune.push(spreadProp); + } + } + }); + + if (offset.properties.length) { + let offsetPropValue = offset; + + if (offset.properties.length === 1 && offset.properties[0].key.name === 'xs') { + offsetPropValue = offset.properties[0].value; + } + + if (offsetPropValue.type !== 'StringLiteral') { + offsetPropValue = j.jsxExpressionContainer(offsetPropValue); + } + + el.node.openingElement.attributes.push( + j.jsxAttribute(j.jsxIdentifier('offset'), offsetPropValue), + ); + } + + el.node.openingElement.attributes = el.node.openingElement.attributes.filter( + (attr) => !breakpoints.includes(attr?.name?.name.replace('Offset', '')), + ); + + el.node.openingElement.attributes = el.node.openingElement.attributes.filter( + (attr) => !attributesToPrune.includes(attr), + ); + + const itemProp = el.node.openingElement.attributes.find( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'item', + ); + + if (itemProp) { + el.node.openingElement.attributes = el.node.openingElement.attributes.filter( + (attr) => attr.type === 'JSXAttribute' && attr.name.name !== 'item', + ); + } + + const zeroMinWidthProp = el.node.openingElement.attributes.find( + (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'zeroMinWidth', + ); + + if (zeroMinWidthProp) { + el.node.openingElement.attributes = el.node.openingElement.attributes.filter( + (attr) => attr.type === 'JSXAttribute' && attr.name.name !== 'zeroMinWidth', + ); + } + }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.test.js b/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.test.js new file mode 100644 index 00000000000000..6e4592ca8a25e5 --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/grid-props/grid-props.test.js @@ -0,0 +1,23 @@ +import { describeJscodeshiftTransform } from '../../../testUtils'; +import transform from './grid-props'; + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describeJscodeshiftTransform({ + transform, + transformName: 'grid-props', + dirname: __dirname, + testCases: [ + { + actual: '/test-cases/actual.js', + expected: '/test-cases/expected.js', + }, + { + actual: '/test-cases/custom-breakpoints.actual.js', + expected: '/test-cases/custom-breakpoints.expected.js', + options: { muiBreakpoints: 'customXs,customSm,customMd' }, + }, + ], + }); + }); +}); diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/index.js b/packages/mui-codemod/src/v7.0.0/grid-props/index.js new file mode 100644 index 00000000000000..35a6d621882e1f --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/grid-props/index.js @@ -0,0 +1 @@ +export { default } from './grid-props'; diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/actual.js b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/actual.js new file mode 100644 index 00000000000000..bdbebfae79ba22 --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/actual.js @@ -0,0 +1,48 @@ +import GridA from '@mui/material/Grid'; +import GridLegacyA from '@mui/material/GridLegacy'; +import GridB from '@mui/system/Grid'; +import GridC from '@mui/joy/Grid'; +import { Grid as GridD, GridLegacy as GridLegacyB } from '@mui/material'; +import { Grid as GridE } from '@mui/system'; +import { Grid as GridF } from '@mui/joy'; + +// Transforms on all the possible imports +; +; +; +; +; +; + +; +; +; + +; +; +; + +// Transforms responsive sizes +; + +// Transforms all the possible size values +; + +// Doesn't add jsx object expression for single string values +; + +// Transforms offset +; + +// Transforms responsive offset +; + +// Transforms all the possible offset values +; + +// Transforms spread props +; + +// Doesn't transform Grid v1 +; +; diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/custom-breakpoints.actual.js b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/custom-breakpoints.actual.js new file mode 100644 index 00000000000000..fbe26075a82f67 --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/custom-breakpoints.actual.js @@ -0,0 +1,7 @@ +import Grid from '@mui/material/Grid'; + +// Transforms custom breakpoints +; + +// Transforms custom breakpoints offset +; diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/custom-breakpoints.expected.js b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/custom-breakpoints.expected.js new file mode 100644 index 00000000000000..aa9e274215d380 --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/custom-breakpoints.expected.js @@ -0,0 +1,17 @@ +import Grid from '@mui/material/Grid'; + +// Transforms custom breakpoints +; + +// Transforms custom breakpoints offset +; diff --git a/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/expected.js b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/expected.js new file mode 100644 index 00000000000000..8d97769dce72e4 --- /dev/null +++ b/packages/mui-codemod/src/v7.0.0/grid-props/test-cases/expected.js @@ -0,0 +1,81 @@ +import GridA from '@mui/material/Grid'; +import GridLegacyA from '@mui/material/GridLegacy'; +import GridB from '@mui/system/Grid'; +import GridC from '@mui/joy/Grid'; +import { Grid as GridD, GridLegacy as GridLegacyB } from '@mui/material'; +import { Grid as GridE } from '@mui/system'; +import { Grid as GridF } from '@mui/joy'; + +// Transforms on all the possible imports +; +; +; +; +; +; + +; +; +; + +; +; +; + +// Transforms responsive sizes +; + +// Transforms all the possible size values +; + +// Doesn't add jsx object expression for single string values +; + +// Transforms offset +; + +// Transforms responsive offset +; + +// Transforms all the possible offset values +; + +// Transforms spread props +; + +// Doesn't transform Grid v1 +; +; From eb50f834b184147d7717b242934e6cb9f2c7a31b Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 21 Feb 2025 13:01:04 -0300 Subject: [PATCH 4/6] Update grid v2 upgrade guide --- .../upgrade-to-grid-v2/upgrade-to-grid-v2.md | 82 ++++++++++++++----- 1 file changed, 62 insertions(+), 20 deletions(-) diff --git a/docs/data/material/migration/upgrade-to-grid-v2/upgrade-to-grid-v2.md b/docs/data/material/migration/upgrade-to-grid-v2/upgrade-to-grid-v2.md index 43345dc6d48a5f..760ad69b3a6451 100644 --- a/docs/data/material/migration/upgrade-to-grid-v2/upgrade-to-grid-v2.md +++ b/docs/data/material/migration/upgrade-to-grid-v2/upgrade-to-grid-v2.md @@ -1,22 +1,22 @@ -# Upgrade to Grid2 +# Upgrade to Grid v2 -

    This guide explains how and why to migrate from the Grid component to the Grid2 component.

    +

    This guide explains how and why to migrate from the GridLegacy component to the Grid component.

    ## Grid component versions -In Material UI v7, the legacy Grid component has been deprecated and replaced by Grid2, which offers several new features as well as significant improvements to the developer experience. -This guide explains how to upgrade from Grid to Grid2, and includes details for Material UI v5, v6, and v7. +In Material UI v7, the GridLegacy component has been deprecated and replaced by Grid, which offers several new features as well as significant improvements to the developer experience. +This guide explains how to upgrade from GridLegacy to Grid, and includes details for Material UI v5, v6, and v7. ## Why you should upgrade -Grid2 provides the following improvements over the legacy Grid: +Grid provides the following improvements over GridLegacy: - It uses CSS variables, removing CSS specificity from class selectors. - You can use `sx` prop on Grid2 to control any style you'd like. + You can use `sx` prop to control any style you'd like. - All grids are considered items without specifying the `item` prop. -- The [offset feature](/material-ui/react-grid2/#offset) gives you more flexibility for positioning. -- [Nested grids](/material-ui/react-grid2/#nested-grid) now have no depth limitation. -- Its implementation doesn't use negative margins so it doesn't [overflow like the legacy Grid](/material-ui/react-grid-legacy/#negative-margin). +- The [offset feature](/material-ui/react-grid/#offset) gives you more flexibility for positioning. +- [Nested grids](/material-ui/react-grid/#nested-grid) now have no depth limitation. +- Its implementation doesn't use negative margins so it doesn't [overflow like GridLegacy](/material-ui/react-grid-legacy/#negative-margin). ## How to upgrade @@ -37,8 +37,8 @@ Depending on the Material UI version you are using, you must update the import // The legacy Grid component is named GridLegacy -import Grid from '@mui/material/GridLegacy'; -// The updated Grid component is named Grid2 -+import Grid from '@mui/material/Grid2'; +// The updated Grid component is named Grid ++import Grid from '@mui/material/Grid'; ``` @@ -76,7 +76,7 @@ You can safely remove them: Skip this step if you're using Material UI v5. ::: -In the legacy Grid, the size props were named to correspond with the theme's breakpoints. +In the GridLegacy component, the size props were named to correspond with the theme's breakpoints. For the default theme, these were `xs`, `sm`, `md`, `lg`, and `xl`. Starting from Material UI v6, these props are renamed to `size` on the updated Grid: @@ -105,10 +105,22 @@ Additionally, the `true` value for the size props was renamed to `"grow"`: You can use the following codemod to update the size props: + + +```bash v7 +npx @mui/codemod@next v7.0.0/grid-props +``` + ```bash v6 npx @mui/codemod@latest v6.0.0/grid-v2-props ``` +```text v5 +Skip this step if you're using Material UI v5. +``` + + + :::warning The codemod requires [updating the imports](#update-the-import) beforehand. ::: @@ -119,7 +131,7 @@ The codemod requires [updating the imports](#update-the-import) beforehand. Skip this step if you're using Material UI v6 or v7. ::: -If you're using Material UI v5 and want to apply the negative margins similar to the legacy Grid, specify `disableEqualOverflow={true}` on the grid container. +If you're using Material UI v5 and want to apply the negative margins similar to GridLegacy, specify `disableEqualOverflow={true}` on the grid container. To apply to all grids, add the default props to the theme: ```js @@ -151,15 +163,45 @@ function Demo() { ### Column direction -Using `direction="column"` or `direction="column-reverse"` is not supported on [the legacy Grid](/material-ui/react-grid-legacy/#direction-column-column-reverse) nor on [the updated Grid2](/material-ui/react-grid2/#column-direction). -If your layout used the legacy Grid with these values, it might break when you switch to the updated Grid. -If you need a vertical layout, follow the instructions in the [Grid2 documentation](/material-ui/react-grid2/#column-direction). +Using `direction="column"` or `direction="column-reverse"` is not supported on [GridLegacy](/material-ui/react-grid-legacy/#direction-column-column-reverse) nor on [the updated Grid](/material-ui/react-grid/#column-direction). +If your layout used GridLegacy with these values, it might break when you switch to the updated Grid. +If you need a vertical layout, follow the instructions in the [Grid documentation](/material-ui/react-grid/#column-direction). + +### Container width + +The updated Grid component doesn't grow to the full width of the container by default. +If you need the grid to grow to the full width, you can use the `sx` prop: + +```diff +- ++ + + // alternatively, if the Grid's parent is a flex container: +- ++ +``` + +### Codemod not covering wrapped Grid components + +The provided codemods won't cover Grid components which are wrapped in other components or styled: + +```jsx +// The codemod won't cover StyledGrid +const StyledGrid = styled(Grid)({ + // styles +}); + +// The codemod won't cover WrappedGrid +const WrappedGrid = (props) => ; +``` + +You'll need to manually update these components. ## Documentation pages -- Grid2: - - [Documentation](/material-ui/react-grid2/) - - [API](/material-ui/api/grid-2/) -- Legacy Grid: +- Grid: + - [Documentation](/material-ui/react-grid/) + - [API](/material-ui/api/grid/) +- GridLegacy: - [Documentation](/material-ui/react-grid-legacy/) - [API](/material-ui/api/grid-legacy/) From 990d919352a7df99153ca8b02eaa4020eb1cda01 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 21 Feb 2025 13:21:28 -0300 Subject: [PATCH 5/6] Add section to upgrade to v7 guide --- .../migration/upgrade-to-v7/upgrade-to-v7.md | 93 +++++++++++++------ 1 file changed, 63 insertions(+), 30 deletions(-) diff --git a/docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md b/docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md index 5cbe7ed7e9e137..751274bf09398d 100644 --- a/docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md +++ b/docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md @@ -69,38 +69,71 @@ If you were using a Vite alias to force ESM imports for the icons package, you s }, ``` -### Grid renamed to GridLegacy +### Grid and Grid2 renamed The deprecated `Grid` component has been renamed to `GridLegacy`. -If you wish to continue using this legacy component, update your imports as follows: - -```diff --import Grid, { gridClasses, GridProps } from '@mui/material/Grid'; -+import Grid, { gridLegacyClasses, GridLegacyProps } from '@mui/material/GridLegacy'; - --import { Grid } from '@mui/material'; -+import { GridLegacy as Grid } from '@mui/material'; -``` - -This also applies to the theme's `components` object: - -```diff - const theme = createTheme({ - components: { -- MuiGrid: { -+ MuiGridLegacy: { - // ... - }, - }, - }); -``` - -As well as the component's CSS classes: - -```diff --.MuiGrid-root -+.MuiGridLegacy-root -``` +The `Grid2` component has been moved to the `Grid` namespace. +Depending on your project, you may follow one of the following approaches: + +1. **If you are using the deprecated grid and wish to upgrade,** run the following codemod: + + + + ```bash + npx @mui/codemod@next v7.0.0/grid-props + ``` + + See the [Grid upgrade guide](/material-ui/migration/upgrade-to-grid-v2/) for more information. + +2. **If you are using the deprecated grid and wish to continue using it,** update the `Grid` references as follows: + + ```diff + // imports + -import Grid, { gridClasses, GridProps } from '@mui/material/Grid'; + +import Grid, { gridLegacyClasses, GridLegacyProps } from '@mui/material/GridLegacy'; + + -import { Grid } from '@mui/material'; + +import { GridLegacy as Grid } from '@mui/material'; + + // theme + const theme = createTheme({ + components: { + - MuiGrid: { + + MuiGridLegacy: { + // ... + }, + }, + }); + + // CSS classes + -.MuiGrid-root + +.MuiGridLegacy-root + ``` + +3. **If you are using Grid2,** update the `Grid2` references as follows: + + ```diff + // imports + -import Grid, { grid2Classes as gridClasses, Grid2Props as GridProps } from '@mui/material/Grid2'; + +import Grid, { gridClasses, GridProps } from '@mui/material/Grid'; + + -import { Grid2 as Grid } from '@mui/material'; + +import { Grid } from '@mui/material'; + + // theme + const theme = createTheme({ + components: { + - MuiGrid2: { + + MuiGrid: { + // ... + }, + }, + }); + + // CSS classes + -.MuiGrid2-root + +.MuiGrid-root + ``` ### Hidden and PigmentHidden components removed From 399e87defe8d96e0bb7b2e08ac7bd83cc98c7477 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 21 Feb 2025 15:23:06 -0300 Subject: [PATCH 6/6] Trigger CI