[grid] Remove 'column' and 'column-reverse' options from GridDirection type by sai6855 · Pull Request #47564 · mui/material-ui

sai6855 · 2026-01-06T06:49:33Z

Try it here: https://stackblitz.com/edit/aytwvcfa?file=src%2FDemo.tsx

According to https://mui.com/material-ui/react-grid/#column-direction, direction prop doesn't support column and column-reverse but api-docs page listed them as valid . This PR fixes discrepancy

preview: https://deploy-preview-47564--material-ui.netlify.app/material-ui/api/grid/

…n type

mui-bot · 2026-01-06T06:50:59Z

Netlify deploy preview

https://deploy-preview-47564--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	▼-26B^(-0.01%)	▼-7B^(0.00%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against efb6b0b

Copilot

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.

Copilot · 2026-01-06T06:54:10Z

 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';


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.

Suggested change

export type GridDirection = 'row' | 'row-reverse';

export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';

Copilot · 2026-01-06T06:54:11Z

 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';


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.

Suggested change

export type GridDirection = 'row' | 'row-reverse';

export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';

Removed 👍

…nto grid-props

ZeeshanTamboli

@sai6855 As stated by Co-pilot in this comment, I think you need to remove from gridClasses and MUI System GridProps as well.

…nto grid-props

ZeeshanTamboli

The layout is broken in:

…nto grid-props

sai6855 · 2026-01-20T06:55:03Z

please check my comments

@siriwatknp applied suggestion as per your review, can you re-check?

siriwatknp · 2026-02-11T06:31:15Z

+        <Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
            <Button onClick={handleClick('right-start')}>right-start</Button>
-          </Grid>
-          <Grid>
+
            <Button onClick={handleClick('right')}>right</Button>
-          </Grid>
-          <Grid>
+
            <Button onClick={handleClick('right-end')}>right-end</Button>
-          </Grid>
+          </Box>


This is wrong, let's change the Grid to Stack instead.
x the others.

siriwatknp · 2026-02-11T06:32:28Z

-          >
-            ≪
-          </Button>
+        <Grid container sx={{ alignItems: 'center' }}>


I think Grid container is not needed

Suggested change

<Grid container sx={{ alignItems: 'center' }}>

ZeeshanTamboli · 2026-02-23T05:10:34Z

@sai6855 Can you resolve this first?

sai6855 · 2026-03-01T16:11:03Z

I just went through changes again, does this change can be treated as breaking change? If yes, is it okay to move ahead with this PR?
https://github.com/mui/material-ui/pull/47564/changes#diff-52ea618a577700279275002787cece22d3b31be9e76fc946ba5e5cea360feb9aL13

siriwatknp · 2026-03-02T02:13:51Z

I just went through changes again, does this change can be treated as breaking change? If yes, is it okay to move ahead with this PR? https://github.com/mui/material-ui/pull/47564/changes#diff-52ea618a577700279275002787cece22d3b31be9e76fc946ba5e5cea360feb9aL13

Yes, it's fine as a breaking change

siriwatknp · 2026-03-30T09:48:22Z

@sai6855 can you update this PR?

silviuaavram · 2026-03-30T10:25:51Z

Since it's going to be a breaking change, it should also contain an entry in upgrade-to-v9.md

sai6855 · 2026-03-31T02:57:33Z

Hey @siriwatknp @silviuaavram, really sorry for the delay here. I’m currently not able to work on this PR or mui PRs for few days, so please feel free to close it or someone else can continue from here.

siriwatknp · 2026-03-31T07:28:34Z

Hey @siriwatknp @silviuaavram, really sorry for the delay here. I’m currently not able to work on this PR or mui PRs for few days, so please feel free to close it or someone else can continue from here.

No problem at all. @ZeeshanTamboli if you can take over this, let me know.

silviuaavram · 2026-03-31T13:12:59Z

@ZeeshanTamboli @siriwatknp merged master and changed the docs examples. feel free to take a look.

siriwatknp

LGTM! One minor nit: PositionedPopper.js has sx={{ alignItems: 'flex-start' }} on the left-side Stack but PositionedPopper.tsx doesn't — they should be consistent.

silviuaavram · 2026-04-01T07:29:17Z

