Prevent EuiToast text from overflowing.

CHANGELOG.md

@@ -3,14 +3,15 @@
 - Added component to wrap blocks of substeps `EuiSubSteps` in a shaded container. ([#375](https://github.com/elastic/eui/pull/375))
 - Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375))
 - Changed look and feel of pagination. Added compressed prop for smaller footprint pagination. ([#380](https://github.com/elastic/eui/pull/380))
+- Added `EuiBasicTable` as an opinionated, high level component for constructing tables. Its addition deprecates `EuiTableOfRecords` which is still avaiable, but now marked for removal. ([#377](https://github.com/elastic/eui/pull/377))
 
-**Breaking changes**
+**Bug fixes**
 
-- Adds `EuiBasicTable` as an opinionated, high level component for constructing tables. Its addition deprecates `EuiTableOfRecords` which is still avaiable, but now marked for removal. ([#377](https://github.com/elastic/eui/pull/377))
+- Wrap long lines of text within the body of `EuiToast` instead of letting text overflow ([#392](https://github.com/elastic/eui/pull/392))
 
 # [`0.0.20`](https://github.com/elastic/eui/tree/v0.0.20)
 
-- Rename class from `euiFlexGroup--alignItemsStart` to `euiFlexGroup--alignItemsFlexStart`
+- Rename class from `euiFlexGroup--alignItemsStart` to `euiFlexGroup--alignItemsFlexStart` ([#378](https://github.com/elastic/eui/pull/378))
 
 # [`0.0.19`](https://github.com/elastic/eui/tree/v0.0.19)
 

src-docs/src/views/toast/danger.js

@@ -1,21 +1,21 @@
 import React from 'react';
 
 import {
-  EuiLink,
   EuiToast,
 } from '../../../../src/components';
 
+const esError = 'Error: expected _scroll_id in the folling Elasticsearch response: ' +
+  '{"took":0,"timed_out":false,"_shards":{"total":0,"successful":0,"skipped":0,"failed":0},' +
+  '"hits":{"total":0,"max_score":0,"hits":[]}}';
+
 export default () => (
   <EuiToast
-    title="Save failed"
+    title="Couldn't complete the search"
     color="danger"
+    iconType="alert"
   >
     <p>
-      Check your form for validation errors.
-    </p>
-
-    <p>
-      And some other stuff on another line, just for kicks. And <EuiLink href="#">here&rsquo;s a link</EuiLink>.
+      {esError}
     </p>
   </EuiToast>
 );

src-docs/src/views/toast/info.js

@@ -7,7 +7,6 @@ import {
 export default () => (
   <EuiToast
     title="Icons should be rare"
-    iconType="user"
     onClose={() => window.alert('Dismiss toast')}
   >
     <p>

src-docs/src/views/toast/success.js

@@ -1,14 +1,16 @@
 import React from 'react';
 
 import {
+  EuiButton,
+  EuiLink,
   EuiToast,
 } from '../../../../src/components';
 
 export default () => (
   <EuiToast
-    title="This is an example of a poor toast title. It's way too long."
+    title="Created report for dashboard 'Tuba Sales by Region'"
     color="success"
-    iconType="user"
+    iconType="check"
   >
     <p>
       While the layout will adjust properly for wrapping titles, they do not look particularly good.
@@ -17,7 +19,11 @@ export default () => (
     </p>
 
     <p>
-      You should not even need a second paragraph. Again, we are getting long winded here.
+      And some other stuff on another line, just for kicks. And <EuiLink href="#">here&rsquo;s a link</EuiLink>.
     </p>
+
+    <EuiButton>
+      Download report
+    </EuiButton>
   </EuiToast>
 );

src-docs/src/views/toast/warning.js

@@ -8,5 +8,6 @@ export default () => (
   <EuiToast
     title="Sometimes a title is enough!"
     color="warning"
+    iconType="help"
   />
 );

src/components/toast/__snapshots__/global_toast_list.test.js.snap

@@ -73,7 +73,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
       </svg>
     </button>
     <div
-      class="euiText euiText--small"
+      class="euiText euiText--small euiToastBody"
     >
       a
     </div>
@@ -139,7 +139,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
       </svg>
     </button>
     <div
-      class="euiText euiText--small"
+      class="euiText euiText--small euiToastBody"
     >
       b
     </div>

src/components/toast/__snapshots__/toast.test.js.snap

@@ -106,7 +106,7 @@ exports[`EuiToast is rendered 1`] = `
     />
   </div>
   <div
-    class="euiText euiText--small"
+    class="euiText euiText--small euiToastBody"
   >
     <p>
       Hi

src/components/toast/_toast.scss

@@ -94,3 +94,10 @@ $toastTypes: (
 .euiToastHeader--withBody {
   margin-bottom: $euiSizeM;
 }
+
+/**
+ * 1. Prevent long lines from overflowing.
+ */
+.euiToastBody {
+  word-wrap: break-word; /* 1 */
+}

src/components/toast/toast.js

@@ -63,7 +63,7 @@ export const EuiToast = ({ title, color, iconType, onClose, children, className,
 
   if (children) {
     optionalBody = (
-      <EuiText size="s">
+      <EuiText size="s" className="euiToastBody">
         {children}
       </EuiText>
     );