Skip to content

[grid] Remove 'column' and 'column-reverse' options from GridDirection type #47564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sai6855 wants to merge 28 commits into
base: master
Choose a base branch
from
Open

[grid] Remove 'column' and 'column-reverse' options from GridDirection type #47564

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
d8facfa
[grid] Remove 'column' and 'column-reverse' options from GridDirectio…
sai6855 Jan 6, 2026
fed32f6
fix ts issues
sai6855 Jan 6, 2026
66267f2
fix demos
sai6855 Jan 6, 2026
a0d56e8
fix
sai6855 Jan 6, 2026
6d8dfcf
reigger
sai6855 Jan 6, 2026
589823a
docs-format
sai6855 Jan 6, 2026
f79817e
fix
sai6855 Jan 6, 2026
62d5051
fix
sai6855 Jan 6, 2026
44f67c8
fix docs:api
sai6855 Jan 6, 2026
da86194
Merge branch 'master' into grid-props
sai6855 Jan 6, 2026
54d9156
trigger
sai6855 Jan 6, 2026
a9fa9ed
Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…
sai6855 Jan 6, 2026
16460d9
trigger-ci
sai6855 Jan 6, 2026
f7c8123
[docs] Fix incorrect indentation in migration guide
sai6855 Jan 6, 2026
c03dd6d
remove direction from grid classes and gridprops
sai6855 Jan 12, 2026
cce38b9
Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…
sai6855 Jan 12, 2026
873d853
fix ogment
sai6855 Jan 12, 2026
56259a7
fix demos
sai6855 Jan 12, 2026
c3e56f2
update descriptions
sai6855 Jan 12, 2026
be6b0d4
Merge branch 'master' into grid-props
sai6855 Jan 16, 2026
507f382
jun review
sai6855 Jan 20, 2026
094b865
update docs
sai6855 Jan 20, 2026
21c4b5a
Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…
sai6855 Jan 20, 2026
91b76d2
FIX
sai6855 Jan 20, 2026
e32eb26
fix
sai6855 Jan 20, 2026
57cc3be
fix
sai6855 Jan 20, 2026
2b8d18c
Merge branch 'master' into grid-props
sai6855 Jan 20, 2026
c75bef7
Merge branch 'grid-props' of https://github.com/sai6855/material-ui i…
sai6855 Jan 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions docs/data/joy/components/tooltip/PositionedTooltips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Box from '@mui/joy/Box';
import Grid from '@mui/material/Grid';
import Button from '@mui/joy/Button';
import Tooltip from '@mui/joy/Tooltip';
import Stack from '@mui/material/Stack';

