From 1b50dd10543e537a2e8922ef379fe8739506d3da Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos <dimitrimitropoulos@gmail.com>
Date: Fri, 13 Dec 2019 15:16:21 -0500
Subject: [PATCH] Changes to AlertContent and provides functionality for text
 or container

---
 ...{alert-description.js => alert-content.js} |  2 +-
 ...{alert-description.md => alert-content.md} | 15 ++---
 .../src/pages/components/alert/SimpleAlert.js |  7 +--
 .../pages/components/alert/SimpleAlert.tsx    |  6 +-
 .../src/AlertContent/AlertContent.d.ts        | 13 +++++
 .../src/AlertContent/AlertContent.js          | 58 +++++++++++++++++++
 .../AlertContent.test.js}                     |  8 +--
 .../src/AlertContent/index.d.ts               |  2 +
 .../material-ui-lab/src/AlertContent/index.js |  1 +
 .../AlertDescription/AlertDescription.d.ts    | 11 ----
 .../src/AlertDescription/AlertDescription.js  | 40 -------------
 .../src/AlertDescription/index.d.ts           |  2 -
 .../src/AlertDescription/index.js             |  1 -
 packages/material-ui-lab/src/index.d.ts       |  4 +-
 packages/material-ui-lab/src/index.js         |  4 +-
 15 files changed, 97 insertions(+), 77 deletions(-)
 rename docs/pages/api/{alert-description.js => alert-content.js} (79%)
 rename docs/pages/api/{alert-description.md => alert-content.md} (60%)
 create mode 100644 packages/material-ui-lab/src/AlertContent/AlertContent.d.ts
 create mode 100644 packages/material-ui-lab/src/AlertContent/AlertContent.js
 rename packages/material-ui-lab/src/{AlertDescription/AlertDescription.test.js => AlertContent/AlertContent.test.js} (70%)
 create mode 100644 packages/material-ui-lab/src/AlertContent/index.d.ts
 create mode 100644 packages/material-ui-lab/src/AlertContent/index.js
 delete mode 100644 packages/material-ui-lab/src/AlertDescription/AlertDescription.d.ts
 delete mode 100644 packages/material-ui-lab/src/AlertDescription/AlertDescription.js
 delete mode 100644 packages/material-ui-lab/src/AlertDescription/index.d.ts
 delete mode 100644 packages/material-ui-lab/src/AlertDescription/index.js

