mui · mbrookes · Sep 23, 2020 · Sep 19, 2020 · Sep 19, 2020 · Sep 19, 2020
diff --git a/docs/pages/api-docs/alert-title.md b/docs/pages/api-docs/alert-title.md
@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/AlertTitle/AlertTitle.js
+filename: /packages/material-ui/src/AlertTitle/AlertTitle.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/AlertTitle/AlertTitle.js
 ## Import
 
 ```js
-import AlertTitle from '@material-ui/lab/AlertTitle';
+import AlertTitle from '@material-ui/core/AlertTitle';
 // or
-import { AlertTitle } from '@material-ui/lab';
+import { AlertTitle } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -47,7 +47,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/AlertTitle/AlertTitle.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/AlertTitle/AlertTitle.js) for more detail.
 
 ## Demos
 

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

diff --git a/docs/src/pages.js b/docs/src/pages.js
@@ -73,6 +73,7 @@ const pages = [
  pathname: '/components',
  subheader: '/components/feedback',
  children: [
+ { pathname: '/components/alert' },
  { pathname: '/components/backdrop' },
  { pathname: '/components/dialogs' },
  { pathname: '/components/progress' },
@@ -116,7 +117,6 @@ const pages = [
  subheader: '/components/lab',
  children: [
  { pathname: '/components/about-the-lab' },
- { pathname: '/components/alert' },
  { pathname: '/components/autocomplete' },
  { pathname: '/components/pagination' },
  { pathname: '/components/rating' },

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

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

diff --git a/...rc/pages/components/alert/SimpleAlerts.js → ...src/pages/components/alert/BasicAlerts.js b/...rc/pages/components/alert/SimpleAlerts.js → ...src/pages/components/alert/BasicAlerts.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 
 const useStyles = makeStyles((theme) => ({
  root: {
@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme) => ({
  },
 }));
 
-export default function SimpleAlerts() {
+export default function BasicAlerts() {
  const classes = useStyles();
 
  return (

diff --git a/...c/pages/components/alert/SimpleAlerts.tsx → ...rc/pages/components/alert/BasicAlerts.tsx b/...c/pages/components/alert/SimpleAlerts.tsx → ...rc/pages/components/alert/BasicAlerts.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
  }),
 );
 
-export default function SimpleAlerts() {
+export default function BasicAlerts() {
  const classes = useStyles();
 
  return (

diff --git a/docs/src/pages/components/alert/ColorAlerts.js b/docs/src/pages/components/alert/ColorAlerts.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 
 export default function ColorAlerts() {
  return (

diff --git a/docs/src/pages/components/alert/ColorAlerts.tsx b/docs/src/pages/components/alert/ColorAlerts.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 
 export default function ColorAlerts() {
  return (

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

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

diff --git a/docs/src/pages/components/alert/FilledAlerts.js b/docs/src/pages/components/alert/FilledAlerts.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 
 const useStyles = makeStyles((theme) => ({
  root: {
@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme) => ({
  },
 }));
 
-export default function SimpleAlerts() {
+export default function BasicAlerts() {
  const classes = useStyles();
 
  return (

diff --git a/docs/src/pages/components/alert/FilledAlerts.tsx b/docs/src/pages/components/alert/FilledAlerts.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
  }),
 );
 
-export default function SimpleAlerts() {
+export default function BasicAlerts() {
  const classes = useStyles();
 
  return (

diff --git a/docs/src/pages/components/alert/IconAlerts.js b/docs/src/pages/components/alert/IconAlerts.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 import CheckIcon from '@material-ui/icons/Check';
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 

diff --git a/docs/src/pages/components/alert/IconAlerts.tsx b/docs/src/pages/components/alert/IconAlerts.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 import CheckIcon from '@material-ui/icons/Check';
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
 

diff --git a/docs/src/pages/components/alert/OutlinedAlerts.js b/docs/src/pages/components/alert/OutlinedAlerts.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 
 const useStyles = makeStyles((theme) => ({
  root: {
@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme) => ({
  },
 }));
 
-export default function SimpleAlerts() {
+export default function BasicAlerts() {
  const classes = useStyles();
 
  return (

diff --git a/docs/src/pages/components/alert/OutlinedAlerts.tsx b/docs/src/pages/components/alert/OutlinedAlerts.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 
 const useStyles = makeStyles((theme: Theme) =>
  createStyles({
@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
  }),
 );
 
-export default function SimpleAlerts() {
+export default function BasicAlerts() {
  const classes = useStyles();
 
  return (

diff --git a/docs/src/pages/components/alert/TransitionAlerts.js b/docs/src/pages/components/alert/TransitionAlerts.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 import IconButton from '@material-ui/core/IconButton';
 import Collapse from '@material-ui/core/Collapse';
 import Button from '@material-ui/core/Button';

diff --git a/docs/src/pages/components/alert/TransitionAlerts.tsx b/docs/src/pages/components/alert/TransitionAlerts.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import Alert from '@material-ui/core/Alert';
 import IconButton from '@material-ui/core/IconButton';
 import Collapse from '@material-ui/core/Collapse';
 import Button from '@material-ui/core/Button';

diff --git a/docs/src/pages/components/alert/alert-de.md b/docs/src/pages/components/alert/alert-de.md
@@ -19,7 +19,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 Der Hinweis bietet vier Schweregrade an, welche je ein eigenes Icon und eine eigene Farbe besitzen.
 
-{{"demo": "pages/components/alert/SimpleAlerts.js"}}
+{{"demo": "pages/components/alert/BasicAlerts.js"}}
 
 ## Beschreibung
 

diff --git a/docs/src/pages/components/alert/alert-es.md b/docs/src/pages/components/alert/alert-es.md
@@ -19,7 +19,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 La alerta ofrece cuatro niveles de severidad que distintivamente establecen un icono y un color.
 
-{{"demo": "pages/components/alert/SimpleAlerts.js"}}
+{{"demo": "pages/components/alert/BasicAlerts.js"}}
 
 ## Descripción
 

diff --git a/docs/src/pages/components/alert/alert-fr.md b/docs/src/pages/components/alert/alert-fr.md
@@ -19,7 +19,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 L'alerte offre quatre niveaux de sévérité qui définissent une icône et une couleur distinctes.
 
-{{"demo": "pages/components/alert/SimpleAlerts.js"}}
+{{"demo": "pages/components/alert/BasicAlerts.js"}}
 
 ## Description
 

diff --git a/docs/src/pages/components/alert/alert-ja.md b/docs/src/pages/components/alert/alert-ja.md
@@ -19,7 +19,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 このアラートは、特徴的なアイコンと色を設定する4つの重要度レベルを提供します。
 
-{{"demo": "pages/components/alert/SimpleAlerts.js"}}
+{{"demo": "pages/components/alert/BasicAlerts.js"}}
 
 ## Description
 

diff --git a/docs/src/pages/components/alert/alert-pt.md b/docs/src/pages/components/alert/alert-pt.md
@@ -19,7 +19,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 O alerta oferece quatro níveis de severidade que se distinguem em diferentes ícones e cores.
 
-{{"demo": "pages/components/alert/SimpleAlerts.js"}}
+{{"demo": "pages/components/alert/BasicAlerts.js"}}
 
 ## Descrição
 

diff --git a/docs/src/pages/components/alert/alert-ru.md b/docs/src/pages/components/alert/alert-ru.md
@@ -19,7 +19,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 Alert предлагает 4 уровня предупреждения с уникальным цветом и значком.
 
-{{"demo": "pages/components/alert/SimpleAlerts.js"}}
+{{"demo": "pages/components/alert/BasicAlerts.js"}}
 
 ## Описание
 

diff --git a/docs/src/pages/components/alert/alert-zh.md b/docs/src/pages/components/alert/alert-zh.md
@@ -19,7 +19,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert'
 
 警告提示有四种不同程度的级别，每种都有自己独特的颜色和图标。
 
-{{"demo": "pages/components/alert/SimpleAlerts.js"}}
+{{"demo": "pages/components/alert/BasicAlerts.js"}}
 
 ## 描述
 

diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md
@@ -2,7 +2,6 @@
 title: Alert React component
 components: Alert, AlertTitle
 githubLabel: 'component: Alert'
-packageName: '@material-ui/lab'
 waiAria: https://www.w3.org/TR/wai-aria-practices/#alert
 ---
 
@@ -18,7 +17,7 @@ waiAria: https://www.w3.org/TR/wai-aria-practices/#alert
 
 The alert offers four severity levels that set a distinctive icon and color.
 
-{{"demo": "pages/components/alert/SimpleAlerts.js"}}
+{{"demo": "pages/components/alert/BasicAlerts.js"}}
 
 ## Description
 

diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.js b/docs/src/pages/components/snackbars/CustomizedSnackbars.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
+import MuiAlert from '@material-ui/core/Alert';
 import { makeStyles } from '@material-ui/core/styles';
 
 const Alert = React.forwardRef(function Alert(props, ref) {

diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
+import MuiAlert, { AlertProps } from '@material-ui/core/Alert';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 
 const Alert = React.forwardRef(function Alert(props: AlertProps, ref) {

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -196,6 +196,17 @@ const theme = createMuitheme({
 +theme.breakpoints.up('sm') // '@media (min-width:600px)'
 ```
 
+### Alert
+
+- Move the component from the lab to the core. The component is now stable.
+
+ ```diff
+ -import Alert from '@material-ui/lab/Alert';
+ -import AlertTitle from '@material-ui/lab/AlertTitle';
+ +import Alert from '@material-ui/core/Alert';
+ +import AlertTitle from '@material-ui/core/AlertTitle';
+ ```
+
 ### Avatar
 
 - Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns: