Skip to content
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

[docs][material-ui] Improve Dialog demos #39642

Merged
merged 2 commits into from
Oct 30, 2023
Merged

[docs][material-ui] Improve Dialog demos #39642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8474a5
remove unnecessary divs
ZeeshanTamboli Oct 28, 2023
25f8903
replace deprecated props with use ListItemButton
ZeeshanTamboli Oct 28, 2023
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
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/AlertDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function AlertDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open alert dialog
</Button>
Expand All @@ -44,6 +44,6 @@ export default function AlertDialog() {
</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/AlertDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function AlertDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open alert dialog
</Button>
Expand All @@ -44,6 +44,6 @@ export default function AlertDialog() {
</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/AlertDialogSlide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function AlertDialogSlide() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Slide in alert dialog
</Button>
Expand All @@ -46,6 +46,6 @@ export default function AlertDialogSlide() {
<Button onClick={handleClose}>Agree</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/AlertDialogSlide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function AlertDialogSlide() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Slide in alert dialog
</Button>
Expand All @@ -52,6 +52,6 @@ export default function AlertDialogSlide() {
<Button onClick={handleClose}>Agree</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
15 changes: 7 additions & 8 deletions docs/data/material/components/dialogs/ConfirmationDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
Expand Down Expand Up @@ -121,22 +121,21 @@ export default function ConfirmationDialog() {
return (
<Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
<List component="div" role="group">
<ListItem button divider disabled>
<ListItemButton divider disabled>
<ListItemText primary="Interruptions" />
</ListItem>
<ListItem
button
</ListItemButton>
<ListItemButton
divider
aria-haspopup="true"
aria-controls="ringtone-menu"
aria-label="phone ringtone"
onClick={handleClickListItem}
>
<ListItemText primary="Phone ringtone" secondary={value} />
</ListItem>
<ListItem button divider disabled>
</ListItemButton>
<ListItemButton divider disabled>
<ListItemText primary="Default notification ringtone" secondary="Tethys" />
</ListItem>
</ListItemButton>
<ConfirmationDialogRaw
id="ringtone-menu"
keepMounted
Expand Down
15 changes: 7 additions & 8 deletions docs/data/material/components/dialogs/ConfirmationDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
Expand Down Expand Up @@ -122,22 +122,21 @@ export default function ConfirmationDialog() {
return (
<Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
<List component="div" role="group">
<ListItem button divider disabled>
<ListItemButton divider disabled>
<ListItemText primary="Interruptions" />
</ListItem>
<ListItem
button
</ListItemButton>
<ListItemButton
divider
aria-haspopup="true"
aria-controls="ringtone-menu"
aria-label="phone ringtone"
onClick={handleClickListItem}
>
<ListItemText primary="Phone ringtone" secondary={value} />
</ListItem>
<ListItem button divider disabled>
</ListItemButton>
<ListItemButton divider disabled>
<ListItemText primary="Default notification ringtone" secondary="Tethys" />
</ListItem>
</ListItemButton>
<ConfirmationDialogRaw
id="ringtone-menu"
keepMounted
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/CustomizedDialogs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function CustomizedDialogs() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open dialog
</Button>
Expand Down Expand Up @@ -75,6 +75,6 @@ export default function CustomizedDialogs() {
</Button>
</DialogActions>
</BootstrapDialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/CustomizedDialogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function CustomizedDialogs() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open dialog
</Button>
Expand Down Expand Up @@ -75,6 +75,6 @@ export default function CustomizedDialogs() {
</Button>
</DialogActions>
</BootstrapDialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/DraggableDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function DraggableDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open draggable dialog
</Button>
Expand All @@ -57,6 +57,6 @@ export default function DraggableDialog() {
<Button onClick={handleClose}>Subscribe</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/DraggableDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function DraggableDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open draggable dialog
</Button>
Expand All @@ -57,6 +57,6 @@ export default function DraggableDialog() {
<Button onClick={handleClose}>Subscribe</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/FormDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function FormDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open form dialog
</Button>
Expand All @@ -45,6 +45,6 @@ export default function FormDialog() {
<Button onClick={handleClose}>Subscribe</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/FormDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function FormDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open form dialog
</Button>
Expand All @@ -45,6 +45,6 @@ export default function FormDialog() {
<Button onClick={handleClose}>Subscribe</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/FullScreenDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function FullScreenDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open full-screen dialog
</Button>
Expand Down Expand Up @@ -69,6 +69,6 @@ export default function FullScreenDialog() {
</ListItem>
</List>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/FullScreenDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function FullScreenDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open full-screen dialog
</Button>
Expand Down Expand Up @@ -75,6 +75,6 @@ export default function FullScreenDialog() {
</ListItem>
</List>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/ResponsiveDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function ResponsiveDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open responsive dialog
</Button>
Expand Down Expand Up @@ -50,6 +50,6 @@ export default function ResponsiveDialog() {
</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/ResponsiveDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function ResponsiveDialog() {
};

return (
<div>
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
Open responsive dialog
</Button>
Expand Down Expand Up @@ -50,6 +50,6 @@ export default function ResponsiveDialog() {
</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/ScrollDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function ScrollDialog() {
}, [open]);

return (
<div>
<React.Fragment>
<Button onClick={handleClickOpen('paper')}>scroll=paper</Button>
<Button onClick={handleClickOpen('body')}>scroll=body</Button>
<Dialog
Expand Down Expand Up @@ -62,6 +62,6 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
<Button onClick={handleClose}>Subscribe</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
4 changes: 2 additions & 2 deletions docs/data/material/components/dialogs/ScrollDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function ScrollDialog() {
}, [open]);

return (
<div>
<React.Fragment>
<Button onClick={handleClickOpen('paper')}>scroll=paper</Button>
<Button onClick={handleClickOpen('body')}>scroll=body</Button>
<Dialog
Expand Down Expand Up @@ -62,6 +62,6 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
<Button onClick={handleClose}>Subscribe</Button>
</DialogActions>
</Dialog>
</div>
</React.Fragment>
);
}
Loading