toaster message multi-line render

react/src/components/overrides.scss

@@ -753,6 +753,8 @@ select{
 
 #toast-container {
   > div {
+    padding: 15px 15px 15px 60px;
+    width: 310px;
     opacity: 1;
   }
 }
@@ -980,9 +982,10 @@ select{
       color: #757575;
       background-color: #efefef;
       border: 1px solid #e0e0e0;
-    }
-    .-btn:hover {
-      color: #fff;
+
+      &:hover {
+        color: #fff;
+      }
     }
     .-btn[disabled]:hover {
       color: #757575;
@@ -1073,11 +1076,13 @@ select{
   table {
     width: 100%;
 
-    td:first-child {
-      width: 40%;
-    }
-    td:last-child {
-      width: 60%;
+    td {
+      &:first-child {
+        width: 40%;
+      }
+      &:last-child {
+        width: 60%;
+      }
     }
   }
 }

react/src/components/toaster/toaster-item.js

@@ -22,6 +22,7 @@ class ToasterItem extends React.Component {
     };
 
     this.dismissToast = this.dismissToast.bind(this);
+    this.renderLB = this.renderLB.bind(this);
     this.timeoutHandler = null;
   }
 
@@ -50,6 +51,29 @@ class ToasterItem extends React.Component {
     Store.dispatch(dismissToasterMessage(toastId));
   }
 
+  renderLB() {
+    if (typeof this.state.message === 'object') {
+      let _items = [];
+      const _msg = this.state.message;
+
+      for (let i = 0; i < _msg.length; i++) {
+        if (_msg[i] === '') {
+          _items.push(
+            <div className="margin-top-5"></div>
+          );
+        } else {
+          _items.push(
+            <div key={ `toaster-msg-${i}` }>{ _msg[i] }</div>
+          );
+        }
+      }
+
+      return _items;
+    } else {
+      return this.state.message;
+    }
+  }
+
   renderToast() {
     // ensure that setTimeout is called only once for each toast message
     if (this.state.autoClose &&
@@ -66,7 +90,7 @@ class ToasterItem extends React.Component {
           onClick={ () => this.dismissToast(this.state.toastId) }>×
         </button>
         <div className="toast-title">{ this.state.title }</div>
-        <div className="toast-message">{ this.state.message }</div>
+        <div className="toast-message">{ this.renderLB() }</div>
       </div>
     );
   }