[Skeleton] Move from lab to core (#22740)

* [Skeleton] Move from lab to core

* update docs

* docs:api

docs/pages/api-docs/skeleton.md

@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/Skeleton/Skeleton.js
+filename: /packages/material-ui/src/Skeleton/Skeleton.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/Skeleton/Skeleton.js
 ## Import
 
 ```js
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 // or
-import { Skeleton } from '@material-ui/lab';
+import { Skeleton } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -60,7 +60,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/Skeleton/Skeleton.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/Skeleton/Skeleton.js) for more detail.
 
 ## Demos
 

docs/src/pages.js

@@ -78,6 +78,7 @@ const pages = [
           { pathname: '/components/backdrop' },
           { pathname: '/components/dialogs' },
           { pathname: '/components/progress' },
+          { pathname: '/components/skeleton' },
           { pathname: '/components/snackbars' },
         ],
       },
@@ -121,6 +122,7 @@ const pages = [
           { pathname: '/components/autocomplete' },
           { pathname: '/components/pagination' },
           { pathname: '/components/skeleton' },
+          { pathname: '/components/rating' },
           { pathname: '/components/slider-styled' },
           { pathname: '/components/speed-dial' },
           { pathname: '/components/timeline' },

docs/src/pages/components/skeleton/Animations.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
@@ -13,8 +13,8 @@ export default function Animations() {
   return (
     <div className={classes.root}>
       <Skeleton />
-      <Skeleton animation={false} />
       <Skeleton animation="wave" />
+      <Skeleton animation={false} />
     </div>
   );
 }

docs/src/pages/components/skeleton/Animations.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
@@ -13,8 +13,8 @@ export default function Animations() {
   return (
     <div className={classes.root}>
       <Skeleton />
-      <Skeleton animation={false} />
       <Skeleton animation="wave" />
+      <Skeleton animation={false} />
     </div>
   );
 }

docs/src/pages/components/skeleton/Facebook.js

@@ -9,7 +9,7 @@ import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 
 const useStyles = makeStyles((theme) => ({
   card: {

docs/src/pages/components/skeleton/Facebook.tsx

@@ -8,7 +8,7 @@ import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({

docs/src/pages/components/skeleton/SkeletonChildren.js

@@ -5,7 +5,7 @@ import Typography from '@material-ui/core/Typography';
 import Avatar from '@material-ui/core/Avatar';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 
 const useStyles = makeStyles(() => ({
   image: {

docs/src/pages/components/skeleton/SkeletonChildren.tsx

@@ -4,7 +4,7 @@ import Typography from '@material-ui/core/Typography';
 import Avatar from '@material-ui/core/Avatar';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 
 const useStyles = makeStyles(() => ({
   image: {

docs/src/pages/components/skeleton/SkeletonTypography.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 import Grid from '@material-ui/core/Grid';
 
 const variants = ['h1', 'h3', 'body1', 'caption'];

docs/src/pages/components/skeleton/SkeletonTypography.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Typography, { TypographyProps } from '@material-ui/core/Typography';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 import Grid from '@material-ui/core/Grid';
 
 const variants = [

docs/src/pages/components/skeleton/Variants.js

@@ -1,9 +1,20 @@
 import * as React from 'react';
-import Skeleton from '@material-ui/lab/Skeleton';
+import { makeStyles } from '@material-ui/core/styles';
+import Skeleton from '@material-ui/core/Skeleton';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > *': {
+      marginTop: theme.spacing(1),
+    },
+  },
+}));
 
 export default function Variants() {
+  const classes = useStyles();
+
   return (
-    <div>
+    <div className={classes.root}>
       <Skeleton variant="text" />
       <Skeleton variant="circular" width={40} height={40} />
       <Skeleton variant="rectangular" width={210} height={118} />

docs/src/pages/components/skeleton/Variants.tsx

@@ -1,9 +1,22 @@
 import * as React from 'react';
-import Skeleton from '@material-ui/lab/Skeleton';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Skeleton from '@material-ui/core/Skeleton';
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    root: {
+      '& > *': {
+        marginTop: theme.spacing(1),
+      },
+    },
+  }),
+);
 
 export default function Variants() {
+  const classes = useStyles();
+
   return (
-    <div>
+    <div className={classes.root}>
       <Skeleton variant="text" />
       <Skeleton variant="circular" width={40} height={40} />
       <Skeleton variant="rectangular" width={210} height={118} />

docs/src/pages/components/skeleton/YouTube.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 
 const data = [
   {

docs/src/pages/components/skeleton/YouTube.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
 
 const data = [
   {

docs/src/pages/components/skeleton/skeleton.md

@@ -2,14 +2,13 @@
 title: Skeleton React component
 components: Skeleton
 githubLabel: 'component: Skeleton'
-packageName: '@material-ui/lab'
 ---
 
 # Skeleton
 
 <p class="description">Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.</p>
 
-The data for your components might not be immediately available. You can increase the perceived performance for users by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)).
+The data for your components might not be immediately available. You can improve the perceived responsiveness of the page by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)).
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
@@ -85,7 +84,15 @@ loading ? (
 
 ## Accessibility
 
-Skeleton screens provide an alternative to the traditional spinner methods.
+Skeleton screens provide an alternative to the traditional spinner method.
 Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load.
 
 The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments).
+
+### ARIA
+
+None.
+
+### Keyboard
+
+The skeleton is not focusable.

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -567,6 +567,13 @@ const theme = createMuitheme({
 
 ### Skeleton
 
+- Move the component from the lab to the core. The component is now stable.
+
+  ```diff
+  -import Skeleton from '@material-ui/lab/Skeleton';
+  +import Skeleton from '@material-ui/core/Skeleton';
+  ```
+
 - Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
 
   ```diff

packages/material-ui-lab/src/Skeleton/Skeleton.d.ts

@@ -1,81 +1,2 @@
-import * as React from 'react';
-import { OverridableStringUnion } from '@material-ui/types';
-import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
-
-export interface SkeletonPropsVariantOverrides {}
-export type SkeletonVariantDefaults = Record<'text' | 'rectangular' | 'circular', true>;
-
-export interface SkeletonTypeMap<P = {}, D extends React.ElementType = 'span'> {
-  props: P & {
-    /**
-     * The animation.
-     * If `false` the animation effect is disabled.
-     * @default 'pulse'
-     */
-    animation?: 'pulse' | 'wave' | false;
-    /**
-     * Optional children to infer width and height from.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: {
-      /** Styles applied to the root element. */
-      root?: string;
-      /** Styles applied to the root element if `variant="text"`. */
-      text?: string;
-      /** Styles applied to the root element if `variant="rectangular"`. */
-      rectangular?: string;
-      /** Styles applied to the root element if `variant="circular"`. */
-      circular?: string;
-      /** Styles applied to the root element if `animation="pulse"`. */
-      pulse?: string;
-      /** Styles applied to the root element if `animation="wave"`. */
-      wave?: string;
-      /** Styles applied when the component is passed children. */
-      withChildren?: string;
-      /** Styles applied when the component is passed children and no width. */
-      fitContent?: string;
-      /** Styles applied when the component is passed children and no height. */
-      heightAuto?: string;
-    };
-    /**
-     * Height of the skeleton.
-     * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
-     */
-    height?: number | string;
-    /**
-     * The type of content that will be rendered.
-     * @default 'text'
-     */
-    variant?: OverridableStringUnion<SkeletonVariantDefaults, SkeletonPropsVariantOverrides>;
-    /**
-     * Width of the skeleton.
-     * Useful when the skeleton is inside an inline element with no width of its own.
-     */
-    width?: number | string;
-  };
-  defaultComponent: 'div';
-}
-
-/**
- *
- * Demos:
- *
- * - [Skeleton](https://material-ui.com/components/skeleton/)
- *
- * API:
- *
- * - [Skeleton API](https://material-ui.com/api/skeleton/)
- */
-declare const Skeleton: OverridableComponent<SkeletonTypeMap>;
-
-export type SkeletonClassKey = keyof NonNullable<SkeletonTypeMap['props']['classes']>;
-
-export type SkeletonProps<
-  D extends React.ElementType = SkeletonTypeMap['defaultComponent'],
-  P = {}
-> = OverrideProps<SkeletonTypeMap<P, D>, D>;
-
-export default Skeleton;
+export { default } from '@material-ui/core/Skeleton';
+export * from '@material-ui/core/Skeleton';