[grid] Remove 'column' and 'column-reverse' options from GridDirection type #47564
Conversation
sai6855
changed the title
Netlify deploy previewBundle size report
|
sai6855
added
type: bug
There was a problem hiding this comment.
Pull request overview
This PR removes 'column' and 'column-reverse' options from the GridDirection type definition, limiting it to only 'row' and 'row-reverse' values.
- Changes the exported GridDirection type to exclude column-based flex-direction values
- Represents a breaking change to the Grid component's TypeScript API
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null }; | ||
|
|
||
| export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; | ||
| export type GridDirection = 'row' | 'row-reverse'; |
There was a problem hiding this comment.
This is a breaking API change that removes valid CSS flex-direction values ('column' and 'column-reverse') from the GridDirection type. This will cause TypeScript compilation errors for any existing code using these direction values. If this is intentional, it should be:
- Documented as a breaking change
- Include a migration guide explaining why these values are being removed and what alternatives users should use
- Consider deprecating these values first in a minor release before removing them in a major version
If there's a technical reason why column directions shouldn't be supported in Grid, that rationale should be documented.
| export type GridDirection = 'row' | 'row-reverse'; | |
| export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; |
| type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null }; | ||
|
|
||
| export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; | ||
| export type GridDirection = 'row' | 'row-reverse'; |
There was a problem hiding this comment.
The GridDirection type is being updated to remove 'column' and 'column-reverse' values, but this change is incomplete. Several other parts of the codebase still reference these values and need to be updated:
- PropTypes validation (lines 181-182 in this file) still accepts 'column' and 'column-reverse'
- The DIRECTIONS constant in gridClasses.ts (line 18) still includes all four values
- The underlying @mui/system/Grid/GridProps.ts still defines GridDirection with all four values
- PigmentGrid also has the full set of direction values
This incomplete change will cause inconsistencies between TypeScript type checking and runtime behavior, and may break applications that use column directions. Consider either completing all related changes together or reverting this change until a comprehensive update can be made.
| export type GridDirection = 'row' | 'row-reverse'; | |
| export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; |
3 participants
closes #47563
According to https://mui.com/material-ui/react-grid/#column-direction,
directionprop doesn't supportcolumnandcolumn-reversebut api-docs page listed them as valid . This PR fixes discrepancypreview: https://deploy-preview-47564--material-ui.netlify.app/material-ui/api/grid/