From ec442d8cdc87bfc8bd6f55de44f9f8fc6668242e Mon Sep 17 00:00:00 2001 From: Jim Withington Date: Wed, 28 Feb 2024 17:41:00 -0800 Subject: [PATCH 1/5] rearrange import to fix hierarchy --- docs/data/material/components/dialogs/SimpleDialogDemo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/components/dialogs/SimpleDialogDemo.js b/docs/data/material/components/dialogs/SimpleDialogDemo.js index 3406e1a0bf0de9..cfe8dda6474192 100644 --- a/docs/data/material/components/dialogs/SimpleDialogDemo.js +++ b/docs/data/material/components/dialogs/SimpleDialogDemo.js @@ -7,8 +7,8 @@ import ListItem from '@mui/material/ListItem'; import ListItemAvatar from '@mui/material/ListItemAvatar'; import ListItemButton from '@mui/material/ListItemButton'; import ListItemText from '@mui/material/ListItemText'; -import DialogTitle from '@mui/material/DialogTitle'; import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; import PersonIcon from '@mui/icons-material/Person'; import AddIcon from '@mui/icons-material/Add'; import Typography from '@mui/material/Typography'; From 0cea86aff8d70ea2fda8c605d477bf766cd7500a Mon Sep 17 00:00:00 2001 From: Jim Withington Date: Wed, 28 Feb 2024 17:51:07 -0800 Subject: [PATCH 2/5] edit dialogs.md based on othere recent doc updates --- .../material/components/dialogs/dialogs.md | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index cbf62b794778ed..67c4b305713d79 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -17,18 +17,26 @@ Dialogs are purposefully interruptive, so they should be used sparingly. {{"component": "modules/components/ComponentLinkHeader.js"}} -## Basic dialog +## Introduction -Simple dialogs can provide additional details or actions about a list item. -For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account). +Dialogs are implemented using a collection of related components: -Touch mechanics: - -- Choosing an option immediately commits the option and closes the menu -- Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog +- Dialog: the Dialog itself is a container that includes anything needed to be in the modal. +- Dialog Title: a wrapper used for the title of a Dialog. +- Dialog Actions: an optional container for a Dialog's Buttons. +- Dialog Content: an optional container for displaying the Dialog's content. +- Dialog Content Text: a wrapper used for text inside `. - +- Slide: optional [Transtion]( https://mui.com/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen. {{"demo": "SimpleDialogDemo.js"}} +## Basics + +```jsx +import Dialog from '@mui/material/Dialog'; +import DialogTitle from '@mui/material/DialogTitle'; +``` + ## Alerts Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation. From 59cf0f02fa8a2a6b6f6ec130e920bfcef4515821 Mon Sep 17 00:00:00 2001 From: Jim Withington Date: Wed, 28 Feb 2024 18:30:49 -0800 Subject: [PATCH 3/5] commit after running prettier, linters, etc. --- docs/data/material/components/dialogs/SimpleDialogDemo.js | 2 +- docs/data/material/components/dialogs/dialogs.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/material/components/dialogs/SimpleDialogDemo.js b/docs/data/material/components/dialogs/SimpleDialogDemo.js index cfe8dda6474192..3406e1a0bf0de9 100644 --- a/docs/data/material/components/dialogs/SimpleDialogDemo.js +++ b/docs/data/material/components/dialogs/SimpleDialogDemo.js @@ -7,8 +7,8 @@ import ListItem from '@mui/material/ListItem'; import ListItemAvatar from '@mui/material/ListItemAvatar'; import ListItemButton from '@mui/material/ListItemButton'; import ListItemText from '@mui/material/ListItemText'; -import Dialog from '@mui/material/Dialog'; import DialogTitle from '@mui/material/DialogTitle'; +import Dialog from '@mui/material/Dialog'; import PersonIcon from '@mui/icons-material/Person'; import AddIcon from '@mui/icons-material/Add'; import Typography from '@mui/material/Typography'; diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index 67c4b305713d79..8035ff90f7f78a 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -21,12 +21,12 @@ Dialogs are purposefully interruptive, so they should be used sparingly. Dialogs are implemented using a collection of related components: -- Dialog: the Dialog itself is a container that includes anything needed to be in the modal. +- Dialog: the Dialog itself is a container that includes anything needed to be in the modal. - Dialog Title: a wrapper used for the title of a Dialog. -- Dialog Actions: an optional container for a Dialog's Buttons. +- Dialog Actions: an optional container for a Dialog's Buttons. - Dialog Content: an optional container for displaying the Dialog's content. - Dialog Content Text: a wrapper used for text inside `. - -- Slide: optional [Transtion]( https://mui.com/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen. +- Slide: optional [Transtion](https://mui.com/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen. {{"demo": "SimpleDialogDemo.js"}} From 5ffb408c7c4be6b9de16f1dfee9d013918b331de Mon Sep 17 00:00:00 2001 From: Jim Withington Date: Wed, 28 Feb 2024 19:01:42 -0800 Subject: [PATCH 4/5] fix typos --- docs/data/material/components/dialogs/dialogs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index 8035ff90f7f78a..04ab8d4465e9b9 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -25,8 +25,8 @@ Dialogs are implemented using a collection of related components: - Dialog Title: a wrapper used for the title of a Dialog. - Dialog Actions: an optional container for a Dialog's Buttons. - Dialog Content: an optional container for displaying the Dialog's content. -- Dialog Content Text: a wrapper used for text inside `. - -- Slide: optional [Transtion](https://mui.com/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen. +- Dialog Content Text: a wrapper used for text inside ``. - +- Slide: optional [Transition](https://mui.com/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen. {{"demo": "SimpleDialogDemo.js"}} From 47c1cb59caf99489f08c91d5a44c294e7127133a Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Tue, 12 Mar 2024 08:13:01 -0500 Subject: [PATCH 5/5] Apply suggestions from code review Signed-off-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> --- docs/data/material/components/dialogs/dialogs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index 04ab8d4465e9b9..fc90f242b05e20 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -21,11 +21,11 @@ Dialogs are purposefully interruptive, so they should be used sparingly. Dialogs are implemented using a collection of related components: -- Dialog: the Dialog itself is a container that includes anything needed to be in the modal. +- Dialog: the parent component that renders the modal. - Dialog Title: a wrapper used for the title of a Dialog. - Dialog Actions: an optional container for a Dialog's Buttons. - Dialog Content: an optional container for displaying the Dialog's content. -- Dialog Content Text: a wrapper used for text inside ``. - +- Dialog Content Text: a wrapper for text inside of ``. - Slide: optional [Transition](https://mui.com/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen. {{"demo": "SimpleDialogDemo.js"}}