[Pagination] Move from lab to core (#22848)

mui · Oct 3, 2020 · aa21e27 · aa21e27
1 parent ea7d90f
commit aa21e27
Show file tree

Hide file tree

Showing 62 changed files with 1,148 additions and 1,082 deletions.
diff --git a/docs/pages/api-docs/pagination-item.md b/docs/pages/api-docs/pagination-item.md
@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/PaginationItem/PaginationItem.js
+filename: /packages/material-ui/src/PaginationItem/PaginationItem.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/PaginationItem/PaginationItem.js
 ## Import
 
 ```js
-import PaginationItem from '@material-ui/lab/PaginationItem';
+import PaginationItem from '@material-ui/core/PaginationItem';
 // or
-import { PaginationItem } from '@material-ui/lab';
+import { PaginationItem } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -70,7 +70,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/PaginationItem/PaginationItem.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/PaginationItem/PaginationItem.js) for more detail.
 
 ## Demos
 

diff --git a/docs/pages/api-docs/pagination.md b/docs/pages/api-docs/pagination.md
@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/Pagination/Pagination.js
+filename: /packages/material-ui/src/Pagination/Pagination.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/Pagination/Pagination.js
 ## Import
 
 ```js
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 // or
-import { Pagination } from '@material-ui/lab';
+import { Pagination } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -66,7 +66,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/Pagination/Pagination.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Pagination/Pagination.js) for more detail.
 
 ## Demos
 

