Material-ui: [Alert] html content breaks up text in Alert

[simoami]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The content in the Alert component breaks into several lines when html tags are present in the content. For example: <em>, <i>, <strong>

Expected Behavior 🤔

The presence of html content should not cause line breaks. Specifically when using html tags aimed at formatting text.

Steps to Reproduce 🕹

import Alert from '@material-ui/lab/Alert'

<Alert severity="warning" icon={false}>You are going to transfer ownership of <strong>Demo Team</strong> to another user, and you will be given Administrator access.</Alert>

Demo: https://codesandbox.io/s/funny-sun-kxmym

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.5 |
| Material-UI Lab | v4.0.0-alpha.45 |
| React | 16.8 |
| Browser | Chrome v80 |

[simoami]

The presence of display: flex on the container is causing the html tags in content to break into separate lines.

[oliviertassinari]

@simoami Any idea on how we could solve this problem?

[simoami]

@oliviertassinari There are several ways to fix this but my observation is that the MuiAlert-message class name carries a display: 'flex' prop. Not sure what was the reason, but I can guess it was either meant to vertically center align the message in case the Alert container was given a fixed height (who would do that??) or if the contained action or icon elements were vertically larger than the text content. These are unlikely scenarios in my opinion. and I happen to think that because the icon is aligned to the top, it's better for the text to follow suit. See below visuals for better illustaration:

Action button given a large height to show alignment configuration.

1. current behavior which breaks html content
   

1. with flex config removed from MuiAlert-message to fix wrapping of text content
   

My proposed fix in Alert.js

message: {
  padding: '8px 0',
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'center',
},

[embeddedt]

Another option is to wrap the inner content in a div or span, as shown in the repro.

[simoami]

@embeddedt
Yeah, that's what I did in the demo link above. However, why add nested markup if we don't need to. If we really don't need the flex mode, then we can just drop it and avoid the unnecessary nesting. My suggestion is to address the issue at the root.

[oliviertassinari]

@simoami Your proposal sounds great, I would propose the following diff:

diff --git a/docs/src/pages/components/alert/DescriptionAlerts.tsx b/docs/src/pages/components/alert/DescriptionAlerts.tsx
index f7a754d8e..da6862d5c 100644
--- a/docs/src/pages/components/alert/DescriptionAlerts.tsx
+++ b/docs/src/pages/components/alert/DescriptionAlerts.tsx
@@ -20,19 +20,19 @@ export default function DescriptionAlerts() {
     <div className={classes.root}>
       <Alert severity="error">
         <AlertTitle>Error</AlertTitle>
-        This is an error alert — check it out!
+        This is an error alert — <strong>check it out!</strong>
       </Alert>
       <Alert severity="warning">
         <AlertTitle>Warning</AlertTitle>
-        This is a warning alert — check it out!
+        This is a warning alert — <strong>check it out!</strong>
       </Alert>
       <Alert severity="info">
         <AlertTitle>Info</AlertTitle>
-        This is an info alert — check it out!
+        This is an info alert — <strong>check it out!</strong>
       </Alert>
       <Alert severity="success">
         <AlertTitle>Success</AlertTitle>
-        This is a success alert — check it out!
+        This is a success alert — <strong>check it out!</strong>
       </Alert>
     </div>
   );
diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js
index 42111972c..fe62631a3 100644
--- a/packages/material-ui-lab/src/Alert/Alert.js
+++ b/packages/material-ui-lab/src/Alert/Alert.js
@@ -123,9 +123,6 @@ export const styles = theme => {
     /* Styles applied to the message wrapper element. */
     message: {
       padding: '8px 0',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
     },
     /* Styles applied to the action wrapper element if `action` is provided. */
     action: {

The update of the demo can servers as a visual regression test. Do you want to send a pull request?
Regarding the motivation for these styles in the first place, well, if nothing visuall changes after removing them, I believe it's safe to ignore :).

[kmhigashioka]

Is this up for PR?

[developerKumar]

Someone working on it? Or I can start?

[oliviertassinari]

@developerKumar Feel free to go ahead.