Changes to AlertContent and provides functionality for text or container

docs/pages/api/alert-description.js → 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} />;

docs/pages/api/alert-description.md → 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,14 +25,15 @@ 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.
 
 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.
 

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">

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

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;

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);

packages/material-ui-lab/src/AlertDescription/AlertDescription.test.js → 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,

packages/material-ui-lab/src/AlertContent/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './AlertContent';
+export * from './AlertContent';

packages/material-ui-lab/src/AlertContent/index.js

@@ -0,0 +1 @@
+export { default } from './AlertContent';

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';

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';