[Pagination] Rename round -> circular for consistency (#22009)

mui · Aug 1, 2020 · ceffdd9 · ceffdd9
1 parent 41e81f2
commit ceffdd9
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 63 deletions.
diff --git a/docs/pages/api-docs/pagination-item.md b/docs/pages/api-docs/pagination-item.md
@@ -34,7 +34,7 @@ The `MuiPaginationItem` name can be used for providing [default props](/customiz
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the item will be disabled. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> |  | The current page number. |
 | <span class="prop-name">selected</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true` the pagination item is selected. |
-| <span class="prop-name">shape</span> | <span class="prop-type">'round'<br>&#124;&nbsp;'rounded'</span> | <span class="prop-default">'round'</span> | The shape of the pagination item. |
+| <span class="prop-name">shape</span> | <span class="prop-type">'circular'<br>&#124;&nbsp;'rounded'</span> | <span class="prop-default">'circular'</span> | The shape of the pagination item. |
 | <span class="prop-name">size</span> | <span class="prop-type">'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the pagination item. |
 | <span class="prop-name">type</span> | <span class="prop-type">'end-ellipsis'<br>&#124;&nbsp;'first'<br>&#124;&nbsp;'last'<br>&#124;&nbsp;'next'<br>&#124;&nbsp;'page'<br>&#124;&nbsp;'previous'<br>&#124;&nbsp;'start-ellipsis'</span> | <span class="prop-default">'page'</span> | The type of pagination item. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'outlined'<br>&#124;&nbsp;'text'</span> | <span class="prop-default">'text'</span> | The pagination item variant. |

diff --git a/docs/pages/api-docs/pagination.md b/docs/pages/api-docs/pagination.md
@@ -40,7 +40,7 @@ The `MuiPagination` name can be used for providing [default props](/customizatio
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the page is changed.<br><br>**Signature:**<br>`function(event: object, page: number) => void`<br>*event:* The event source of the callback.<br>*page:* The page selected. |
 | <span class="prop-name">page</span> | <span class="prop-type">number</span> |  | The current page. |
 | <span class="prop-name">renderItem</span> | <span class="prop-type">func</span> | <span class="prop-default">(item) => &lt;PaginationItem {...item} /></span> | Render the item.<br><br>**Signature:**<br>`function(params: PaginationRenderItemParams) => ReactNode`<br>*params:* The props to spread on a PaginationItem. |
-| <span class="prop-name">shape</span> | <span class="prop-type">'round'<br>&#124;&nbsp;'rounded'</span> | <span class="prop-default">'round'</span> | The shape of the pagination items. |
+| <span class="prop-name">shape</span> | <span class="prop-type">'circular'<br>&#124;&nbsp;'rounded'</span> | <span class="prop-default">'circular'</span> | The shape of the pagination items. |
 | <span class="prop-name">showFirstButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the first-page button. |
 | <span class="prop-name">showLastButton</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, show the last-page button. |
 | <span class="prop-name">siblingCount</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Number of always visible pages before and after the current page. |

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,58 +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">
-  ```
diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts
@@ -41,7 +41,7 @@ export interface PaginationProps
   /**
    * The shape of the pagination items.
    */
-  shape?: 'round' | 'rounded';
+  shape?: 'circular' | 'rounded';
   /**
    * The size of the pagination component.
    */

diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js
@@ -41,7 +41,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) {
     onChange,
     page,
     renderItem = (item) => <PaginationItem {...item} />,
-    shape = 'round',
+    shape = 'circular',
     showFirstButton,
     showLastButton,
     siblingCount,
@@ -159,7 +159,7 @@ Pagination.propTypes = {
   /**
    * The shape of the pagination items.
    */
-  shape: PropTypes.oneOf(['round', 'rounded']),
+  shape: PropTypes.oneOf(['circular', 'rounded']),
   /**
    * If `true`, show the first-page button.
    * @default false

diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts
@@ -23,7 +23,7 @@ export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'di
     /**
      * The shape of the pagination item.
      */
-    shape?: 'round' | 'rounded';
+    shape?: 'circular' | 'rounded';
     /**
      * The size of the pagination item.
      */

diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
@@ -207,7 +207,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
     disabled = false,
     page,
     selected = false,
-    shape = 'round',
+    shape = 'circular',
     size = 'medium',
     type = 'page',
     variant = 'text',
@@ -312,7 +312,7 @@ PaginationItem.propTypes = {
   /**
    * The shape of the pagination item.
    */
-  shape: PropTypes.oneOf(['round', 'rounded']),
+  shape: PropTypes.oneOf(['circular', 'rounded']),
   /**
    * The size of the pagination item.
    */