-`;
-
- return (
-
-
-
- {[0, 1, 2].map((value) => (
-
- ({
- height: 140,
- width: 100,
- backgroundColor: '#fff',
- ...theme.applyStyles('dark', {
- backgroundColor: '#1A2027',
- }),
- })}
- />
-
- ))}
-
-
-
-
-
-
-
- spacing
-
- {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
-
-
-
-
-
-
-
- );
-}
diff --git a/docs/data/material/components/grid-legacy/VariableWidthGrid.js b/docs/data/material/components/grid-legacy/VariableWidthGrid.js
deleted file mode 100644
index d7b3698bdfff46..00000000000000
--- a/docs/data/material/components/grid-legacy/VariableWidthGrid.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/GridLegacy';
-
-const Item = styled(Paper)(({ theme }) => ({
- backgroundColor: '#fff',
- ...theme.typography.body2,
- padding: theme.spacing(1),
- textAlign: 'center',
- color: (theme.vars ?? theme).palette.text.secondary,
- ...theme.applyStyles('dark', {
- backgroundColor: '#1A2027',
- }),
-}));
-
-export default function VariableWidthGrid() {
- return (
-
-
-
- - variable width content
-
-
- - xs=6
-
-
- - xs
-
-
-
- );
-}
diff --git a/docs/data/material/components/grid-legacy/VariableWidthGrid.tsx b/docs/data/material/components/grid-legacy/VariableWidthGrid.tsx
deleted file mode 100644
index d7b3698bdfff46..00000000000000
--- a/docs/data/material/components/grid-legacy/VariableWidthGrid.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/GridLegacy';
-
-const Item = styled(Paper)(({ theme }) => ({
- backgroundColor: '#fff',
- ...theme.typography.body2,
- padding: theme.spacing(1),
- textAlign: 'center',
- color: (theme.vars ?? theme).palette.text.secondary,
- ...theme.applyStyles('dark', {
- backgroundColor: '#1A2027',
- }),
-}));
-
-export default function VariableWidthGrid() {
- return (
-
-
-
- - variable width content
-
-
- - xs=6
-
-
- - xs
-
-
-
- );
-}
diff --git a/docs/data/material/components/grid-legacy/VariableWidthGrid.tsx.preview b/docs/data/material/components/grid-legacy/VariableWidthGrid.tsx.preview
deleted file mode 100644
index c52b1f2156b45e..00000000000000
--- a/docs/data/material/components/grid-legacy/VariableWidthGrid.tsx.preview
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
- - variable width content
-
-
- - xs=6
-
-
- - xs
-
-
\ No newline at end of file
diff --git a/docs/data/material/components/grid-legacy/grid-legacy.md b/docs/data/material/components/grid-legacy/grid-legacy.md
deleted file mode 100644
index 7089dc28342b65..00000000000000
--- a/docs/data/material/components/grid-legacy/grid-legacy.md
+++ /dev/null
@@ -1,209 +0,0 @@
----
-productId: material-ui
-title: React GridLegacy component
-components: GridLegacy
-githubLabel: 'component: Grid'
-materialDesign: https://m2.material.io/design/layout/understanding-layout.html
-githubSource: packages/mui-material/src/GridLegacy
----
-
-# GridLegacy
-
-The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
-
-The [grid](https://m2.material.io/design/layout/responsive-layout-grid.html) creates visual consistency between layouts while allowing flexibility across a wide variety of designs.
-Material Design's responsive UI is based on a 12-column grid layout.
-
-{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
-
-:::warning
-The `GridLegacy` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/x/react-data-grid/).
-:::
-
-:::warning
-The `GridLegacy` component has been deprecated.
-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
-
-The grid system is implemented with the `GridLegacy` component:
-
-- It uses [CSS's Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility.
-- There are two types of layout: _containers_ and _items_.
-- Item widths are set in percentages, so they're always fluid and sized relative to their parent element.
-- Items have padding to create the spacing between individual items.
-- There are five grid breakpoints: xs, sm, md, lg, and xl.
-- Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the [breakpoint constraints](/material-ui/customization/breakpoints/#default-breakpoints).
-
-If you are **new to or unfamiliar with flexbox**, we encourage you to read this [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) guide.
-
-## Fluid grids
-
-Fluid grids use columns that scale and resize content. A fluid grid's layout can use breakpoints to determine if the layout needs to change dramatically.
-
-### Basic grid
-
-Column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.
-
-A value passed to any given breakpoint also applies to all wider breakpoints (if they have no values explicitly defined).
-For example, `xs={12}` sizes a component to occupy the full width of its parent container, regardless of the viewport size.
-
-{{"demo": "BasicGrid.js", "bg": true}}
-
-### Grid with multiple breakpoints
-
-Components may have multiple widths defined, causing the layout to change at the defined breakpoint. Width values given to larger breakpoints override those given to smaller breakpoints.
-
-For example, `xs={12} sm={6}` sizes a component to occupy half of the viewport width (6 columns) when viewport width is [600 or more pixels](/material-ui/customization/breakpoints/#default-breakpoints). For smaller viewports, the component fills all 12 available columns.
-
-{{"demo": "FullWidthGrid.js", "bg": true}}
-
-## Spacing
-
-To control space between children, use the `spacing` prop.
-The spacing value can be any positive number, including decimals and any string.
-The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper.
-
-{{"demo": "SpacingGrid.js", "bg": true}}
-
-### Row & column spacing
-
-The `rowSpacing` and `columnSpacing` props allow for specifying the row and column gaps independently.
-It's similar to the `row-gap` and `column-gap` properties of [CSS Grid](/system/grid/#row-gap-column-gap).
-
-{{"demo": "RowAndColumnSpacing.js", "bg": true}}
-
-## Responsive values
-
-You can switch the props' value based on the active breakpoint.
-For instance, we can implement the ["recommended"](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design.
-
-{{"demo": "ResponsiveGrid.js", "bg": true}}
-
-Responsive values is supported by:
-
-- `columns`
-- `columnSpacing`
-- `direction`
-- `rowSpacing`
-- `spacing`
-- all the [other props](#system-props) of MUI System
-
-:::warning
-When using a responsive `columns` prop, each grid item needs its corresponding breakpoint.
-For instance, this is not working. The grid item misses the value for `md`:
-
-```jsx
-
-
-```
-
-:::
-
-## Interactive
-
-Below is an interactive demo that lets you explore the visual results of the different settings:
-
-{{"demo": "InteractiveGrid.js", "hideToolbar": true, "bg": true}}
-
-## Auto-layout
-
-The Auto-layout makes the _items_ equitably share the available space.
-That also means you can set the width of one _item_ and the others will automatically resize around it.
-
-{{"demo": "AutoGrid.js", "bg": true}}
-
-### Variable width content
-
-Set one of the size breakpoint props to `"auto"` instead of `true` / a `number` to size
-a column based on the natural width of its content.
-
-{{"demo": "VariableWidthGrid.js", "bg": true}}
-
-## Complex Grid
-
-The following demo doesn't follow the Material Design guidelines, but illustrates how the grid can be used to build complex layouts.
-
-{{"demo": "ComplexGrid.js", "bg": true}}
-
-## Nested Grid
-
-The `container` and `item` props are two independent booleans; they can be combined to allow a Grid component to be both a flex container and child.
-
-:::info
-A flex **container** is the box generated by an element with a computed display of `flex` or `inline-flex`. In-flow children of a flex container are called flex **items** and are laid out using the flex layout model.
-:::
-
-https://www.w3.org/TR/css-flexbox-1/#box-model
-
-{{"demo": "NestedGrid.js", "bg": true}}
-
-⚠️ Defining an explicit width to a Grid element that is flex container, flex item, and has spacing at the same time leads to unexpected behavior, avoid doing it:
-
-```jsx
-
-```
-
-If you need to do such, remove one of the props.
-
-## Columns
-
-You can change the default number of columns (12) with the `columns` prop.
-
-{{"demo": "ColumnsGrid.js", "bg": true}}
-
-## Limitations
-
-### Negative margin
-
-The spacing between items is implemented with a negative margin. This might lead to unexpected behaviors. For instance, to apply a background color, you need to apply `display: flex;` to the parent.
-
-### white-space: nowrap
-
-The initial setting on flex items is `min-width: auto`.
-This causes a positioning conflict when children use `white-space: nowrap;`.
-You can reproduce the issue with:
-
-```jsx
-
-
-```
-
-In order for the item to stay within the container you need to set `min-width: 0`.
-In practice, you can set the `zeroMinWidth` prop:
-
-```jsx
-
-
-```
-
-{{"demo": "AutoGridNoWrap.js", "bg": true}}
-
-### direction: column | column-reverse
-
-The `xs`, `sm`, `md`, `lg`, and `xl` props are **not supported** within `direction="column"` and `direction="column-reverse"` containers.
-
-They define the number of grids the component will use for a given breakpoint. They are intended to control **width** using `flex-basis` in `row` containers but they will impact height in `column` containers.
-If used, these props may have undesirable effects on the height of the `GridLegacy` item elements.
-
-## CSS Grid Layout
-
-The `GridLegacy` component is using CSS flexbox internally.
-But as seen below, you can easily use [MUI System](/system/grid/) and CSS Grid to layout your pages.
-
-{{"demo": "CSSGrid.js", "bg": true}}
-
-## System props
-
-:::info
-System props are deprecated and will be removed in the next major release. Please use the `sx` prop instead.
-
-```diff
--
```
+### GridLegacy
+
+The `GridLegacy` component is **removed**, use the `Grid` component instead.
+
+The main API differences are:
+
+- The `item` prop is no longer needed.
+- The `xs`, `sm`, `md`, `lg`, `xl` props are replaced by the `size` prop.
+
+```diff
+-import Grid from '@mui/material/GridLegacy';
++import Grid from '@mui/material/Grid';
+
+
+-
++
+ ...
+
+
+```
+
+See the [Grid v2 migration guide](/material-ui/migration/upgrade-to-grid-v2/) for more details.
+
+`MuiGridLegacy` has also been removed from the theme `components` types (`ComponentsProps`, `ComponentsOverrides`, and `ComponentsVariants`).
+
### TablePagination numbers are formatted by default
Pagination numbers in `TablePagination` are now formatted using `Intl.NumberFormat` according to the locale.
diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts
index 3dd995459b93fa..6dd1a6128a4191 100644
--- a/docs/data/material/pages.ts
+++ b/docs/data/material/pages.ts
@@ -111,7 +111,6 @@ const pages: MuiPage[] = [
{ pathname: '/material-ui/react-box' },
{ pathname: '/material-ui/react-container' },
{ pathname: '/material-ui/react-grid' },
- { pathname: '/material-ui/react-grid-legacy', deprecated: true, title: 'GridLegacy' },
{ 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 95054641a8bbad..ee76034af9e54a 100644
--- a/docs/data/material/pagesApi.js
+++ b/docs/data/material/pagesApi.js
@@ -48,7 +48,6 @@ export default [
{ pathname: '/material-ui/api/form-label' },
{ pathname: '/material-ui/api/global-styles' },
{ pathname: '/material-ui/api/grid' },
- { pathname: '/material-ui/api/grid-legacy' },
{ pathname: '/material-ui/api/grow' },
{ pathname: '/material-ui/api/icon' },
{ pathname: '/material-ui/api/icon-button' },
diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md
index d02d0aefa84f5f..b658f754444257 100644
--- a/docs/pages/blog/2021-q2-update.md
+++ b/docs/pages/blog/2021-q2-update.md
@@ -48,25 +48,25 @@ Here are the most significant improvements since March 2021.
- ✨ The new style engine has unlocked problems on the `Grid` component that we couldn't solve before with JSS:
- We have added support for [row & column](https://mui.com/material-ui/react-grid-legacy/#row-column-spacing) spacing:
+ We have added support for [row & column](https://mui.com/material-ui/react-grid/#row-column-spacing) spacing:
```jsx
```
-We have added an alternative implementation that uses [CSS grid](https://mui.com/material-ui/react-grid-legacy/#css-grid-layout):
+We have added an alternative implementation that uses [CSS grid](https://mui.com/material-ui/react-grid/#css-grid-layout):
```jsx
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 a63eebaebd05d7..b2cebc1814c2ce 100644
--- a/docs/pages/blog/build-layouts-faster-with-grid-v2.md
+++ b/docs/pages/blog/build-layouts-faster-with-grid-v2.md
@@ -19,7 +19,7 @@ import Grid from '@mui/material/Grid'; // The updated grid, a.k.a. Grid v2
- To fix the migration pain points ([#26266](https://github.com/mui/material-ui/issues/29266) and [#31244](https://github.com/mui/material-ui/issues/31244)) for the grid component which is caused by the [implementation changes](https://github.com/mui/material-ui/pull/24332) introduced in v5.
- To add the long-awaited [offset feature](https://github.com/mui/material-ui/issues/11251) to the layout grid component.
- To remove the child combinator (`>`) from the grid item styles, which [complicates the customization](https://github.com/mui/material-ui/issues/28855) of the old grid.
-- To fix [the limitation on nested grids](https://mui.com/material-ui/react-grid-legacy/#nested-grid).
+- To fix [the limitation on nested grids](https://mui.com/material-ui/react-grid/#nested-grid).
- To eliminate the unnecessary `item` prop.
## What's new
diff --git a/docs/pages/material-ui/api/grid-legacy.js b/docs/pages/material-ui/api/grid-legacy.js
deleted file mode 100644
index bc5bee5b5cd220..00000000000000
--- a/docs/pages/material-ui/api/grid-legacy.js
+++ /dev/null
@@ -1,20 +0,0 @@
-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-legacy.json';
-
-export default function Page(props) {
- const { descriptions } = props;
- return {page} ;
-};
diff --git a/docs/src/modules/components/MaterialUIComponents/MaterialLayoutComponents.js b/docs/src/modules/components/MaterialUIComponents/MaterialLayoutComponents.js
index c83c186eaff593..7be46545c2af6f 100644
--- a/docs/src/modules/components/MaterialUIComponents/MaterialLayoutComponents.js
+++ b/docs/src/modules/components/MaterialUIComponents/MaterialLayoutComponents.js
@@ -22,16 +22,6 @@ const layoutComponents = [
md3: false,
noGuidelines: true,
},
- {
- name: 'GridLegacy',
- srcLight: '/static/material-ui/react-components/grid-light.png',
- srcDark: '/static/material-ui/react-components/grid-dark.png',
- link: '/material-ui/react-grid-legacy/',
- md1: false,
- md2: false,
- md3: false,
- noGuidelines: true,
- },
{
name: 'Grid',
srcLight: '/static/material-ui/react-components/grid-v2-light.png',
diff --git a/docs/src/pages/premium-themes/onepirate/SignUp.js b/docs/src/pages/premium-themes/onepirate/SignUp.js
index 9b82838b03d1a5..198bb1cc2017fe 100644
--- a/docs/src/pages/premium-themes/onepirate/SignUp.js
+++ b/docs/src/pages/premium-themes/onepirate/SignUp.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 Link from '@mui/material/Link';
import { Field, Form, FormSpy } from 'react-final-form';
import Typography from './modules/components/Typography';
@@ -55,7 +55,7 @@ function SignUp() {
{({ handleSubmit: handleSubmit2, submitting }) => (
-
+
-
+
(
-
+
-
+
-
+
-
+
-
+
-
+
Legal
@@ -86,7 +86,7 @@ export default function AppFooter() {
-
+
Language
@@ -108,7 +108,7 @@ export default function AppFooter() {
))}
-
+
{'Icons made by '}
-
+
-
+
-
+
-
+
Legal
@@ -86,7 +86,7 @@ export default function AppFooter() {
-
+
Language
@@ -108,7 +108,7 @@ export default function AppFooter() {
))}
-
+
{'Icons made by '}
-
+
-
+
-
+
1.
-
+
2.
-
+
3.
-
+
1.
-
+
2.
-
+
3.
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
Add user
diff --git a/docs/src/pages/premium-themes/paperbase/Content.tsx b/docs/src/pages/premium-themes/paperbase/Content.tsx
index e1aa27eda315d8..895aacee5ea222 100644
--- a/docs/src/pages/premium-themes/paperbase/Content.tsx
+++ b/docs/src/pages/premium-themes/paperbase/Content.tsx
@@ -2,7 +2,7 @@ import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/GridLegacy';
+import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Tooltip from '@mui/material/Tooltip';
@@ -21,10 +21,10 @@ export default function Content() {
>
-
+
-
+
-
+
Add user
diff --git a/docs/src/pages/premium-themes/paperbase/Header.js b/docs/src/pages/premium-themes/paperbase/Header.js
index 8293b063610521..59a184c8f6486d 100644
--- a/docs/src/pages/premium-themes/paperbase/Header.js
+++ b/docs/src/pages/premium-themes/paperbase/Header.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import AppBar from '@mui/material/AppBar';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
-import Grid from '@mui/material/GridLegacy';
+import Grid from '@mui/material/Grid';
import HelpIcon from '@mui/icons-material/Help';
import IconButton from '@mui/material/IconButton';
import Link from '@mui/material/Link';
@@ -25,7 +25,7 @@ function Header(props) {
-
+
-
+
-
+
-
+
@@ -77,12 +77,12 @@ function Header(props) {
>
-
+
Authentication
-
+
-
+
-
+
-
+
-
+
-
+
@@ -80,12 +80,12 @@ export default function Header(props: HeaderProps) {
>
-
+
Authentication
-
+
-
+
Griditem components. It overrides the value of the spacing prop."
- },
- "component": {
- "description": "The component used for the root node. Either a string to use a HTML element or a component."
- },
- "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."
- },
- "item": {
- "description": "If true, the component will have the flex item behavior. You should be wrapping items with a container ."
- },
- "lg": {
- "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the lg breakpoint and wider screens if not overridden."
- },
- "md": {
- "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the md breakpoint and wider screens if not overridden."
- },
- "rowSpacing": {
- "description": "Defines the vertical space between the type item components. It overrides the value of the spacing prop."
- },
- "sm": {
- "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the sm breakpoint and wider screens if not overridden."
- },
- "spacing": {
- "description": "Defines the space between the type item components. It can only be used on a type container component."
- },
- "sx": {
- "description": "The system prop that allows defining system overrides as well as additional CSS styles."
- },
- "wrap": {
- "description": "Defines the flex-wrap style property. It's applied for all screen sizes."
- },
- "xl": {
- "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the xl breakpoint and wider screens if not overridden."
- },
- "xs": {
- "description": "If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority."
- },
- "zeroMinWidth": {
- "description": "If true, it sets min-width: 0 on the item. Refer to the limitations section of the documentation to better understand the use case."
- }
- },
- "classDescriptions": {
- "container": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "container={true}"
- },
- "direction-xs-column": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "direction=\"column\""
- },
- "direction-xs-column-reverse": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "direction=\"column-reverse\""
- },
- "direction-xs-row-reverse": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "direction=\"row-reverse\""
- },
- "grid-xs-1": { "description": "" },
- "grid-xs-10": { "description": "" },
- "grid-xs-11": { "description": "" },
- "grid-xs-12": { "description": "" },
- "grid-xs-2": { "description": "" },
- "grid-xs-3": { "description": "" },
- "grid-xs-4": { "description": "" },
- "grid-xs-5": { "description": "" },
- "grid-xs-6": { "description": "" },
- "grid-xs-7": { "description": "" },
- "grid-xs-8": { "description": "" },
- "grid-xs-9": { "description": "" },
- "grid-xs-auto": { "description": "" },
- "grid-xs-true": { "description": "" },
- "item": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "item={true}"
- },
- "root": { "description": "Styles applied to the root element." },
- "spacing-xs-1": { "description": "" },
- "spacing-xs-10": { "description": "" },
- "spacing-xs-2": { "description": "" },
- "spacing-xs-3": { "description": "" },
- "spacing-xs-4": { "description": "" },
- "spacing-xs-5": { "description": "" },
- "spacing-xs-6": { "description": "" },
- "spacing-xs-7": { "description": "" },
- "spacing-xs-8": { "description": "" },
- "spacing-xs-9": { "description": "" },
- "wrap-xs-nowrap": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "wrap=\"nowrap\""
- },
- "wrap-xs-wrap-reverse": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "wrap=\"reverse\""
- },
- "zeroMinWidth": {
- "description": "Styles applied to {{nodeName}} if {{conditions}}.",
- "nodeName": "the root element",
- "conditions": "zeroMinWidth={true}"
- }
- }
-}
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 50a96eb9a31e38..3214e263f62dd8 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -105,7 +105,6 @@
"/material-ui/react-box": "Box",
"/material-ui/react-container": "Container",
"/material-ui/react-grid": "Grid",
- "/material-ui/react-grid-legacy": "GridLegacy",
"/material-ui/react-stack": "Stack",
"/material-ui/react-image-list": "Image List",
"utils": "Utils",
diff --git a/packages/mui-material/src/GridLegacy/GridLegacy.d.ts b/packages/mui-material/src/GridLegacy/GridLegacy.d.ts
deleted file mode 100644
index 0c468bc41b63bf..00000000000000
--- a/packages/mui-material/src/GridLegacy/GridLegacy.d.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-import * as React from 'react';
-import {
- ResponsiveStyleValue,
- SxProps,
- SystemProps,
- Breakpoint,
- BreakpointOverrides,
-} from '@mui/system';
-import { IfEquals } from '@mui/types';
-import { Theme } from '../styles';
-import { OverridableComponent, OverrideProps } from '../OverridableComponent';
-import { GridLegacyClasses } from './gridLegacyClasses';
-
-export type GridLegacyDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-
-export type GridLegacySpacing = number | string;
-
-export type GridLegacyWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-
-export type GridLegacySize = 'auto' | number;
-
-export interface RegularBreakpoints {
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for the `lg` breakpoint and wider screens if not overridden.
- * @default false
- */
- lg?: boolean | GridLegacySize | undefined;
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for the `md` breakpoint and wider screens if not overridden.
- * @default false
- */
- md?: boolean | GridLegacySize | undefined;
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for the `sm` breakpoint and wider screens if not overridden.
- * @default false
- */
- sm?: boolean | GridLegacySize | undefined;
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for the `xl` breakpoint and wider screens if not overridden.
- * @default false
- */
- xl?: boolean | GridLegacySize | undefined;
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for all the screen sizes with the lowest priority.
- * @default false
- */
- xs?: boolean | GridLegacySize | undefined;
-}
-
-type CustomBreakpoints = Partial>;
-
-interface BreakpointOverridesEmpty {}
-
-type Breakpoints = IfEquals<
- BreakpointOverrides,
- BreakpointOverridesEmpty,
- RegularBreakpoints,
- CustomBreakpoints
->;
-
-export interface GridLegacyOwnProps extends SystemProps, Breakpoints {
- /**
- * The content of the component.
- */
- children?: React.ReactNode;
- /**
- * Override or extend the styles applied to the component.
- */
- classes?: Partial | undefined;
- /**
- * The number of columns.
- * @default 12
- */
- columns?: ResponsiveStyleValue | undefined;
- /**
- * Defines the horizontal space between the type `item` components.
- * It overrides the value of the `spacing` prop.
- */
- columnSpacing?: ResponsiveStyleValue | undefined;
- /**
- * If `true`, the component will have the flex *container* behavior.
- * You should be wrapping *items* with a *container*.
- * @default false
- */
- container?: boolean | undefined;
- /**
- * Defines the `flex-direction` style property.
- * It is applied for all screen sizes.
- * @default 'row'
- */
- direction?: ResponsiveStyleValue | undefined;
- /**
- * If `true`, the component will have the flex *item* behavior.
- * You should be wrapping *items* with a *container*.
- * @default false
- */
- item?: boolean | undefined;
- /**
- * Defines the vertical space between the type `item` components.
- * It overrides the value of the `spacing` prop.
- */
- rowSpacing?: ResponsiveStyleValue | undefined;
- /**
- * Defines the space between the type `item` components.
- * It can only be used on a type `container` component.
- * @default 0
- */
- spacing?: ResponsiveStyleValue | undefined;
- /**
- * The system prop that allows defining system overrides as well as additional CSS styles.
- */
- sx?: SxProps | undefined;
- /**
- * Defines the `flex-wrap` style property.
- * It's applied for all screen sizes.
- * @default 'wrap'
- */
- wrap?: GridLegacyWrap | undefined;
- /**
- * If `true`, it sets `min-width: 0` on the item.
- * Refer to the limitations section of the documentation to better understand the use case.
- * @default false
- */
- zeroMinWidth?: boolean | undefined;
-}
-
-/**
- * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
- */
-export interface GridLegacyTypeMap<
- AdditionalProps = {},
- RootComponent extends React.ElementType = 'div',
-> {
- props: AdditionalProps & GridLegacyOwnProps;
- defaultComponent: RootComponent;
-}
-
-/**
- *
- * Demos:
- *
- * - [GridLegacy](https://next.mui.com/material-ui/react-grid-legacy/)
- *
- * API:
- *
- * - [GridLegacy API](https://next.mui.com/material-ui/api/grid-legacy/)
- *
- * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
- */
-declare const GridLegacy: OverridableComponent;
-
-/**
- * @deprecated Use the [`Grid`](https://mui.com/material-ui/react-grid/) component instead.
- */
-export type GridLegacyProps<
- RootComponent extends React.ElementType = GridLegacyTypeMap['defaultComponent'],
- AdditionalProps = {},
-> = OverrideProps, RootComponent> & {
- component?: React.ElementType | undefined;
-};
-
-export default GridLegacy;
diff --git a/packages/mui-material/src/GridLegacy/GridLegacy.js b/packages/mui-material/src/GridLegacy/GridLegacy.js
deleted file mode 100644
index 075475cafbd054..00000000000000
--- a/packages/mui-material/src/GridLegacy/GridLegacy.js
+++ /dev/null
@@ -1,660 +0,0 @@
-'use client';
-// A grid component using the following libs as inspiration.
-//
-// For the implementation:
-// - https://getbootstrap.com/docs/4.3/layout/grid/
-// - https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css
-// - https://github.com/roylee0704/react-flexbox-grid
-// - https://material.angularjs.org/latest/layout/introduction
-//
-// Follow this flexbox Guide to better understand the underlying model:
-// - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import {
- handleBreakpoints,
- unstable_resolveBreakpointValues as resolveBreakpointValues,
-} from '@mui/system';
-import { extendSxProp } from '@mui/system/styleFunctionSx';
-import composeClasses from '@mui/utils/composeClasses';
-import requirePropFactory from '../utils/requirePropFactory';
-import styled from '../styles/styled';
-import { useDefaultProps } from '../DefaultPropsProvider';
-import useTheme from '../styles/useTheme';
-import GridLegacyContext from './GridLegacyContext';
-import gridLegacyClasses, { getGridLegacyUtilityClass } from './gridLegacyClasses';
-
-let warnedOnce = false;
-
-function warnAboutDeprecatedGridLegacy() {
- if (!warnedOnce && process.env.NODE_ENV !== 'production') {
- warnedOnce = true;
- console.warn(
- 'MUI: The GridLegacy component is deprecated. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.\n',
- );
- }
-}
-
-export function generateGridLegacy({ theme, ownerState }) {
- let size;
-
- return theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
- // Use side effect over immutability for better performance.
- let styles = {};
- if (ownerState[breakpoint]) {
- size = ownerState[breakpoint];
- }
- if (!size) {
- return globalStyles;
- }
-
- if (size === true) {
- // For the auto layouting
- styles = {
- flexBasis: 0,
- flexGrow: 1,
- maxWidth: '100%',
- };
- } else if (size === 'auto') {
- styles = {
- flexBasis: 'auto',
- flexGrow: 0,
- flexShrink: 0,
- maxWidth: 'none',
- width: 'auto',
- };
- } else {
- const columnsBreakpointValues = resolveBreakpointValues({
- values: ownerState.columns,
- breakpoints: theme.breakpoints.values,
- });
-
- const columnValue =
- typeof columnsBreakpointValues === 'object'
- ? columnsBreakpointValues[breakpoint]
- : columnsBreakpointValues;
- if (columnValue === undefined || columnValue === null) {
- return globalStyles;
- }
- // Keep 7 significant numbers.
- const width = `${Math.round((size / columnValue) * 10e7) / 10e5}%`;
- let more = {};
-
- if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
- const themeSpacing = theme.spacing(ownerState.columnSpacing);
- if (themeSpacing !== '0px') {
- const fullWidth = `calc(${width} + ${themeSpacing})`;
- more = {
- flexBasis: fullWidth,
- maxWidth: fullWidth,
- };
- }
- }
-
- // Close to the bootstrap implementation:
- // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
- styles = {
- flexBasis: width,
- flexGrow: 0,
- maxWidth: width,
- ...more,
- };
- }
-
- // No need for a media query for the first size.
- if (theme.breakpoints.values[breakpoint] === 0) {
- Object.assign(globalStyles, styles);
- } else {
- globalStyles[theme.breakpoints.up(breakpoint)] = styles;
- }
- return globalStyles;
- }, {});
-}
-
-export function generateDirection({ theme, ownerState }) {
- const directionValues = resolveBreakpointValues({
- values: ownerState.direction,
- breakpoints: theme.breakpoints.values,
- });
-
- return handleBreakpoints({ theme }, directionValues, (propValue) => {
- const output = {
- flexDirection: propValue,
- };
-
- if (propValue.startsWith('column')) {
- output[`& > .${gridLegacyClasses.item}`] = {
- maxWidth: 'none',
- };
- }
-
- return output;
- });
-}
-
-/**
- * Extracts zero value breakpoint keys before a non-zero value breakpoint key.
- * @example { xs: 0, sm: 0, md: 2, lg: 0, xl: 0 } or [0, 0, 2, 0, 0]
- * @returns [xs, sm]
- */
-function extractZeroValueBreakpointKeys({ breakpoints, values }) {
- let nonZeroKey = '';
-
- Object.keys(values).forEach((key) => {
- if (nonZeroKey !== '') {
- return;
- }
-
- if (values[key] !== 0) {
- nonZeroKey = key;
- }
- });
-
- const sortedBreakpointKeysByValue = Object.keys(breakpoints).sort((a, b) => {
- return breakpoints[a] - breakpoints[b];
- });
-
- return sortedBreakpointKeysByValue.slice(0, sortedBreakpointKeysByValue.indexOf(nonZeroKey));
-}
-
-export function generateRowGap({ theme, ownerState }) {
- const { container, rowSpacing } = ownerState;
- let styles = {};
-
- if (container && rowSpacing !== 0) {
- const rowSpacingValues = resolveBreakpointValues({
- values: rowSpacing,
- breakpoints: theme.breakpoints.values,
- });
-
- let zeroValueBreakpointKeys;
- if (typeof rowSpacingValues === 'object') {
- zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
- breakpoints: theme.breakpoints.values,
- values: rowSpacingValues,
- });
- }
-
- styles = handleBreakpoints({ theme }, rowSpacingValues, (propValue, breakpoint) => {
- const themeSpacing = theme.spacing(propValue);
-
- if (themeSpacing !== '0px') {
- return {
- marginTop: `calc(-1 * ${themeSpacing})`,
- [`& > .${gridLegacyClasses.item}`]: {
- paddingTop: themeSpacing,
- },
- };
- }
-
- if (zeroValueBreakpointKeys?.includes(breakpoint)) {
- return {};
- }
-
- return {
- marginTop: 0,
- [`& > .${gridLegacyClasses.item}`]: {
- paddingTop: 0,
- },
- };
- });
- }
-
- return styles;
-}
-
-export function generateColumnGap({ theme, ownerState }) {
- const { container, columnSpacing } = ownerState;
- let styles = {};
-
- if (container && columnSpacing !== 0) {
- const columnSpacingValues = resolveBreakpointValues({
- values: columnSpacing,
- breakpoints: theme.breakpoints.values,
- });
-
- let zeroValueBreakpointKeys;
- if (typeof columnSpacingValues === 'object') {
- zeroValueBreakpointKeys = extractZeroValueBreakpointKeys({
- breakpoints: theme.breakpoints.values,
- values: columnSpacingValues,
- });
- }
-
- styles = handleBreakpoints({ theme }, columnSpacingValues, (propValue, breakpoint) => {
- const themeSpacing = theme.spacing(propValue);
- if (themeSpacing !== '0px') {
- const negativeValue = `calc(-1 * ${themeSpacing})`;
- return {
- width: `calc(100% + ${themeSpacing})`,
- marginLeft: negativeValue,
- [`& > .${gridLegacyClasses.item}`]: {
- paddingLeft: themeSpacing,
- },
- };
- }
-
- if (zeroValueBreakpointKeys?.includes(breakpoint)) {
- return {};
- }
-
- return {
- width: '100%',
- marginLeft: 0,
- [`& > .${gridLegacyClasses.item}`]: {
- paddingLeft: 0,
- },
- };
- });
- }
-
- return styles;
-}
-
-export function resolveSpacingStyles(spacing, breakpoints, styles = {}) {
- // undefined/null or `spacing` <= 0
- if (!spacing || spacing <= 0) {
- return [];
- }
- // in case of string/number `spacing`
- if (
- (typeof spacing === 'string' && !Number.isNaN(Number(spacing))) ||
- typeof spacing === 'number'
- ) {
- return [styles[`spacing-xs-${String(spacing)}`]];
- }
- // in case of object `spacing`
- const spacingStyles = [];
-
- breakpoints.forEach((breakpoint) => {
- const value = spacing[breakpoint];
-
- if (Number(value) > 0) {
- spacingStyles.push(styles[`spacing-${breakpoint}-${String(value)}`]);
- }
- });
-
- return spacingStyles;
-}
-
-// Default CSS values
-// flex: '0 1 auto',
-// flexDirection: 'row',
-// alignItems: 'flex-start',
-// flexWrap: 'nowrap',
-// justifyContent: 'flex-start',
-const GridLegacyRoot = styled('div', {
- name: 'MuiGridLegacy',
- slot: 'Root',
- overridesResolver: (props, styles) => {
- const { ownerState } = props;
- const { container, direction, item, spacing, wrap, zeroMinWidth, breakpoints } = ownerState;
-
- let spacingStyles = [];
-
- // in case of grid item
- if (container) {
- spacingStyles = resolveSpacingStyles(spacing, breakpoints, styles);
- }
-
- const breakpointsStyles = [];
-
- breakpoints.forEach((breakpoint) => {
- const value = ownerState[breakpoint];
-
- if (value) {
- breakpointsStyles.push(styles[`grid-${breakpoint}-${String(value)}`]);
- }
- });
-
- return [
- styles.root,
- container && styles.container,
- item && styles.item,
- zeroMinWidth && styles.zeroMinWidth,
- ...spacingStyles,
- direction !== 'row' && styles[`direction-xs-${String(direction)}`],
- wrap !== 'wrap' && styles[`wrap-xs-${String(wrap)}`],
- ...breakpointsStyles,
- ];
- },
-})(
- // FIXME(romgrk): Can't use memoTheme here
- ({ ownerState }) => ({
- boxSizing: 'border-box',
- ...(ownerState.container && {
- display: 'flex',
- flexWrap: 'wrap',
- width: '100%',
- }),
- ...(ownerState.item && {
- margin: 0, // For instance, it's useful when used with a `figure` element.
- }),
- ...(ownerState.zeroMinWidth && {
- minWidth: 0,
- }),
- ...(ownerState.wrap !== 'wrap' && {
- flexWrap: ownerState.wrap,
- }),
- }),
- generateDirection,
- generateRowGap,
- generateColumnGap,
- generateGridLegacy,
-);
-
-export function resolveSpacingClasses(spacing, breakpoints) {
- // undefined/null or `spacing` <= 0
- if (!spacing || spacing <= 0) {
- return [];
- }
- // in case of string/number `spacing`
- if (
- (typeof spacing === 'string' && !Number.isNaN(Number(spacing))) ||
- typeof spacing === 'number'
- ) {
- return [`spacing-xs-${String(spacing)}`];
- }
- // in case of object `spacing`
- const classes = [];
-
- breakpoints.forEach((breakpoint) => {
- const value = spacing[breakpoint];
-
- if (Number(value) > 0) {
- const className = `spacing-${breakpoint}-${String(value)}`;
-
- classes.push(className);
- }
- });
-
- return classes;
-}
-
-const useUtilityClasses = (ownerState) => {
- const { classes, container, direction, item, spacing, wrap, zeroMinWidth, breakpoints } =
- ownerState;
-
- let spacingClasses = [];
-
- // in case of grid item
- if (container) {
- spacingClasses = resolveSpacingClasses(spacing, breakpoints);
- }
-
- const breakpointsClasses = [];
-
- breakpoints.forEach((breakpoint) => {
- const value = ownerState[breakpoint];
-
- if (value) {
- breakpointsClasses.push(`grid-${breakpoint}-${String(value)}`);
- }
- });
-
- const slots = {
- root: [
- 'root',
- container && 'container',
- item && 'item',
- zeroMinWidth && 'zeroMinWidth',
- ...spacingClasses,
- direction !== 'row' && `direction-xs-${String(direction)}`,
- wrap !== 'wrap' && `wrap-xs-${String(wrap)}`,
- ...breakpointsClasses,
- ],
- };
-
- return composeClasses(slots, getGridLegacyUtilityClass, classes);
-};
-
-/**
- * @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' });
- const { breakpoints } = useTheme();
-
- const props = extendSxProp(themeProps);
- const {
- className,
- columns: columnsProp,
- columnSpacing: columnSpacingProp,
- component = 'div',
- container = false,
- direction = 'row',
- item = false,
- rowSpacing: rowSpacingProp,
- spacing = 0,
- wrap = 'wrap',
- zeroMinWidth = false,
- ...other
- } = props;
-
- React.useEffect(() => {
- warnAboutDeprecatedGridLegacy();
- }, []);
-
- const rowSpacing = rowSpacingProp || spacing;
- const columnSpacing = columnSpacingProp || spacing;
-
- const columnsContext = React.useContext(GridLegacyContext);
-
- // columns set with default breakpoint unit of 12
- const columns = container ? columnsProp || 12 : columnsContext;
-
- const breakpointsValues = {};
- const otherFiltered = { ...other };
-
- breakpoints.keys.forEach((breakpoint) => {
- if (other[breakpoint] != null) {
- breakpointsValues[breakpoint] = other[breakpoint];
- delete otherFiltered[breakpoint];
- }
- });
-
- const ownerState = {
- ...props,
- columns,
- container,
- direction,
- item,
- rowSpacing,
- columnSpacing,
- wrap,
- zeroMinWidth,
- spacing,
- ...breakpointsValues,
- breakpoints: breakpoints.keys,
- };
-
- const classes = useUtilityClasses(ownerState);
-
- return (
-
-
- );
-});
-
-GridLegacy.propTypes /* remove-proptypes */ = {
- // ┌────────────────────────────── Warning ──────────────────────────────┐
- // │ These PropTypes are generated from the TypeScript type definitions. │
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
- // └─────────────────────────────────────────────────────────────────────┘
- /**
- * The content of the component.
- */
- children: PropTypes.node,
- /**
- * Override or extend the styles applied to the component.
- */
- classes: PropTypes.object,
- /**
- * @ignore
- */
- className: PropTypes.string,
- /**
- * The number of columns.
- * @default 12
- */
- columns: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.number),
- PropTypes.number,
- PropTypes.object,
- ]),
- /**
- * Defines the horizontal space between the type `item` components.
- * It overrides the value of the `spacing` prop.
- */
- columnSpacing: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
- PropTypes.number,
- PropTypes.object,
- PropTypes.string,
- ]),
- /**
- * The component used for the root node.
- * Either a string to use a HTML element or a component.
- */
- component: PropTypes.elementType,
- /**
- * If `true`, the component will have the flex *container* behavior.
- * You should be wrapping *items* with a *container*.
- * @default false
- */
- container: PropTypes.bool,
- /**
- * Defines the `flex-direction` style property.
- * It is applied for all screen sizes.
- * @default 'row'
- */
- direction: PropTypes.oneOfType([
- PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
- PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
- PropTypes.object,
- ]),
- /**
- * If `true`, the component will have the flex *item* behavior.
- * You should be wrapping *items* with a *container*.
- * @default false
- */
- item: PropTypes.bool,
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for the `lg` breakpoint and wider screens if not overridden.
- * @default false
- */
- lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for the `md` breakpoint and wider screens if not overridden.
- * @default false
- */
- md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
- /**
- * Defines the vertical space between the type `item` components.
- * It overrides the value of the `spacing` prop.
- */
- rowSpacing: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
- PropTypes.number,
- PropTypes.object,
- PropTypes.string,
- ]),
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for the `sm` breakpoint and wider screens if not overridden.
- * @default false
- */
- sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
- /**
- * Defines the space between the type `item` components.
- * It can only be used on a type `container` component.
- * @default 0
- */
- spacing: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
- PropTypes.number,
- PropTypes.object,
- PropTypes.string,
- ]),
- /**
- * The system prop that allows defining system overrides as well as additional CSS styles.
- */
- sx: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
- PropTypes.func,
- PropTypes.object,
- ]),
- /**
- * Defines the `flex-wrap` style property.
- * It's applied for all screen sizes.
- * @default 'wrap'
- */
- wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for the `xl` breakpoint and wider screens if not overridden.
- * @default false
- */
- xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
- /**
- * If a number, it sets the number of columns the grid item uses.
- * It can't be greater than the total number of columns of the container (12 by default).
- * If 'auto', the grid item's width matches its content.
- * If false, the prop is ignored.
- * If true, the grid item's width grows to use the space available in the grid container.
- * The value is applied for all the screen sizes with the lowest priority.
- * @default false
- */
- xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
- /**
- * If `true`, it sets `min-width: 0` on the item.
- * Refer to the limitations section of the documentation to better understand the use case.
- * @default false
- */
- zeroMinWidth: PropTypes.bool,
-};
-
-if (process.env.NODE_ENV !== 'production') {
- const requireProp = requirePropFactory('GridLegacy', GridLegacy);
- // eslint-disable-next-line no-useless-concat
- GridLegacy['propTypes' + ''] = {
- // eslint-disable-next-line react/forbid-foreign-prop-types
- ...GridLegacy.propTypes,
- direction: requireProp('container'),
- lg: requireProp('item'),
- md: requireProp('item'),
- sm: requireProp('item'),
- spacing: requireProp('container'),
- wrap: requireProp('container'),
- xs: requireProp('item'),
- zeroMinWidth: requireProp('item'),
- };
-}
-
-export default GridLegacy;
diff --git a/packages/mui-material/src/GridLegacy/GridLegacy.spec.tsx b/packages/mui-material/src/GridLegacy/GridLegacy.spec.tsx
deleted file mode 100644
index 8d92bddf31d1f8..00000000000000
--- a/packages/mui-material/src/GridLegacy/GridLegacy.spec.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { expectType } from '@mui/types';
-import Paper from '@mui/material/Paper';
-import GridLegacy, { GridLegacyProps } from '@mui/material/GridLegacy';
-
-const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
- function CustomComponent() {
- return
;
- };
-
-const props1: GridLegacyProps<'span'> = {
- component: 'span',
- onChange: (event) => {
- expectType, typeof event>(event);
- },
-};
-
-const props2: GridLegacyProps = {
- onChange: (event) => {
- expectType, typeof event>(event);
- },
-};
-
-const props3: GridLegacyProps = {
- component: CustomComponent,
- stringProp: '2',
- numberProp: 2,
-};
-
-const props4: GridLegacyProps = {
- component: CustomComponent,
- stringProp: '2',
- numberProp: 2,
- // @ts-expect-error
- incorrectProp: 3,
-};
-
-// @ts-expect-error
-const props5: GridLegacyProps = {
- component: CustomComponent,
-};
-
-function ResponsiveTest() {
- return (
-
- {
- expectType, typeof event>(event);
- }}
- />
-
- );
-}
diff --git a/packages/mui-material/src/GridLegacy/GridLegacy.test.js b/packages/mui-material/src/GridLegacy/GridLegacy.test.js
deleted file mode 100644
index 0f9dc7ec6f0665..00000000000000
--- a/packages/mui-material/src/GridLegacy/GridLegacy.test.js
+++ /dev/null
@@ -1,1849 +0,0 @@
-import { expect } from 'chai';
-import { createRenderer, screen, reactMajor, isJsdom } from '@mui/internal-test-utils';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import defaultTheme from '@mui/material/styles/defaultTheme';
-import GridLegacy, { gridLegacyClasses as classes } from '@mui/material/GridLegacy';
-import {
- generateGridLegacy,
- generateRowGap,
- generateColumnGap,
- generateDirection,
-} from './GridLegacy';
-import describeConformance from '../../test/describeConformance';
-
-describe('Material UI
-
-
-
-
- ,
- );
-
- const container = screen.getByTestId('nested-container-in-item');
-
- // test whether the class of the child of the container is correct or not
- expect(container.firstChild).to.have.class(classes.item);
-
- // `columns` of nested container should have a higher priority than that of root container
- // otherwise, max-width would be 50% in this test
- expect(container.firstChild).toHaveComputedStyle({ maxWidth: '100%' });
- });
-
- it('should apply the correct number of columns for nested containers with undefined prop columns', () => {
- render(
-
-
-
-
-
- ,
- );
-
- const container = screen.getByTestId('nested-container-in-item');
- expect(container.firstChild).toHaveComputedStyle({ maxWidth: '100%' });
- });
-
- it('should apply the correct number of columns for nested containers with columns=12 (default)', () => {
- render(
-
-
-
-
-
- ,
- );
-
- const container = screen.getByTestId('nested-container-in-item');
- expect(container.firstChild).toHaveComputedStyle({ maxWidth: '100%' });
- });
- });
-
- describe('prop: item', () => {
- it('should apply the item class', () => {
- const { container } = render(
-
-
-
- ,
- );
- expect(screen.getByTestId('auto')).toHaveComputedStyle({
- flexBasis: 'auto',
- flexGrow: '0',
- flexShrink: '0',
- maxWidth: 'none',
- width: '300px',
- });
- },
- );
- });
-
- describe('prop: direction', () => {
- it('should have a direction', () => {
- const { container } = render(
- ,
- );
- expect(container.firstChild).to.have.class(classes['spacing-xs-1']);
- expect(container.firstChild).toHaveComputedStyle({
- position: 'absolute',
- top: '10px',
- left: '20px',
- });
- });
-
- it('should support decimal values', () => {
- const theme = createTheme({
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-xs-1.5': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
- expect(container.firstChild).to.have.class('MuiGridLegacy-spacing-xs-1.5');
- expect(container.firstChild).toHaveComputedStyle({
- position: 'absolute',
- top: '10px',
- left: '20px',
- });
- });
-
- it('should not support undefined values', () => {
- const theme = createTheme({
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-xs-undefined': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
- expect(container.firstChild).not.to.have.class('MuiGridLegacy-spacing-xs-undefined');
- expect(container.firstChild).not.to.toHaveComputedStyle({
- position: 'absolute',
- top: '10px',
- left: '20px',
- });
- });
-
- it('should not support zero values', () => {
- const theme = createTheme({
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-xs-0': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
- expect(container.firstChild).not.to.have.class('MuiGridLegacy-spacing-xs-0');
- expect(container.firstChild).not.to.toHaveComputedStyle({
- position: 'absolute',
- top: '10px',
- left: '20px',
- });
- });
-
- it('should support object values', () => {
- const theme = createTheme({
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-sm-1.5': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- 'spacing-md-2': {
- position: 'relative',
- top: '30px',
- left: '50px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
- expect(container.firstChild).to.have.class('MuiGridLegacy-spacing-sm-1.5');
- expect(container.firstChild).to.have.class('MuiGridLegacy-spacing-md-2');
- expect(container.firstChild).to.toHaveComputedStyle({
- position: 'relative',
- top: '30px',
- left: '50px',
- });
- });
-
- it('should ignore object values of zero', () => {
- const theme = createTheme({
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-sm-0': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- 'spacing-md-2': {
- position: 'relative',
- top: '30px',
- left: '50px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
- expect(container.firstChild).not.to.have.class('MuiGridLegacy-spacing-sm-0');
- expect(container.firstChild).to.have.class('MuiGridLegacy-spacing-md-2');
- expect(container.firstChild).to.toHaveComputedStyle({
- position: 'relative',
- top: '30px',
- left: '50px',
- });
- });
-
- it('should support custom breakpoints', () => {
- const theme = createTheme({
- breakpoints: {
- keys: ['mobile', 'desktop'],
- values: {
- mobile: 0,
- desktop: 1200,
- },
- },
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-mobile-1.5': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- 'spacing-desktop-3': {
- position: 'relative',
- top: '30px',
- left: '50px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
- expect(container.firstChild).to.have.class('MuiGridLegacy-spacing-mobile-1.5');
- expect(container.firstChild).to.have.class('MuiGridLegacy-spacing-desktop-3');
- expect(container.firstChild).to.toHaveComputedStyle({
- position: 'relative',
- top: '30px',
- left: '50px',
- });
- });
-
- it('should ignore custom breakpoints with values of zero', () => {
- const theme = createTheme({
- breakpoints: {
- keys: ['mobile', 'desktop'],
- values: {
- mobile: 0,
- desktop: 1200,
- },
- },
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-mobile-0': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- 'spacing-desktop-3': {
- position: 'relative',
- top: '30px',
- left: '50px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
- expect(container.firstChild).to.not.have.class('MuiGridLegacy-spacing-mobile-0');
- expect(container.firstChild).to.have.class('MuiGridLegacy-spacing-desktop-3');
- expect(container.firstChild).to.toHaveComputedStyle({
- position: 'relative',
- top: '30px',
- left: '50px',
- });
- });
-
- it("shouldn't support custom breakpoints without its spacing values", () => {
- const theme = createTheme({
- breakpoints: {
- keys: ['mobile', 'desktop'],
- values: {
- mobile: 0,
- desktop: 1200,
- },
- },
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-mobile-undefined': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- 'spacing-desktop-3': {
- position: 'relative',
- top: '30px',
- left: '50px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
- expect(container.firstChild).to.not.have.class('sMuiGridLegacy-spacing-mobile-undefined');
- expect(container.firstChild).to.have.class('MuiGridLegacy-spacing-desktop-3');
- expect(container.firstChild).to.toHaveComputedStyle({
- position: 'relative',
- top: '30px',
- left: '50px',
- });
- });
-
- it("should ignore custom breakpoints that doesn't exist in the theme", () => {
- const theme = createTheme({
- breakpoints: {
- keys: ['mobile', 'desktop'],
- values: {
- mobile: 0,
- desktop: 1200,
- },
- },
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-md-1.5': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- 'spacing-desktop-3': {
- position: 'relative',
- top: '30px',
- left: '50px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
-
- expect(container.firstChild).to.not.have.class('MuiGridLegacy-spacing-md-1.5');
- expect(container.firstChild).to.have.class('MuiGridLegacy-spacing-desktop-3');
- expect(container.firstChild).to.toHaveComputedStyle({
- position: 'relative',
- top: '30px',
- left: '50px',
- });
- });
-
- it('should ignore custom breakpoints with negative values', () => {
- const theme = createTheme({
- breakpoints: {
- keys: ['mobile', 'desktop'],
- values: {
- mobile: 0,
- desktop: 1200,
- },
- },
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-mobile--1.5': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- 'spacing-desktop--3': {
- position: 'relative',
- top: '30px',
- left: '50px',
- },
- },
- },
- },
- });
-
- const { container } = render(
-
-
-
- ,
- );
- expect(container.firstChild).to.not.have.class('MuiGridLegacy-spacing-md--1.5');
- expect(container.firstChild).to.not.have.class('MuiGridLegacy-spacing-desktop--3');
- expect(container.firstChild).to.not.toHaveComputedStyle({
- position: 'relative',
- top: '30px',
- left: '50px',
- });
- });
-
- // React 19 removed prop types support
- it.skipIf(reactMajor < 19)('should ignore grid item with spacing object', function test() {
- const theme = createTheme({
- breakpoints: {
- keys: ['mobile', 'desktop'],
- values: {
- mobile: 0,
- desktop: 1200,
- },
- },
- components: {
- MuiGridLegacy: {
- styleOverrides: {
- 'spacing-mobile--1.5': {
- position: 'absolute',
- top: '10px',
- left: '20px',
- },
- 'spacing-desktop--3': {
- position: 'relative',
- top: '30px',
- left: '50px',
- },
- },
- },
- },
- });
- const { container } = render(
-
- ,
- );
- expect(container.firstChild).to.not.have.class('MuiGridLegacy-spacing-mobile-1.5');
- expect(container.firstChild).to.not.have.class('MuiGridLegacy-spacing-desktop-3');
- expect(container.firstChild).to.not.toHaveComputedStyle({
- position: 'relative',
- top: '30px',
- left: '50px',
- });
- });
-
- // React 19 removed prop types support
- it.skipIf(reactMajor >= 19)(
- 'should warn of failed prop types when providing spacing object without the `container` prop',
- function test() {
- const theme = createTheme({
- breakpoints: {
- keys: ['mobile', 'desktop'],
- values: {
- mobile: 0,
- desktop: 1200,
- },
- },
- });
-
- expect(() => {
- render(
-
- ,
- );
- }).toErrorDev(
- 'Warning: Failed prop type: The prop `spacing` of `GridLegacy` can only be used together with the `container` prop.',
- );
- },
- );
-
- it('should not throw error for setting zero spacing in theme', () => {
- const theme = createTheme({ spacing: 0 });
-
- function App() {
- return (
-
-
- test
- test
-
-
- );
- }
-
- expect(() => {
- render(
-
-
-
-
-
,
- );
-
- expect(screen.getByTestId('grid')).toHaveComputedStyle({
- marginTop: `${-1 * remValue * 0.5}px`, // '-0.5rem'
- marginLeft: `${-1 * remValue * 0.5}px`, // '-0.5rem'
- width: `${parentWidth + remValue * 0.5}px`, // 'calc(100% + 0.5rem)'
- });
-
- expect(screen.getByTestId('first-custom-theme')).toHaveComputedStyle({
- paddingTop: `${0.5 * remValue}px`, // 0.5rem
- paddingLeft: `${0.5 * remValue}px`, // 0.5rem
- });
-
- view.rerender(
-
-
-
-
,
- );
-
- expect(screen.getByTestId('grid')).toHaveComputedStyle({
- marginTop: '-16px',
- marginLeft: '-16px',
- width: `${parentWidth + 16}px`, // 'calc(100% + 16px)'
- });
-
- expect(screen.getByTestId('first-default-theme')).toHaveComputedStyle({
- paddingTop: '16px',
- paddingLeft: '16px',
- });
- });
- });
-
- it('combines system properties with the sx prop', () => {
- const { container } = render( {
variants?: ComponentsVariants['MuiFormLabel'] | undefined;
}
| undefined;
- MuiGridLegacy?:
- | {
- defaultProps?: ComponentsProps['MuiGridLegacy'] | undefined;
- styleOverrides?: ComponentsOverrides['MuiGridLegacy'] | undefined;
- variants?: ComponentsVariants['MuiGridLegacy'] | undefined;
- }
- | undefined;
MuiGrid?:
| {
defaultProps?: ComponentsProps['MuiGrid'] | undefined;
diff --git a/packages/mui-material/src/styles/overrides.ts b/packages/mui-material/src/styles/overrides.ts
index b32e01950c0637..fa9e23fd15ab1a 100644
--- a/packages/mui-material/src/styles/overrides.ts
+++ b/packages/mui-material/src/styles/overrides.ts
@@ -44,7 +44,6 @@ import { FormControlLabelClassKey } from '../FormControlLabel';
import { FormGroupClassKey } from '../FormGroup';
import { FormHelperTextClassKey } from '../FormHelperText';
import { FormLabelClassKey } from '../FormLabel';
-import { GridLegacyClassKey } from '../GridLegacy';
import { GridClassKey } from '../Grid';
import { IconButtonClassKey } from '../IconButton';
import { IconClassKey } from '../Icon';
@@ -189,7 +188,6 @@ export interface ComponentNameToClassKey {
MuiFormGroup: FormGroupClassKey;
MuiFormHelperText: FormHelperTextClassKey;
MuiFormLabel: FormLabelClassKey;
- MuiGridLegacy: GridLegacyClassKey;
MuiGrid: GridClassKey;
MuiIcon: IconClassKey;
MuiIconButton: IconButtonClassKey;
diff --git a/packages/mui-material/src/styles/props.ts b/packages/mui-material/src/styles/props.ts
index 8a03c43a2b9f10..35d8b8783307af 100644
--- a/packages/mui-material/src/styles/props.ts
+++ b/packages/mui-material/src/styles/props.ts
@@ -42,7 +42,6 @@ import { FormControlProps } from '../FormControl';
import { FormGroupProps } from '../FormGroup';
import { FormHelperTextProps } from '../FormHelperText';
import { FormLabelProps } from '../FormLabel';
-import { GridLegacyProps } from '../GridLegacy';
import { GridProps } from '../Grid';
import { IconButtonProps } from '../IconButton';
import { IconProps } from '../Icon';
@@ -167,7 +166,6 @@ export interface ComponentsPropsList {
MuiFormGroup: FormGroupProps;
MuiFormHelperText: FormHelperTextProps;
MuiFormLabel: FormLabelProps;
- MuiGridLegacy: GridLegacyProps;
MuiGrid: GridProps;
MuiImageList: ImageListProps;
MuiImageListItem: ImageListItemProps;
diff --git a/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.spec.tsx
deleted file mode 100644
index 9fb682d4b9d023..00000000000000
--- a/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.spec.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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
deleted file mode 100644
index f416986760b496..00000000000000
--- a/packages/mui-material/test/typescript/moduleAugmentation/gridLegacyCustomBreakpoints.tsconfig.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "extends": "../../../../../tsconfig.json",
- "files": ["gridLegacyCustomBreakpoints.spec.tsx"]
-}
diff --git a/test/bundling/scripts/fixtureTemplateValues.js b/test/bundling/scripts/fixtureTemplateValues.js
index e7c01f98eff682..0f87736be3f9fd 100644
--- a/test/bundling/scripts/fixtureTemplateValues.js
+++ b/test/bundling/scripts/fixtureTemplateValues.js
@@ -94,8 +94,6 @@ import { FormHelperText as FormHelperText_core } from '@mui/material';
import FormHelperText_core__pathImport from '@mui/material/FormHelperText';
import { FormLabel as FormLabel_core } from '@mui/material';
import FormLabel_core__pathImport from '@mui/material/FormLabel';
-import { GridLegacy as GridLegacy_core } from '@mui/material';
-import GridLegacy_core__pathImport from '@mui/material/GridLegacy';
import { Grow as Grow_core } from '@mui/material';
import Grow_core__pathImport from '@mui/material/Grow';
import { Icon as Icon_core } from '@mui/material';
@@ -652,11 +650,6 @@ console.assert(
ReactIs.isValidElementType(FormLabel_core__pathImport),
'FormLabel path import is not consumable.',
);
-console.assert(ReactIs.isValidElementType(GridLegacy_core), 'Grid named import is not consumable.');
-console.assert(
- ReactIs.isValidElementType(GridLegacy_core__pathImport),
- 'GridLegacy path import is not consumable.',
-);
console.assert(ReactIs.isValidElementType(Grow_core), 'Grow named import is not consumable.');
console.assert(
ReactIs.isValidElementType(Grow_core__pathImport),
diff --git a/test/integration/material-ui/components.spec.tsx b/test/integration/material-ui/components.spec.tsx
index d51d533a3b2f57..ac6c8190d69a24 100644
--- a/test/integration/material-ui/components.spec.tsx
+++ b/test/integration/material-ui/components.spec.tsx
@@ -34,7 +34,6 @@ import {
FormControlLabel,
FormGroup,
Grid,
- GridLegacy,
ImageList,
ImageListItem,
Grow,
@@ -530,25 +529,6 @@ function AccordionTest() {
);
}
-function GridLegacyTest() {
- return (
-
-
- ...
-
-
- ...
-
-
- ...
-
-
- ...
-
-
- );
-}
-
function GridTest() {
return (
diff --git a/test/regressions/fixtures/GridLegacy/StressGridLegacy.js b/test/regressions/fixtures/GridLegacy/StressGridLegacy.js
deleted file mode 100644
index f945d0275f994c..00000000000000
--- a/test/regressions/fixtures/GridLegacy/StressGridLegacy.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import Paper from '@mui/material/Paper';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/GridLegacy';
-
-export default function StressGridLegacy() {
- return (
-
-
-
-
- xs=3
-
-
- xs=9
-
-
-
-
- first
-
-
- last
-
-
-
-
- space
-
-
- between
-
-
-
-
- reverse
-
-
- column
-
-
-
-
- );
-}
diff --git a/test/regressions/fixtures/GridLegacy/StressNestedGridLegacy.js b/test/regressions/fixtures/GridLegacy/StressNestedGridLegacy.js
deleted file mode 100644
index 08ffc61e78574a..00000000000000
--- a/test/regressions/fixtures/GridLegacy/StressNestedGridLegacy.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-import Paper from '@mui/material/Paper';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/GridLegacy';
-
-export default function StressNestedGridLegacy() {
- return (
-
-
-
- xs=12
-
-
- xs=6
-
-
- xs=6
-
-
-
- xs=6
-
-
-
-
- xs=7
-
-
- xs=5
-
-
-
- xs=6
-
-
-
-
-
- xs=6
-
-
- xs=6
-
-
-
-
- xs=8
-
-
- xs=4
-
-
-
-
- xs=4
-
-
- xs=4
-
-
- xs=4
-
-
-
-
- xs=6
-
-
- xs=6
-
-
-
-
- );
-}
diff --git a/test/regressions/index.jsx b/test/regressions/index.jsx
index 9b5513bece3942..765ed890f9bb7e 100644
--- a/test/regressions/index.jsx
+++ b/test/regressions/index.jsx
@@ -100,8 +100,6 @@ const importDemos = import.meta.glob(
'!docs/data/material/components/drawers/SwipeableTemporaryDrawer', // Needs interaction
'!docs/data/material/components/drawers/TemporaryDrawer', // Needs interaction
'!docs/data/material/components/floating-action-button/FloatingActionButtonZoom', // Needs interaction
- '!docs/data/material/components/grid-legacy/InteractiveGrid', // Redux isolation
- '!docs/data/material/components/grid-legacy/SpacingGrid', // Needs interaction
'!docs/data/material/components/image-list', // Image don't load
'!docs/data/material/components/masonry/ImageMasonry', // Image don't load
'!docs/data/material/components/masonry/Sequential', // Flaky
- 