From 87c64be07cb8578ad853efc8cb9444dc6d9f3e4e Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 12 Feb 2018 16:01:31 -0800 Subject: [PATCH] Prevent EuiToast text from overflowing. --- CHANGELOG.md | 7 ++++--- src-docs/src/views/toast/danger.js | 14 +++++++------- src-docs/src/views/toast/info.js | 1 - src-docs/src/views/toast/success.js | 12 +++++++++--- src-docs/src/views/toast/warning.js | 1 + .../__snapshots__/global_toast_list.test.js.snap | 4 ++-- .../toast/__snapshots__/toast.test.js.snap | 2 +- src/components/toast/_toast.scss | 7 +++++++ src/components/toast/toast.js | 2 +- 9 files changed, 32 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b8c7707e4d1..f0202439a63 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src-docs/src/views/toast/danger.js b/src-docs/src/views/toast/danger.js index 8e89c4b871a..2ca712bb8ac 100644 --- a/src-docs/src/views/toast/danger.js +++ b/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 () => (

- Check your form for validation errors. -

- -

- And some other stuff on another line, just for kicks. And here’s a link. + {esError}

); diff --git a/src-docs/src/views/toast/info.js b/src-docs/src/views/toast/info.js index a89f1906ff8..5ba4cb9984b 100644 --- a/src-docs/src/views/toast/info.js +++ b/src-docs/src/views/toast/info.js @@ -7,7 +7,6 @@ import { export default () => ( window.alert('Dismiss toast')} >

diff --git a/src-docs/src/views/toast/success.js b/src-docs/src/views/toast/success.js index be627bdd714..48891b05ccf 100644 --- a/src-docs/src/views/toast/success.js +++ b/src-docs/src/views/toast/success.js @@ -1,14 +1,16 @@ import React from 'react'; import { + EuiButton, + EuiLink, EuiToast, } from '../../../../src/components'; export default () => (

While the layout will adjust properly for wrapping titles, they do not look particularly good. @@ -17,7 +19,11 @@ export default () => (

- 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 here’s a link.

+ + + Download report + ); diff --git a/src-docs/src/views/toast/warning.js b/src-docs/src/views/toast/warning.js index b2508e85a3f..50ca7b15b57 100644 --- a/src-docs/src/views/toast/warning.js +++ b/src-docs/src/views/toast/warning.js @@ -8,5 +8,6 @@ export default () => ( ); diff --git a/src/components/toast/__snapshots__/global_toast_list.test.js.snap b/src/components/toast/__snapshots__/global_toast_list.test.js.snap index 1ba3fa4d173..7cf7a12b30d 100644 --- a/src/components/toast/__snapshots__/global_toast_list.test.js.snap +++ b/src/components/toast/__snapshots__/global_toast_list.test.js.snap @@ -73,7 +73,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
a
@@ -139,7 +139,7 @@ exports[`EuiGlobalToastList props toasts is rendered 1`] = `
b
diff --git a/src/components/toast/__snapshots__/toast.test.js.snap b/src/components/toast/__snapshots__/toast.test.js.snap index 18f05d0483d..005a3cd1957 100644 --- a/src/components/toast/__snapshots__/toast.test.js.snap +++ b/src/components/toast/__snapshots__/toast.test.js.snap @@ -106,7 +106,7 @@ exports[`EuiToast is rendered 1`] = ` />

Hi diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss index f2452e5d18f..ef069832b68 100644 --- a/src/components/toast/_toast.scss +++ b/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 */ +} diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js index fff7ce63638..2bdf54abf04 100644 --- a/src/components/toast/toast.js +++ b/src/components/toast/toast.js @@ -63,7 +63,7 @@ export const EuiToast = ({ title, color, iconType, onClose, children, className, if (children) { optionalBody = ( - + {children} );