[grid] Remove 'column' and 'column-reverse' directions#48117
[grid] Remove 'column' and 'column-reverse' directions#48117silviuaavram wants to merge 1 commit into
Conversation
silviuaavram
added
docs
Netlify deploy previewhttps://deploy-preview-48117--material-ui.netlify.app/ Bundle size reportBundle size will be reported once CircleCI build #912072 finishes. |
|
It was already being worked on in #47564, maybe we should close that one. |
There was a problem hiding this comment.
Pull request overview
Updates the Grid API surface and documentation to reflect that direction only supports horizontal layouts (row / row-reverse), addressing the mismatch called out in #47563.
Changes:
- Removed
column/column-reversefromGridDirectionTypeScript types across System, Material Grid, and PigmentGrid. - Narrowed
directionPropTypes and utility-class direction lists to match the supported values. - Updated the Material Grid API docs JSON to no longer list the removed direction values.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mui-system/src/Grid/gridClasses.ts | Removes column direction entries from the generated direction class slots. |
| packages/mui-system/src/Grid/createGrid.tsx | Narrows direction PropTypes to row/row-reverse. |
| packages/mui-system/src/Grid/GridProps.ts | Narrows the public GridDirection type. |
| packages/mui-system/src/Grid/Grid.tsx | Narrows direction PropTypes to row/row-reverse. |
| packages/mui-material/src/PigmentGrid/PigmentGrid.tsx | Narrows PigmentGrid GridDirection and direction PropTypes. |
| packages/mui-material/src/Grid/gridClasses.ts | Removes column direction entries from the generated direction class slots. |
| packages/mui-material/src/Grid/Grid.tsx | Narrows Material Grid GridDirection and direction PropTypes. |
| docs/pages/material-ui/api/grid.json | Updates Material Grid API docs for the narrowed direction union. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const; | ||
| const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'] as const; | ||
| const DIRECTIONS = ['row-reverse', 'row'] as const; | ||
| const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'] as const; | ||
| const GRID_SIZES = ['auto', 'grow', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] as const; |
There was a problem hiding this comment.
After narrowing DIRECTIONS to only row/row-reverse, GridClasses still requires direction-xs-column and direction-xs-column-reverse keys. Since generateUtilityClasses() now won't generate those slots, const gridClasses: GridClasses = ... becomes type-incompatible (missing required properties) and should fail TypeScript. Update GridClasses to remove the column-related keys (and adjust the related JSDoc) so the interface matches the generated slots.
| 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 change removes column / column-reverse from the public GridDirection type, but related generated docs/tests still reference those values (e.g. docs/pages/system/api/grid.json and gridGenerator.test.js still include column). Please regenerate/update the System Grid API docs and align/remove the column-related test expectations so the repository doesn’t keep documenting/testing unsupported directions.
| 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'; | ||
|
|
||
| export type GridSpacing = number | string; |
There was a problem hiding this comment.
GridDirection and the direction PropTypes were narrowed to row/row-reverse, but the generated PigmentGrid API docs still list column/column-reverse (see docs/pages/material-ui/api/pigment-grid.json). Please regenerate/update the PigmentGrid API JSON so the docs reflect the new supported values.
| "type": { | ||
| "name": "union", | ||
| "description": "'column-reverse'<br>| 'column'<br>| 'row-reverse'<br>| 'row'<br>| Array<'column-reverse'<br>| 'column'<br>| 'row-reverse'<br>| 'row'><br>| object" | ||
| "description": "'row-reverse'<br>| 'row'<br>| Array<'row-reverse'<br>| 'row'><br>| object" | ||
| }, |
There was a problem hiding this comment.
Material Grid API JSON is updated here, but the translated API docs still describe the removed direction class keys/values (e.g. docs/translations/api-docs/grid/grid.json still mentions direction-xs-column*). Please regenerate/update the translation/API-doc artifacts to avoid inconsistent documentation across locales.
|
Hasn't @sai6855 already did this? |
Nope, see #48117 (comment) |
Fixes #47563.
We should remove the 'column' and 'column-reverse' from the Grid docs.