From f33c710fc2247e495765edecc1f45f2635321fd8 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 23 Jul 2019 15:29:52 -0400 Subject: [PATCH] Fix text wrapping utilities (#2157) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit … for better browser support * Set `.eui-textOverflowWrap` to be deprecated * Fix up guidelines and change `. euiYScrollWithShadows` to `.eui-yScrollWithShadows` --- CHANGELOG.md | 1 + src-docs/src/views/guidelines/sass.js | 2 +- .../views/utility_classes/utility_classes.js | 197 +++++++----------- src/global_styling/utility/_utility.scss | 19 +- 4 files changed, 88 insertions(+), 131 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b395fe3bff1..227b2dfd21e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - Fixed invalid `aria-desribedby` values set by `EuiToolTip` ([#2156](https://github.com/elastic/eui/pull/2156)) - Added `"center"` as an acceptable value to `EuiBasicTable`'s `align` proptype ([#2158](https://github.com/elastic/eui/pull/2158)) +- Fixed `.eui-textBreakWord` utility class to be cross-browser compatible ([#2157](https://github.com/elastic/eui/pull/2157)) ## [`13.0.0`](https://github.com/elastic/eui/tree/v13.0.0) diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js index 3bcf56bf97c..74c80d4a3de 100644 --- a/src-docs/src/views/guidelines/sass.js +++ b/src-docs/src/views/guidelines/sass.js @@ -762,7 +762,7 @@ export const SassGuidelines = ({ selectedTheme }) => { CSS utility class {' '} - .euiYScrollWithShadows. + .eui-yScrollWithShadows.

Example: diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js index 6cb5a607774..265c83e55c2 100644 --- a/src-docs/src/views/utility_classes/utility_classes.js +++ b/src-docs/src/views/utility_classes/utility_classes.js @@ -12,8 +12,36 @@ import { const longLink = 'http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool'; +const wrappingExampleStyle = { + width: 290, + padding: 16, + background: 'rgba(254, 228, 181, 0.5)', +}; + export default () => ( +

Display

+ + .eui-displayBlock + + + + .eui-displayInline + + + + + .eui-displayInlineBlock + + + + + + .eui-fullWidth (similar to eui-displayBlock but adds 100% width) + + + +

Text

@@ -38,103 +66,77 @@ export default () => ( -
+ + +
.eui-textNoWrap will force text not to wrap even in small containers.
-
+
.eui-textTruncate will ellipsis after a certain point.
-

Word breaking

-

- We recommend using .eui-textOverflowWrap to break on - long words above all other options as it is supported by all major - browsers (except for IE11). The one caveat is that it does not work on{' '} - display: flex elements. To remedy, you can either add - another wrapper with this class or use{' '} - .eui-textBreakWord instead. -

- - -
- .eui-textOverflowWrap will only break up at the end of - words. Long urls will still break - {longLink}. - - Falls back to break-all on IE11. - -
- - -
+
.eui-textBreakWord will only break up at the end of - words. Long urls will still break - {longLink}. - - Falls back to break-all on Firefox and IE11. - + words. Long urls will still break {longLink}.
-
+
.eui-textBreakAll will break up anything. It is useful - for long urls like - {longLink}. + for long urls like {longLink}.
.eui-textBreakNormal revert back to not forcing word - breaks. It is not useful for long urls like - {longLink}. + breaks. It is not useful for long urls like {longLink}.
+

Overflows

+ +
+ +

+ It requires a wrapping element to control the height with{' '} + overflow-y: hidden; and the content to use the CSS + utility class .eui-yScrollWithShadows. +

+

+ Example: +

+ + {` + +`} + +

+ Consequuntur atque nulla atque nemo tenetur numquam. Assumenda + aspernatur qui aut sit. Aliquam doloribus iure sint id. Possimus dolor + qui soluta cum id tempore ea illum. Facilis voluptatem aut aut ut + similique ut. Sed repellendus commodi iure officiis exercitationem + praesentium dolor. Ratione non ut nulla accusamus et. Optio laboriosam + id incidunt. Ipsam voluptate ab quia necessitatibus sequi earum + voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero + tempore sit placeat maxime laudantium. Mollitia tempore minus qui + autem modi adipisci ad. Iste reprehenderit accusamus voluptatem velit. + Quidem delectus eos veritatis et vitae et nisi. Doloribus ut corrupti + voluptates qui exercitationem dolores. +

+ +
+

Vertical alignment

@@ -171,63 +173,6 @@ export default () => ( -

Display

- - .eui-displayBlock - - - - .eui-displayInline - - - - - .eui-displayInlineBlock - - - - - - .eui-fullWidth (similar to eui-displayBlock but adds 100% width) - - - - -

Overflows

- -
- -

- It requires a wrapping element to control the height with{' '} - overflow-y: hidden; and the content to use the CSS - utility class .euiYScrollWithShadows. -

-

- Example: -

- - {` - -`} - -

- Consequuntur atque nulla atque nemo tenetur numquam. Assumenda - aspernatur qui aut sit. Aliquam doloribus iure sint id. Possimus dolor - qui soluta cum id tempore ea illum. Facilis voluptatem aut aut ut - similique ut. Sed repellendus commodi iure officiis exercitationem - praesentium dolor. Ratione non ut nulla accusamus et. Optio laboriosam - id incidunt. Ipsam voluptate ab quia necessitatibus sequi earum - voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero - tempore sit placeat maxime laudantium. Mollitia tempore minus qui - autem modi adipisci ad. Iste reprehenderit accusamus voluptatem velit. - Quidem delectus eos veritatis et vitae et nisi. Doloribus ut corrupti - voluptates qui exercitationem dolores. -

- -
- - -

Responsive

.eui-hideFor--xs diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss index 41920f7cf27..d5cc5c41d6f 100644 --- a/src/global_styling/utility/_utility.scss +++ b/src/global_styling/utility/_utility.scss @@ -25,12 +25,23 @@ .eui-textInheritColor {color: inherit !important;} .eui-textBreakWord { - word-break: break-all !important; // Fallback for FF and IE - word-break: break-word !important; + // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ + overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container + word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other + word-break: break-word; // IE doesn't understand but that's ok } -.eui-textBreakAll {word-break: break-all !important;} -.eui-textBreakNormal {word-break: normal !important;} +.eui-textBreakAll { + word-break: break-all !important; +} + +.eui-textBreakNormal { + overflow-wrap: normal !important; + word-wrap: normal !important; + word-break: normal !important; +} + +// TODO: 7/23 DEPRECATE in favor of .eui-textBreakWord now that it's working as intended .eui-textOverflowWrap { @include internetExplorerOnly { word-break: break-all !important;