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 all 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
12 changes: 5 additions & 7 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 @@ -33,22 +33,20 @@ export default function PositionedTooltips() {
<Button variant="plain">left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
<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>
</Box>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
12 changes: 5 additions & 7 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 @@ -33,22 +33,20 @@ export default function PositionedTooltips() {
<Button variant="plain">left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
<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>
</Box>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
12 changes: 5 additions & 7 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 @@ -51,16 +51,14 @@ 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>
<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>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
12 changes: 5 additions & 7 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 @@ -53,16 +53,14 @@ 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>
<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>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
12 changes: 5 additions & 7 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 @@ -33,22 +33,20 @@ export default function PositionedTooltips() {
<Button>left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
<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>
</Box>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
Expand Down
12 changes: 5 additions & 7 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 @@ -33,22 +33,20 @@ export default function PositionedTooltips() {
<Button>left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Grid container sx={{ justifyContent: 'flex-end' }} size={6}>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
<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>
</Box>
</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
85 changes: 44 additions & 41 deletions docs/data/material/components/transfer-list/TransferList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ListItemText from '@mui/material/ListItemText';
import Checkbox from '@mui/material/Checkbox';
import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';

function not(a, b) {
return a.filter((value) => !b.includes(value));
Expand Down Expand Up @@ -97,47 +98,49 @@ export default function TransferList() {
>
<Grid>{customList(left)}</Grid>
<Grid>
<Grid container direction="column" sx={{ alignItems: 'center' }}>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleAllRight}
disabled={left.length === 0}
aria-label="move all right"
>
≫
</Button>
<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>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleAllLeft}
disabled={right.length === 0}
aria-label="move all left"
>
≪
</Button>
<Grid container sx={{ alignItems: 'center' }}>
<Stack>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleAllRight}
disabled={left.length === 0}
aria-label="move all right"
>
≫
</Button>
<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>
<Button
sx={{ my: 0.5 }}
variant="outlined"
size="small"
onClick={handleAllLeft}
disabled={right.length === 0}
aria-label="move all left"
>
≪
</Button>
</Stack>
</Grid>
</Grid>
<Grid>{customList(right)}</Grid>
Expand Down
Loading
Loading