export default function PositionedTooltips() {
return (
Expand Down Expand Up @@ -33,22 +34,24 @@ export default function PositionedTooltips() {
<Button variant="plain">left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button variant="plain">right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button variant="plain">right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button variant="plain">right-end</Button>
</Tooltip>
</Grid>
<Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
<Stack sx={{ alignItems: 'end' }}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button variant="plain">right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button variant="plain">right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button variant="plain">right-end</Button>
</Tooltip>
</Grid>
</Stack>
Copy link
Member

@siriwatknp siriwatknp Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is strange. It looks misuse to me, I think better to change entirely to Stack or Box with sx prop.

</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
35 changes: 19 additions & 16 deletions docs/data/joy/components/tooltip/PositionedTooltips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Box from '@mui/joy/Box';
import Grid from '@mui/material/Grid';
import Button from '@mui/joy/Button';
import Tooltip from '@mui/joy/Tooltip';
import Stack from '@mui/material/Stack';

export default function PositionedTooltips() {
return (
Expand Down Expand Up @@ -33,22 +34,24 @@ export default function PositionedTooltips() {
<Button variant="plain">left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button variant="plain">right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button variant="plain">right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button variant="plain">right-end</Button>
</Tooltip>
</Grid>
<Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
<Stack sx={{ alignItems: 'end' }}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button variant="plain">right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button variant="plain">right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button variant="plain">right-end</Button>
</Tooltip>
</Grid>
</Stack>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
23 changes: 13 additions & 10 deletions docs/data/material/components/popper/PositionedPopper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Fade from '@mui/material/Fade';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';

export default function PositionedPopper() {
const [anchorEl, setAnchorEl] = React.useState(null);
Expand Down Expand Up @@ -51,16 +52,18 @@ export default function PositionedPopper() {
<br />
<Button onClick={handleClick('left-end')}>left-end</Button>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<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>
<Grid container sx={{ alignItems: 'flex-end' }} size={6}>
<Stack>
<Grid>
<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>
</Stack>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
23 changes: 13 additions & 10 deletions docs/data/material/components/popper/PositionedPopper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Fade from '@mui/material/Fade';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';

export default function PositionedPopper() {
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
Expand Down Expand Up @@ -53,16 +54,18 @@ export default function PositionedPopper() {
<br />
<Button onClick={handleClick('left-end')}>left-end</Button>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<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>
<Grid container sx={{ alignItems: 'flex-end' }} size={6}>
<Stack>
<Grid>
<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>
</Stack>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
35 changes: 19 additions & 16 deletions docs/data/material/components/tooltips/PositionedTooltips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import Stack from '@mui/material/Stack';

export default function PositionedTooltips() {
return (
Expand Down Expand Up @@ -33,22 +34,24 @@ export default function PositionedTooltips() {
<Button>left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button>right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button>right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button>right-end</Button>
</Tooltip>
</Grid>
<Grid container sx={{ alignItems: 'flex-end' }} size={6}>
<Stack>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button>right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button>right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button>right-end</Button>
</Tooltip>
</Grid>
</Stack>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
35 changes: 19 additions & 16 deletions docs/data/material/components/tooltips/PositionedTooltips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import Stack from '@mui/material/Stack';

export default function PositionedTooltips() {
return (
Expand Down Expand Up @@ -33,22 +34,24 @@ export default function PositionedTooltips() {
<Button>left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button>right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button>right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button>right-end</Button>
</Tooltip>
</Grid>
<Grid container sx={{ alignItems: 'flex-end' }} size={6}>
<Stack>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button>right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button>right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button>right-end</Button>
</Tooltip>
</Grid>
</Stack>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
45 changes: 24 additions & 21 deletions docs/data/material/components/transfer-list/SelectAllTransferList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
import Checkbox from '@mui/material/Checkbox';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Stack from '@mui/material/Stack';

function not(a, b) {
return a.filter((value) => !b.includes(value));
Expand Down Expand Up @@ -132,27 +133,29 @@ export default function SelectAllTransferList() {
>
<Grid>{customList('Choices', left)}</Grid>
<Grid>
<Grid container direction="column" sx={{ alignItems: 'center' }}>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleCheckedRight}
disabled={leftChecked.length === 0}
aria-label="move selected right"
>
&gt;
</Button>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleCheckedLeft}
disabled={rightChecked.length === 0}
aria-label="move selected left"
>
&lt;
</Button>
<Grid container sx={{ alignItems: 'center' }}>
<Stack>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleCheckedRight}
disabled={leftChecked.length === 0}
aria-label="move selected right"
>
&gt;
</Button>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleCheckedLeft}
disabled={rightChecked.length === 0}
aria-label="move selected left"
>
&lt;
</Button>
</Stack>
</Grid>
</Grid>
<Grid>{customList('Chosen', right)}</Grid>
Expand Down
45 changes: 24 additions & 21 deletions docs/data/material/components/transfer-list/SelectAllTransferList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
import Checkbox from '@mui/material/Checkbox';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Stack from '@mui/material/Stack';

function not(a: readonly number[], b: readonly number[]) {
return a.filter((value) => !b.includes(value));
Expand Down Expand Up @@ -133,27 +134,29 @@ export default function SelectAllTransferList() {
>
<Grid>{customList('Choices', left)}</Grid>
<Grid>
<Grid container direction="column" sx={{ alignItems: 'center' }}>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleCheckedRight}
disabled={leftChecked.length === 0}
aria-label="move selected right"
>
&gt;
</Button>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleCheckedLeft}
disabled={rightChecked.length === 0}
aria-label="move selected left"
>
&lt;
</Button>
<Grid container sx={{ alignItems: 'center' }}>
<Stack>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleCheckedRight}
disabled={leftChecked.length === 0}
aria-label="move selected right"
>
&gt;
</Button>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleCheckedLeft}
disabled={rightChecked.length === 0}
aria-label="move selected left"
>
&lt;
</Button>
</Stack>
</Grid>
</Grid>
<Grid>{customList('Chosen', right)}</Grid>
Expand Down
Loading
Loading