diff --git a/docs/src/pages.js b/docs/src/pages.js
@@ -57,6 +57,7 @@ const pages = [
           { pathname: '/components/drawers' },
           { pathname: '/components/links' },
           { pathname: '/components/menus' },
+          { pathname: '/components/pagination' },
           { pathname: '/components/speed-dial' },
           { pathname: '/components/steppers' },
           { pathname: '/components/tabs' },
@@ -121,9 +122,6 @@ const pages = [
         subheader: '/components/lab',
         children: [
           { pathname: '/components/about-the-lab' },
-          { pathname: '/components/pagination' },
-          { pathname: '/components/skeleton' },
-          { pathname: '/components/rating' },
           { pathname: '/components/slider-styled' },
           { pathname: '/components/timeline' },
           { pathname: '/components/toggle-button' },

diff --git a/docs/src/pages/components/pagination/BasicPagination.js b/docs/src/pages/components/pagination/BasicPagination.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) => ({
   root: {

diff --git a/docs/src/pages/components/pagination/BasicPagination.tsx b/docs/src/pages/components/pagination/BasicPagination.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) =>
   createStyles({

diff --git a/docs/src/pages/components/pagination/PaginationButtons.js b/docs/src/pages/components/pagination/PaginationButtons.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) => ({
   root: {

diff --git a/docs/src/pages/components/pagination/PaginationButtons.tsx b/docs/src/pages/components/pagination/PaginationButtons.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) =>
   createStyles({

diff --git a/docs/src/pages/components/pagination/PaginationControlled.js b/docs/src/pages/components/pagination/PaginationControlled.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) => ({
   root: {

diff --git a/docs/src/pages/components/pagination/PaginationControlled.tsx b/docs/src/pages/components/pagination/PaginationControlled.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) =>
   createStyles({

diff --git a/docs/src/pages/components/pagination/PaginationLink.js b/docs/src/pages/components/pagination/PaginationLink.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { MemoryRouter, Route } from 'react-router';
 import { Link } from 'react-router-dom';
-import Pagination from '@material-ui/lab/Pagination';
-import PaginationItem from '@material-ui/lab/PaginationItem';
+import Pagination from '@material-ui/core/Pagination';
+import PaginationItem from '@material-ui/core/PaginationItem';
 
 export default function PaginationLink() {
   return (

diff --git a/docs/src/pages/components/pagination/PaginationLink.tsx b/docs/src/pages/components/pagination/PaginationLink.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { MemoryRouter, Route } from 'react-router';
 import { Link } from 'react-router-dom';
-import Pagination from '@material-ui/lab/Pagination';
-import PaginationItem from '@material-ui/lab/PaginationItem';
+import Pagination from '@material-ui/core/Pagination';
+import PaginationItem from '@material-ui/core/PaginationItem';
 
 export default function PaginationLink() {
   return (

diff --git a/docs/src/pages/components/pagination/PaginationOutlined.js b/docs/src/pages/components/pagination/PaginationOutlined.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) => ({
   root: {

diff --git a/docs/src/pages/components/pagination/PaginationOutlined.tsx b/docs/src/pages/components/pagination/PaginationOutlined.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) =>
   createStyles({

diff --git a/docs/src/pages/components/pagination/PaginationRanges.js b/docs/src/pages/components/pagination/PaginationRanges.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) => ({
   root: {

diff --git a/docs/src/pages/components/pagination/PaginationRanges.tsx b/docs/src/pages/components/pagination/PaginationRanges.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) =>
   createStyles({

diff --git a/docs/src/pages/components/pagination/PaginationRounded.js b/docs/src/pages/components/pagination/PaginationRounded.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) => ({
   root: {

diff --git a/docs/src/pages/components/pagination/PaginationRounded.tsx b/docs/src/pages/components/pagination/PaginationRounded.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) =>
   createStyles({

diff --git a/docs/src/pages/components/pagination/PaginationSize.js b/docs/src/pages/components/pagination/PaginationSize.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) => ({
   root: {

diff --git a/docs/src/pages/components/pagination/PaginationSize.tsx b/docs/src/pages/components/pagination/PaginationSize.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
-import Pagination from '@material-ui/lab/Pagination';
+import Pagination from '@material-ui/core/Pagination';
 
 const useStyles = makeStyles((theme) =>
   createStyles({

diff --git a/docs/src/pages/components/pagination/UsePagination.js b/docs/src/pages/components/pagination/UsePagination.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { usePagination } from '@material-ui/lab/Pagination';
+import usePagination from '@material-ui/core/usePagination';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({

diff --git a/docs/src/pages/components/pagination/UsePagination.tsx b/docs/src/pages/components/pagination/UsePagination.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { usePagination } from '@material-ui/lab/Pagination';
+import usePagination from '@material-ui/core/usePagination';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({

diff --git a/docs/src/pages/components/pagination/pagination-de.md b/docs/src/pages/components/pagination/pagination-de.md
@@ -52,7 +52,7 @@ You can specify how many digits to display either side of current page with the
 For advanced customization use cases, we expose a `usePagination()` hook. It accepts almost the same options as the Pagination component minus all the props related to the rendering of JSX. The Pagination component uses this hook internally.
 
 ```jsx
-import { usePagination } from '@material-ui/lab/Pagination';
+import { usePagination } from '@material-ui/core/usePagination';
 ```
 
 {{"demo": "pages/components/pagination/UsePagination.js"}}

diff --git a/docs/src/pages/components/pagination/pagination-es.md b/docs/src/pages/components/pagination/pagination-es.md
@@ -52,7 +52,7 @@ Puede especificar cuántos dígitos mostrar en ambos lados de la página actual
 For advanced customization use cases, we expose a `usePagination()` hook. It accepts almost the same options as the Pagination component minus all the props related to the rendering of JSX. The Pagination component uses this hook internally.
 
 ```jsx
-import { usePagination } from '@material-ui/lab/Pagination';
+import { usePagination } from '@material-ui/core/Pagination';
 ```
 
 {{"demo": "pages/components/pagination/UsePagination.js"}}

diff --git a/docs/src/pages/components/pagination/pagination-fr.md b/docs/src/pages/components/pagination/pagination-fr.md
@@ -52,7 +52,7 @@ Vous pouvez spécifier le nombre de chiffres à afficher de chaque côté de la
 Pour les cas d'utilisation de personnalisation avancée, nous exposons un hook `usePagination()`. Il accepte presque les mêmes options que le composant de Pagination moins tous les propriétés liés au rendu de JSX. Le composant de Pagination utilise ce hook en interne.
 
 ```jsx
-import { usePagination } from '@material-ui/lab/Pagination';
+import { usePagination } from '@material-ui/core/Pagination';
 ```
 
 {{"demo": "pages/components/pagination/UsePagination.js"}}

diff --git a/docs/src/pages/components/pagination/pagination-ja.md b/docs/src/pages/components/pagination/pagination-ja.md
@@ -52,7 +52,7 @@ You can specify how many digits to display either side of current page with the
 For advanced customization use cases, we expose a `usePagination()` hook. It accepts almost the same options as the Pagination component minus all the props related to the rendering of JSX. The Pagination component uses this hook internally.
 
 ```jsx
-import { usePagination } from '@material-ui/lab/Pagination';
+import usePagination from '@material-ui/core/Pagination';
 ```
 
 {{"demo": "pages/components/pagination/UsePagination.js"}}

diff --git a/docs/src/pages/components/pagination/pagination-pt.md b/docs/src/pages/components/pagination/pagination-pt.md
@@ -52,7 +52,7 @@ Você pode especificar quantos dígitos exibir a qualquer lado da página atual
 Para casos avançados de uso de customização, nós expomos um hook `usePagination()`. Ele aceita quase as mesmas opções que o componente de paginação, menos todas as propriedades relacionadas à renderização de JSX. O componente de paginação usa este hook internamente.
 
 ```jsx
-import { usePagination } from '@material-ui/lab/Pagination';
+import { usePagination } from '@material-ui/core/Pagination';
 ```
 
 {{"demo": "pages/components/pagination/UsePagination.js"}}

diff --git a/docs/src/pages/components/pagination/pagination-ru.md b/docs/src/pages/components/pagination/pagination-ru.md
@@ -52,7 +52,7 @@ You can specify how many digits to display either side of current page with the
 For advanced customization use cases, we expose a `usePagination()` hook. It accepts almost the same options as the Pagination component minus all the props related to the rendering of JSX. The Pagination component uses this hook internally.
 
 ```jsx
-import { usePagination } from '@material-ui/lab/Pagination';
+import { usePagination } from '@material-ui/core/Pagination';
 ```
 
 {{"demo": "pages/components/pagination/UsePagination.js"}}

diff --git a/docs/src/pages/components/pagination/pagination-zh.md b/docs/src/pages/components/pagination/pagination-zh.md
@@ -52,7 +52,7 @@ packageName: '@material-ui/lab'
 针对高级定制的用例，我们提供了一个 `usePagination()` hook。 它支持的选项与分页组件大致相同，但不包括与 JSX 渲染有关的所有属性。 分页组件内部也使用此 hook。
 
 ```jsx
-import { usePagination } from '@material-ui/lab/Pagination';
+import { usePagination } from '@material-ui/core/Pagination';
 ```
 
 {{"demo": "pages/components/pagination/UsePagination.js"}}

diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md
@@ -2,7 +2,6 @@
 title: React Pagination component
 components: Pagination, PaginationItem
 githubLabel: 'component: Pagination'
-packageName: '@material-ui/lab'
 ---
 
 # Pagination
@@ -55,7 +54,7 @@ related to the rendering of JSX.
 The Pagination component uses this hook internally.
 
 ```jsx
-import { usePagination } from '@material-ui/lab/Pagination';
+import { usePagination } from '@material-ui/core/Pagination';
 ```
 
 {{"demo": "pages/components/pagination/UsePagination.js"}}

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -213,7 +213,9 @@ const theme = createMuitheme({
 
   ```diff
   -import Autocomplete from '@material-ui/lab/Autocomplete';
+  -import useAutocomplete  from '@material-ui/lab/useAutocomplete';
   +import Autocomplete from '@material-ui/core/Autocomplete';
+  +import useAutoComplete from '@material-ui/core/useAutocomplete';
   ```
 
 ### Avatar
@@ -489,6 +491,17 @@ const theme = createMuitheme({
 
 ### Pagination
 
+- Move the component from the lab to the core. The component is now stable.
+
+  ```diff
+  -import Pagination from '@material-ui/lab/Pagination';
+  -import PaginationItem from '@material-ui/lab/PaginationItem';
+  -import { usePagination } from '@material-ui/lab/Pagination';
+  +import Pagination from '@material-ui/core/Pagination';
+  +import PaginationItem from '@material-ui/core/PaginationItem';
+  +import usePagination from '@material-ui/core/usePagination';
+  ```
+
 - Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:
 
   ```diff