diff --git a/docs/pages/api/alert-description.js b/docs/pages/api/alert-content.js
similarity index 79%
rename from docs/pages/api/alert-description.js
rename to docs/pages/api/alert-content.js
index ea68a33ba8b520..83d6486e419d4e 100644
--- a/docs/pages/api/alert-description.js
+++ b/docs/pages/api/alert-content.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from './alert-description.md';
+import markdown from './alert-content.md';
 
 export default function Page() {
   return <MarkdownDocs markdown={markdown} />;
diff --git a/docs/pages/api/alert-description.md b/docs/pages/api/alert-content.md
similarity index 60%
rename from docs/pages/api/alert-description.md
rename to docs/pages/api/alert-content.md
index eeee2355d46daa..f1b3e490cd9129 100644
--- a/docs/pages/api/alert-description.md
+++ b/docs/pages/api/alert-content.md
@@ -1,19 +1,19 @@
 ---
-filename: /packages/material-ui-lab/src/AlertDescription/AlertDescription.js
+filename: /packages/material-ui-lab/src/AlertContent/AlertContent.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
 
-# AlertDescription API
+# AlertContent API
 
-<p class="description">The API documentation of the AlertDescription React component. Learn more about the props and the CSS customization points.</p>
+<p class="description">The API documentation of the AlertContent React component. Learn more about the props and the CSS customization points.</p>
 
 ## Import
 
 ```js
-import AlertDescription from '@material-ui/lab/AlertDescription';
+import AlertContent from '@material-ui/lab/AlertContent';
 // or
-import { AlertDescription } from '@material-ui/lab';
+import { AlertContent } from '@material-ui/lab';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -25,6 +25,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'text'<br>&#124;&nbsp;'container'</span> | <span class="prop-default">'text'</span> | The variant to use. Use `text` to conditionally wrap the description with a "Typography". Use `container` to leave the children unchanged. |
 
 The `ref` is forwarded to the root element.
 
@@ -32,7 +33,7 @@ Any other props supplied will be provided to the root element (native element).
 
 ## CSS
 
-- Style sheet name: `MuiAlertDescription`.
+- Style sheet name: `MuiAlertContent`.
 - Style sheet details:
 
 - `root`
@@ -43,5 +44,5 @@ 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/master/packages/material-ui-lab/src/AlertDescription/AlertDescription.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/master/packages/material-ui-lab/src/AlertContent/AlertContent.js) for more detail.
 
diff --git a/docs/src/pages/components/alert/SimpleAlert.js b/docs/src/pages/components/alert/SimpleAlert.js
index 879c2b0330057b..07a5fb6021f2ed 100644
--- a/docs/src/pages/components/alert/SimpleAlert.js
+++ b/docs/src/pages/components/alert/SimpleAlert.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Button } from '@material-ui/core';
-import { Alert, AlertTitle, AlertDescription, AlertActions } from '@material-ui/lab';
+import { Alert, AlertTitle, AlertContent, AlertActions } from '@material-ui/lab';
 import InfoIcon from '@material-ui/icons/Info';
 
-// not sure why this rule is firing...
 /* eslint-disable react/jsx-filename-extension */
 
 export default function SimpleAlert() {
@@ -15,9 +14,9 @@ export default function SimpleAlert() {
       }}
     >
       <AlertTitle>Sorry, results couldn&apos;t be loaded</AlertTitle>
-      <AlertDescription>
+      <AlertContent>
         There was an error while processing your request. Refresh your page for loading results.
-      </AlertDescription>
+      </AlertContent>
       <AlertActions>
         <Button>Refresh</Button>
         <Button component="a" href="mailto:support@foo.bar">
diff --git a/docs/src/pages/components/alert/SimpleAlert.tsx b/docs/src/pages/components/alert/SimpleAlert.tsx
index 9fb14fe545c1e4..9d72c1e42264fa 100644
--- a/docs/src/pages/components/alert/SimpleAlert.tsx
+++ b/docs/src/pages/components/alert/SimpleAlert.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@material-ui/core';
-import { Alert, AlertTitle, AlertDescription, AlertActions } from '@material-ui/lab';
+import { Alert, AlertTitle, AlertContent, AlertActions } from '@material-ui/lab';
 import InfoIcon from '@material-ui/icons/Info';
 
 /* eslint-disable react/jsx-filename-extension */
@@ -16,9 +16,9 @@ export default function SimpleAlert() {
       <AlertTitle>
         Sorry, results couldn&apos;t be loaded
       </AlertTitle>
-      <AlertDescription>
+      <AlertContent>
         There was an error while processing your request. Refresh your page for loading results.
-      </AlertDescription>
+      </AlertContent>
       <AlertActions>
         <Button>
           Refresh
diff --git a/packages/material-ui-lab/src/AlertContent/AlertContent.d.ts b/packages/material-ui-lab/src/AlertContent/AlertContent.d.ts
new file mode 100644
index 00000000000000..2bcf2402f13c44
--- /dev/null
+++ b/packages/material-ui-lab/src/AlertContent/AlertContent.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { StandardProps } from '@material-ui/core';
+
+export interface AlertContentProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, AlertContentClassKey> {
+  variant?: 'text' | 'container';
+}
+
+export type AlertContentClassKey = 'root';
+
+declare const AlertContent: React.ComponentType<AlertContentProps>;
+
+export default AlertContent;
diff --git a/packages/material-ui-lab/src/AlertContent/AlertContent.js b/packages/material-ui-lab/src/AlertContent/AlertContent.js
new file mode 100644
index 00000000000000..753e24ae600c2d
--- /dev/null
+++ b/packages/material-ui-lab/src/AlertContent/AlertContent.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Typography } from '@material-ui/core';
+import clsx from 'clsx';
+
+export const styles = () => ({
+  root: {},
+});
+
+const AlertContent = React.forwardRef(function AlertContent(props, ref) {
+  const {
+    classes,
+    children,
+    className,
+    variant = 'text',
+  } = props;
+
+  const content = variant === 'text' ? (
+    <Typography>
+      {children}
+    </Typography>
+  ) : children;
+
+  return (
+    <div className={clsx(classes.root, className)} ref={ref}>
+      {content}
+    </div>
+  );
+});
+
+AlertContent.propTypes = {
+  /**
+   * @ignore
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object.isRequired,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The variant to use.
+   * Use `text` to conditionally wrap the description with a "Typography".
+   * Use `container` to leave the children unchanged.
+   * @default text
+   */
+  variant: PropTypes.oneOf(['text', 'container']),
+};
+
+export default withStyles(styles, { name: 'MuiAlertContent' })(AlertContent);
diff --git a/packages/material-ui-lab/src/AlertDescription/AlertDescription.test.js b/packages/material-ui-lab/src/AlertContent/AlertContent.test.js
similarity index 70%
rename from packages/material-ui-lab/src/AlertDescription/AlertDescription.test.js
rename to packages/material-ui-lab/src/AlertContent/AlertContent.test.js
index 5f3562326fb351..bb6e6a2a96df1f 100644
--- a/packages/material-ui-lab/src/AlertDescription/AlertDescription.test.js
+++ b/packages/material-ui-lab/src/AlertContent/AlertContent.test.js
@@ -1,22 +1,22 @@
 import React from 'react';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
-import AlertDescription from './AlertDescription';
+import AlertContent from './AlertContent';
 
-describe('<AlertDescription />', () => {
+describe('<AlertContent />', () => {
   let mount;
   let classes;
 
   before(() => {
     mount = createMount({ strict: true });
-    classes = getClasses(<AlertDescription />);
+    classes = getClasses(<AlertContent />);
   });
 
   after(() => {
     mount.cleanUp();
   });
 
-  describeConformance(<AlertDescription />, () => ({
+  describeConformance(<AlertContent />, () => ({
     classes,
     inheritComponent: 'div',
     mount,
diff --git a/packages/material-ui-lab/src/AlertContent/index.d.ts b/packages/material-ui-lab/src/AlertContent/index.d.ts
new file mode 100644
index 00000000000000..722d9d0f4a0da8
--- /dev/null
+++ b/packages/material-ui-lab/src/AlertContent/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './AlertContent';
+export * from './AlertContent';
diff --git a/packages/material-ui-lab/src/AlertContent/index.js b/packages/material-ui-lab/src/AlertContent/index.js
new file mode 100644
index 00000000000000..d43fa30432cdc7
--- /dev/null
+++ b/packages/material-ui-lab/src/AlertContent/index.js
@@ -0,0 +1 @@
+export { default } from './AlertContent';
diff --git a/packages/material-ui-lab/src/AlertDescription/AlertDescription.d.ts b/packages/material-ui-lab/src/AlertDescription/AlertDescription.d.ts
deleted file mode 100644
index 533fe201da69b1..00000000000000
--- a/packages/material-ui-lab/src/AlertDescription/AlertDescription.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { StandardProps } from '@material-ui/core';
-
-export interface AlertDescriptionProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, AlertDescriptionClassKey> {}
-
-export type AlertDescriptionClassKey = 'root';
-
-declare const AlertDescription: React.ComponentType<AlertDescriptionProps>;
-
-export default AlertDescription;
diff --git a/packages/material-ui-lab/src/AlertDescription/AlertDescription.js b/packages/material-ui-lab/src/AlertDescription/AlertDescription.js
deleted file mode 100644
index 616810842a5775..00000000000000
--- a/packages/material-ui-lab/src/AlertDescription/AlertDescription.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { Typography } from '@material-ui/core';
-import clsx from 'clsx';
-
-export const styles = () => ({
-  root: {},
-});
-
-const AlertDescription = React.forwardRef(function AlertDescription(props, ref) {
-  const { classes, children, className } = props;
-  return (
-    <div className={clsx(classes.root, className)} ref={ref}>
-      <Typography>
-        {children}
-      </Typography>
-    </div>
-  );
-});
-
-AlertDescription.propTypes = {
-  /**
-   * @ignore
-   */
-  children: PropTypes.node.isRequired,
-
-  /**
-   * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
-   */
-  classes: PropTypes.object.isRequired,
-
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-};
-
-export default withStyles(styles, { name: 'MuiAlertDescription' })(AlertDescription);
diff --git a/packages/material-ui-lab/src/AlertDescription/index.d.ts b/packages/material-ui-lab/src/AlertDescription/index.d.ts
deleted file mode 100644
index 970fb0a39f3461..00000000000000
--- a/packages/material-ui-lab/src/AlertDescription/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './AlertDescription';
-export * from './AlertDescription';
diff --git a/packages/material-ui-lab/src/AlertDescription/index.js b/packages/material-ui-lab/src/AlertDescription/index.js
deleted file mode 100644
index 2194fd68e6a03e..00000000000000
--- a/packages/material-ui-lab/src/AlertDescription/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './AlertDescription';
diff --git a/packages/material-ui-lab/src/index.d.ts b/packages/material-ui-lab/src/index.d.ts
index 5f26d6759d1bde..eef53fcc516f8f 100644
--- a/packages/material-ui-lab/src/index.d.ts
+++ b/packages/material-ui-lab/src/index.d.ts
@@ -4,8 +4,8 @@ export * from './Alert';
 export { default as AlertActions } from './AlertActions';
 export * from './AlertActions';
 
-export { default as AlertDescription } from './AlertDescription';
-export * from './AlertDescription';
+export { default as AlertContent } from './AlertContent';
+export * from './AlertContent';
 
 export { default as AlertTitle } from './AlertTitle';
 export * from './AlertTitle';
diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js
index 93fb14fe371f16..2a3f864d1ef5ee 100644
--- a/packages/material-ui-lab/src/index.js
+++ b/packages/material-ui-lab/src/index.js
@@ -5,8 +5,8 @@ export * from './Alert';
 export { default as AlertActions } from './AlertActions';
 export * from './AlertActions';
 
-export { default as AlertDescription } from './AlertDescription';
-export * from './AlertDescription';
+export { default as AlertContent } from './AlertContent';
+export * from './AlertContent';
 
 export { default as AlertTitle } from './AlertTitle';
 export * from './AlertTitle';