fix feedback

mui · Jan 16, 2020 · 46081cd · 46081cd
1 parent 3a882dc
commit 46081cd
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 44 deletions.
diff --git a/...pages/components/pagination/Pagination.js → .../components/pagination/BasicPagination.js b/...pages/components/pagination/Pagination.js → .../components/pagination/BasicPagination.js
diff --git a/...ages/components/pagination/Pagination.tsx → ...components/pagination/BasicPagination.tsx b/...ages/components/pagination/Pagination.tsx → ...components/pagination/BasicPagination.tsx
diff --git a/docs/src/pages/components/pagination/PaginationLink.js b/docs/src/pages/components/pagination/PaginationLink.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import Pagination from '@material-ui/lab/Pagination';
 import PaginationItem from '@material-ui/lab/PaginationItem';
@@ -13,10 +13,6 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-// The use of React.forwardRef will no longer be required for react-router-dom v6.
-// See https://github.com/ReactTraining/react-router/issues/6056
-const Link = React.forwardRef((props, ref) => <RouterLink innerRef={ref} {...props} />);
-
 export default function PaginationLink() {
   return (
     <Router>

diff --git a/docs/src/pages/components/pagination/PaginationLink.tsx b/docs/src/pages/components/pagination/PaginationLink.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Pagination from '@material-ui/lab/Pagination';
 import PaginationItem from '@material-ui/lab/PaginationItem';
@@ -15,12 +15,6 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-// The use of React.forwardRef will no longer be required for react-router-dom v6.
-// See https://github.com/ReactTraining/react-router/issues/6056
-const Link = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
-  <RouterLink innerRef={ref} {...props} />
-));
-
 export default function PaginationLink() {
   return (
     <Router>

diff --git a/docs/src/pages/components/pagination/PaginationLink2.js b/docs/src/pages/components/pagination/PaginationLink2.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import { usePagination } from '@material-ui/lab/Pagination';
 import Pagination from '@material-ui/lab/Pagination';
@@ -14,10 +14,6 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-// The use of React.forwardRef will no longer be required for react-router-dom v6.
-// See https://github.com/ReactTraining/react-router/issues/6056
-const Link = React.forwardRef((props, ref) => <RouterLink innerRef={ref} {...props} />);
-
 export default function PaginationLink2() {
   const { items } = usePagination({
     count: 10,
@@ -27,12 +23,11 @@ export default function PaginationLink2() {
     <Router>
       <Pagination>
         {items.map((item, index) => (
-          <li>
+          <li key={index.toString()}>
             <PaginationItem
               to={`/cars${item.page === 1 ? '' : `?page=${item.page}`}`}
               component={Link}
               {...item}
-              key={index.toString()}
             />
           </li>
         ))}

diff --git a/docs/src/pages/components/pagination/PaginationLink2.tsx b/docs/src/pages/components/pagination/PaginationLink2.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { usePagination } from '@material-ui/lab/Pagination';
 import Pagination from '@material-ui/lab/Pagination';
@@ -16,12 +16,6 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-// The use of React.forwardRef will no longer be required for react-router-dom v6.
-// See https://github.com/ReactTraining/react-router/issues/6056
-const Link = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
-  <RouterLink innerRef={ref} {...props} />
-));
-
 export default function PaginationLink2() {
   const { items } = usePagination({
     count: 10,
@@ -31,12 +25,11 @@ export default function PaginationLink2() {
     <Router>
       <Pagination>
         {items.map((item, index) => (
-          <li>
+          <li key={index.toString()}>
             <PaginationItem
               to={`/cars${item.page === 1 ? '' : `?page=${item.page}`}`}
               component={Link}
               {...item}
-              key={index.toString()}
             />
           </li>
         ))}

diff --git a/...s/pagination/PaginationOutlinedRounded.js → ...omponents/pagination/PaginationRounded.js b/...s/pagination/PaginationOutlinedRounded.js → ...omponents/pagination/PaginationRounded.js
@@ -10,15 +10,13 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default function PaginationOutlinedRounded() {
+export default function PaginationRounded() {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
+      <Pagination count={10} shape="rounded" />
       <Pagination count={10} variant="outlined" shape="rounded" />
-      <Pagination count={10} variant="outlined" shape="rounded" color="primary" />
-      <Pagination count={10} variant="outlined" shape="rounded" color="secondary" />
-      <Pagination count={10} variant="outlined" shape="rounded" disabled />
     </div>
   );
 }
diff --git a/.../pagination/PaginationOutlinedRounded.tsx → ...mponents/pagination/PaginationRounded.tsx b/.../pagination/PaginationOutlinedRounded.tsx → ...mponents/pagination/PaginationRounded.tsx
@@ -12,15 +12,13 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export default function PaginationOutlinedRounded() {
+export default function PaginationRounded() {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
+      <Pagination count={10} shape="rounded" />
       <Pagination count={10} variant="outlined" shape="rounded" />
-      <Pagination count={10} variant="outlined" shape="rounded" color="primary" />
-      <Pagination count={10} variant="outlined" shape="rounded" color="secondary" />
-      <Pagination count={10} variant="outlined" shape="rounded" disabled />
     </div>
   );
 }
diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md
@@ -9,15 +9,15 @@ components: Pagination
 
 ## Pagination
 
-{{"demo": "pages/components/pagination/Pagination.js"}}
+{{"demo": "pages/components/pagination/BasicPagination.js"}}
 
 ## Outlined pagination
 
 {{"demo": "pages/components/pagination/PaginationOutlined.js"}}
 
-## Outlined rounded pagination
+## Rounded pagination
 
-{{"demo": "pages/components/pagination/PaginationOutlinedRounded.js"}}
+{{"demo": "pages/components/pagination/PaginationRounded.js"}}
 
 ## Pagination size
 

diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js
@@ -11,7 +11,7 @@ export const styles = {
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'center',
-    listStyleType: 'none',
+    listStyle: 'none',
     padding: 0, // Reset
     margin: 0, // Reset
   },
@@ -46,7 +46,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) {
     >
       {children ||
         items.map((item, index) => (
-          <li>{renderItem({ key: index.toString(), ...item, ...itemProps })}</li>
+          <li key={index.toString()}>{renderItem({ ...item, ...itemProps })}</li>
         ))}
     </ul>
   );

diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
@@ -189,6 +189,9 @@ const styles = theme => ({
     textAlign: 'center',
     width: 24,
     margin: '0 8px',
+    '&$disabled': {
+      color: fade(theme.palette.text.primary, 0.5),
+    },
     '&sizeSmall': {
       margin: 0,
     },
@@ -209,7 +212,7 @@ function ariaLabel(type, page, selected) {
   return `Go to ${type} page`;
 }
 
-function PaginationItem(props) {
+const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
   const {
     classes,
     className,
@@ -258,7 +261,7 @@ function PaginationItem(props) {
       )}
     </React.Fragment>
   );
-}
+});
 
 PaginationItem.propTypes = {
   /**
@@ -279,7 +282,7 @@ PaginationItem.propTypes = {
    */
   component: PropTypes.elementType,
   /**
-   * If `true`, the button will be disabled.
+   * If `true`, the item will be disabled.
    */
   disabled: PropTypes.bool,
   /**