Yeah just noticed it via the pipeline, changed it. Thanks!

[grid] Remove 'column' and 'column-reverse' options from GridDirectio…

d8facfa

…n type

Copilot AI review requested due to automatic review settings January 6, 2026 06:49

Copilot started reviewing on behalf of sai6855 January 6, 2026 06:50 View session

sai6855 changed the title ~~[grid] Remove 'column' and 'column-reverse' options from GridDirectio…~~ [grid] Remove 'column' and 'column-reverse' options from GridDirection type Jan 6, 2026

sai6855 added type: bug It doesn't behave as expected. docs Improvements or additions to the documentation. component: Grid The React component. labels Jan 6, 2026

Copilot AI reviewed Jan 6, 2026

View reviewed changes

sai6855 added 8 commits January 6, 2026 12:30

fix ts issues

fed32f6

fix demos

66267f2

fix

a0d56e8

reigger

6d8dfcf

docs-format

589823a

fix

f79817e

fix

62d5051

fix docs:api

44f67c8

sai6855 requested a review from siriwatknp January 6, 2026 09:57

sai6855 and others added 5 commits January 6, 2026 15:51

Merge branch 'master' into grid-props

da86194

trigger

54d9156

Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…

a9fa9ed

…nto grid-props

trigger-ci

16460d9

[docs] Fix incorrect indentation in migration guide

f7c8123

ZeeshanTamboli reviewed Jan 7, 2026

View reviewed changes

sai6855 added 3 commits January 12, 2026 11:44

remove direction from grid classes and gridprops

c03dd6d

Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…

cce38b9

…nto grid-props

fix ogment

873d853

sai6855 requested a review from ZeeshanTamboli January 12, 2026 06:41

ZeeshanTamboli reviewed Jan 12, 2026

View reviewed changes

fix demos

56259a7

sai6855 and others added 5 commits January 20, 2026 11:59

FIX

91b76d2

fix

e32eb26

fix

57cc3be

Merge branch 'master' into grid-props

2b8d18c

Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…

c75bef7

…nto grid-props

siriwatknp reviewed Feb 11, 2026

View reviewed changes

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 13, 2026

siriwatknp added the breaking change Introduces changes that are not backward compatible. label Mar 2, 2026

ZeeshanTamboli mentioned this pull request Mar 27, 2026

[grid] Remove 'column' and 'column-reverse' directions #48117

Closed

1 task

silviuaavram added 2 commits March 31, 2026 15:24

Merge branch 'master' into grid-props

ef2ae7c

fix docs positioning

cae4663

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 31, 2026

silviuaavram self-assigned this Mar 31, 2026

change transfer examples

be06d90

siriwatknp approved these changes Apr 1, 2026

View reviewed changes

add missing prop

a45ad02

silviuaavram added 2 commits April 1, 2026 11:38

more changes after removing prop support

4f41110

pnpm docs typescript

efb6b0b

silviuaavram merged commit 56f63bf into mui:master Apr 1, 2026
23 checks passed

	export type GridDirection = 'row' \| 'row-reverse';
	export type GridDirection = 'row' \| 'row-reverse' \| 'column' \| 'column-reverse';

Uh oh!

Conversation

sai6855 commented Jan 6, 2026 • edited by siriwatknp Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 6, 2026

Choose a reason for hiding this comment

Uh oh!

sai6855 Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

ZeeshanTamboli left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

sai6855 commented Jan 20, 2026

Uh oh!

siriwatknp Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

siriwatknp Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

ZeeshanTamboli commented Feb 23, 2026

Uh oh!

sai6855 commented Mar 1, 2026

Uh oh!

siriwatknp commented Mar 2, 2026

Uh oh!

siriwatknp commented Mar 30, 2026

Uh oh!

silviuaavram commented Mar 30, 2026

Uh oh!

sai6855 commented Mar 31, 2026

Uh oh!

siriwatknp commented Mar 31, 2026

Uh oh!

silviuaavram commented Mar 31, 2026

Uh oh!

siriwatknp left a comment

Choose a reason for hiding this comment

Uh oh!

silviuaavram commented Apr 1, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

sai6855 commented Jan 6, 2026 •

edited by siriwatknp

Loading

mui-bot commented Jan 6, 2026 •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading