sort migration page

mui · Aug 1, 2020 · 60c13c9 · 60c13c9
1 parent 90c466f
commit 60c13c9
Showing 1 changed file with 73 additions and 73 deletions.
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -97,6 +97,79 @@ This change affects almost all components where you're using the `component` pro
   }
   ```
 
+### Expansion Panel
+
+- Rename the `ExpansionPanel` components with `Accordion` to use a more common naming convention:
+
+  ```diff
+  -import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+  -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+  -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+  -import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
+  +import Accordion from '@material-ui/core/Accordion';
+  +import AccordionSummary from '@material-ui/core/AccordionSummary';
+  +import AccordionDetails from '@material-ui/core/AccordionDetails';
+  +import AccordionActions from '@material-ui/core/AccordionActions';
+
+  -<ExpansionPanel>
+  +<Accordion>
+  -  <ExpansionPanelSummary>
+  +  <AccordionSummary>
+       <Typography>Location</Typography>
+       <Typography>Select trip destination</Typography>
+  -  </ExpansionPanelSummary>
+  +  </AccordionSummary>
+  -  <ExpansionPanelDetails>
+  +  <AccordionDetails>
+       <Chip label="Barbados" onDelete={() => {}} />
+       <Typography variant="caption">Select your destination of choice</Typography>
+  -  </ExpansionPanelDetails>
+  +  </AccordionDetails>
+     <Divider />
+  -  <ExpansionPanelActions>
+  +  <AccordionActions>
+       <Button size="small">Cancel</Button>
+       <Button size="small">Save</Button>
+  -  </ExpansionPanelActions>
+  +  </AccordionActions>
+  -</ExpansionPanel>
+  +</Accordion>
+  ```
+
+- typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
+
+  ```diff
+  -<Accordion onChange={(event: React.ChangeEvent<{}>, expanded: boolean) => {}} />
+  +<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />
+  ```
+
+### Grid
+
+- Rename `justify` prop with `justifyContent` to be aligned with the CSS property name.
+
+  ```diff
+  -<Grid justify="center">
+  +<Grid justifyContent="center">
+  ```
+
+### Pagination
+
+- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Pagination shape="round">
+  +<Pagination shape="circular">
+  ```
+
+### PaginationItem
+
+- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<PaginationItem shape="round">
+  +<PaginationItem shape="circular">
+  ```
+
 ### Rating
 
 - Rename `visuallyhidden` to `visuallyHidden` for consistency:
@@ -184,76 +257,3 @@ This change affects almost all components where you're using the `component` pro
   -<Typography variant="srOnly">Create a user</Typography>
   +<Span>Create a user</Span>
   ```
-
-### Expansion Panel
-
-- Rename the `ExpansionPanel` components with `Accordion` to use a more common naming convention:
-
-  ```diff
-  -import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-  -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-  -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-  -import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
-  +import Accordion from '@material-ui/core/Accordion';
-  +import AccordionSummary from '@material-ui/core/AccordionSummary';
-  +import AccordionDetails from '@material-ui/core/AccordionDetails';
-  +import AccordionActions from '@material-ui/core/AccordionActions';
-
-  -<ExpansionPanel>
-  +<Accordion>
-  -  <ExpansionPanelSummary>
-  +  <AccordionSummary>
-       <Typography>Location</Typography>
-       <Typography>Select trip destination</Typography>
-  -  </ExpansionPanelSummary>
-  +  </AccordionSummary>
-  -  <ExpansionPanelDetails>
-  +  <AccordionDetails>
-       <Chip label="Barbados" onDelete={() => {}} />
-       <Typography variant="caption">Select your destination of choice</Typography>
-  -  </ExpansionPanelDetails>
-  +  </AccordionDetails>
-     <Divider />
-  -  <ExpansionPanelActions>
-  +  <AccordionActions>
-       <Button size="small">Cancel</Button>
-       <Button size="small">Save</Button>
-  -  </ExpansionPanelActions>
-  +  </AccordionActions>
-  -</ExpansionPanel>
-  +</Accordion>
-  ```
-
-- typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`.
-
-  ```diff
-  -<Accordion onChange={(event: React.ChangeEvent<{}>, expanded: boolean) => {}} />
-  +<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />
-  ```
-
-  ## Grid
-
-  - Rename `justify` prop with `justifyContent` to be aligned with the CSS property name.
-
-  ```diff
-  -<Grid justify="center">
-  +<Grid justifyContent="center">
-  ```
-
-  ## Pagination
-
-  - Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:
-
-  ```diff
-  -<Pagination shape="round">
-  +<Pagination shape="circular">
-  ```
-
-  ## PaginationItem
-
-  - Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:
-
-  ```diff
-  -<PaginationItem shape="round">
-  +<PaginationItem shape="circular">
-  ```