From f457b73d4ed0e64a74e9e70cc1e5bd74bc2bdf35 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 5 Dec 2018 11:19:49 -0500 Subject: [PATCH 1/8] Fix word-break on most browsers --- src/components/table/_table.scss | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 9363434adb1..dbbe502c1fa 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -139,10 +139,14 @@ * the cell. */ .euiTableCellContent__text { + @include internetExplorerOnly { + word-break: break-all; + } + min-width: 0; text-overflow: ellipsis; - word-break: break-all; /* 1 */ // Fallback for FF and IE - word-break: break-word; /* 1 */ + overflow-wrap: break-word; /* 1 */ + } .euiTableCellContent--alignRight { @@ -168,15 +172,6 @@ .euiTableCellContent--overflowingContent { overflow: visible; white-space: normal; - word-break: break-word; - - /** - * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing - * the cell. - */ - .euiTableCellContent__text { - overflow: visible; /* 1 */ - } } .euiTableCellContent--showOnHover { From e8761d8b14879a962901ad019fc773b209860636 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 5 Dec 2018 11:34:51 -0500 Subject: [PATCH 2/8] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bd7cb918467..51c818e569c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ **Bug fixes** - Fixed bug in exporting `CommonProps` in TypeScript definitions ([#1341](https://github.com/elastic/eui/pull/1341)) +- Updated table cells to use `overflow-wrap` instead of `word-break` ([#1349](https://github.com/elastic/eui/pull/1349)) ## [`5.3.0`](https://github.com/elastic/eui/tree/v5.3.0) From e0e2b819ab5e5b0ab897f99d64962fd53361b703 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 6 Dec 2018 11:32:19 -0500 Subject: [PATCH 3/8] Revert "Fix word-break on most browsers" This reverts commit f457b73d4ed0e64a74e9e70cc1e5bd74bc2bdf35. --- src/components/table/_table.scss | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index dbbe502c1fa..9363434adb1 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -139,14 +139,10 @@ * the cell. */ .euiTableCellContent__text { - @include internetExplorerOnly { - word-break: break-all; - } - min-width: 0; text-overflow: ellipsis; - overflow-wrap: break-word; /* 1 */ - + word-break: break-all; /* 1 */ // Fallback for FF and IE + word-break: break-word; /* 1 */ } .euiTableCellContent--alignRight { @@ -172,6 +168,15 @@ .euiTableCellContent--overflowingContent { overflow: visible; white-space: normal; + word-break: break-word; + + /** + * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing + * the cell. + */ + .euiTableCellContent__text { + overflow: visible; /* 1 */ + } } .euiTableCellContent--showOnHover { From d26fe0a9328d9e90f707ff6c31e0114808ee9afc Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 6 Dec 2018 13:23:57 -0500 Subject: [PATCH 4/8] Adding `.eui-textOverflowWrap` utility and using on table cell contents --- src/components/table/_table.scss | 20 ++++++-------------- src/global_styling/mixins/_typography.scss | 9 +++++++++ src/global_styling/utility/_utility.scss | 7 +++++++ 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 9363434adb1..ec15ebc3dbd 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -127,22 +127,20 @@ * 2. The padding on this div allows the ellipsis to show if the content is truncated. If * the padding was on the cell, the ellipsis would be cropped. * 3. Support wrapping. + * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing + * the cell. */ .euiTableCellContent { + overflow: hidden; /* 4 */ display: flex; align-items: center; /* 1 */ padding: $euiTableCellContentPadding; /* 2 */ } -/** - * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing - * the cell. - */ .euiTableCellContent__text { + @include euiTextOverflowWrap; /* 4 */ min-width: 0; text-overflow: ellipsis; - word-break: break-all; /* 1 */ // Fallback for FF and IE - word-break: break-word; /* 1 */ } .euiTableCellContent--alignRight { @@ -168,15 +166,9 @@ .euiTableCellContent--overflowingContent { overflow: visible; white-space: normal; + //* 4 */ overflow-wrap is not supported on flex parents + word-break: break-all; // Fallback for FF and IE word-break: break-word; - - /** - * 1. Prevent very long single words (e.g. the name of a field in a document) from overflowing - * the cell. - */ - .euiTableCellContent__text { - overflow: visible; /* 1 */ - } } .euiTableCellContent--showOnHover { diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss index 1c477a8e121..b3b7c406c56 100644 --- a/src/global_styling/mixins/_typography.scss +++ b/src/global_styling/mixins/_typography.scss @@ -85,6 +85,15 @@ font-weight: $euiFontWeightLight; // always apply light weight to x-large type } +// Overflow-wrap for breaking on word +// Does not work on `display: flex` items +@mixin euiTextOverflowWrap { + @include internetExplorerOnly { + word-break: break-all; + } + overflow-wrap: break-word; +} + // Text truncation // // Prevent text from wrapping onto multiple lines, and truncate with an diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss index 7010768e8ab..23b0c6f38b8 100644 --- a/src/global_styling/utility/_utility.scss +++ b/src/global_styling/utility/_utility.scss @@ -26,6 +26,13 @@ .eui-textBreakAll {word-break: break-all !important;} .eui-textBreakNormal {word-break: normal !important;} +.eui-textOverflowWrap { + @include internetExplorerOnly { + word-break: break-all !important; + } + overflow-wrap: break-word !important; +} + .eui-textTruncate { @include euiTextTruncate; } From b2aba9067a02a47b8031428b3e834877f132035f Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 6 Dec 2018 13:26:15 -0500 Subject: [PATCH 5/8] changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 51c818e569c..7718ccf57b9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,12 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added `bottomGraphic` prop to `EuiCard` for Kibana home page ([#1338](https://github.com/elastic/eui/pull/1338)) +- Added `.eui-textBreakWord` CSSS utility class ([#1349](https://github.com/elastic/eui/pull/1349)) **Bug fixes** - Fixed bug in exporting `CommonProps` in TypeScript definitions ([#1341](https://github.com/elastic/eui/pull/1341)) -- Updated table cells to use `overflow-wrap` instead of `word-break` ([#1349](https://github.com/elastic/eui/pull/1349)) +- Fixed word-breaks in table cells for Firefox ([#1349](https://github.com/elastic/eui/pull/1349)) ## [`5.3.0`](https://github.com/elastic/eui/tree/v5.3.0) From 4900a57379e49c4c65bbd7090ec864a6713d87b8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 6 Dec 2018 14:07:36 -0500 Subject: [PATCH 6/8] Updating documentation --- src-docs/src/views/tables/basic/basic.js | 1 + .../src/views/tables/basic/basic_section.js | 4 ++ .../src/views/tables/custom/custom_section.js | 2 +- .../views/utility_classes/utility_classes.js | 50 +++++++++++++++---- src/components/table/table_row_cell.js | 4 ++ 5 files changed, 50 insertions(+), 11 deletions(-) diff --git a/src-docs/src/views/tables/basic/basic.js b/src-docs/src/views/tables/basic/basic.js index dbe7c930fd0..93d020ed486 100644 --- a/src-docs/src/views/tables/basic/basic.js +++ b/src-docs/src/views/tables/basic/basic.js @@ -97,6 +97,7 @@ export const Table = () => { return { className: 'customCellClass', 'data-test-subj': `cell-${id}-${field}`, + textOnly: true, }; }; diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js index 4221067205b..b0027047478 100644 --- a/src-docs/src/views/tables/basic/basic_section.js +++ b/src-docs/src/views/tables/basic/basic_section.js @@ -61,6 +61,10 @@ export const section = { returns the React node that should be displayed as the content of the cell. This can be as simple as formatting values (e.g. the "Date of Birth" column) to utilizing more complex React components (e.g. the "Online", "Github" and "Nationality" columns as seen below). +
+ Note: the basic table will treat any cells that use a render function + as being textOnly: false. This may cause unnecessary word breaks. Apply textOnly: true to + ensure it breaks properly. diff --git a/src-docs/src/views/tables/custom/custom_section.js b/src-docs/src/views/tables/custom/custom_section.js index 922c5891775..05882a72f7a 100644 --- a/src-docs/src/views/tables/custom/custom_section.js +++ b/src-docs/src/views/tables/custom/custom_section.js @@ -44,7 +44,7 @@ export const section = { Important to note are how you need to set individual props like the truncateText prop to cells to enforce a single-line behavior and truncate their contents, or set the textOnly prop - to false if they contain overflowing content like popovers. + to false if you need the contents to be a direct descendent of the cell.

Responsive extras diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js index ff5f1b68bf3..ff7127977e2 100644 --- a/src-docs/src/views/utility_classes/utility_classes.js +++ b/src-docs/src/views/utility_classes/utility_classes.js @@ -9,7 +9,6 @@ import { export default () => ( -

Text

@@ -27,25 +26,58 @@ export default () => ( -
+
.eui-textNoWrap will force text not to wrap even in small containers.
-
- .eui-textBreakAll will break up anything. It is useful for long urls like http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool +
+ .eui-textBreakAll will break up anything. It is useful for long urls like + http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
-
- .eui-textBreakWord will only break up at the end of words. Long urls will still break http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool +
+ .eui-textBreakWord will only break up at the end of words. Long urls will + still break + http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool{' '} + + Not supported by <= IE11 and Firefox, falls back to break-all +
-
+
+ .eui-textOverflowWrap will only break up at the end of words. Long urls + will still break + http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool{' '} + + Not supported by <= IE11, falls back to break-all and does not work on{' '} + display: flex elements + +
+ + + +
.eui-textTruncate will ellipsis after a certain point.
@@ -68,7 +100,7 @@ export default () => (
- + .eui-alignBottom
@@ -116,7 +148,5 @@ export default () => ( .eui-showFor--l .eui-showFor--xl - - ); diff --git a/src/components/table/table_row_cell.js b/src/components/table/table_row_cell.js index 1c519efb4e2..3d8cfc493e3 100644 --- a/src/components/table/table_row_cell.js +++ b/src/components/table/table_row_cell.js @@ -82,6 +82,10 @@ EuiTableRowCell.propTypes = { truncateText: PropTypes.bool, children: PropTypes.node, className: PropTypes.string, + /** + * Setting textOnly to false will break words unnecessarily on FF and IE. + * To combat this problem on FF, wrap contents with the css utility `.eui-textBreakWord`. + */ textOnly: PropTypes.bool, colSpan: PropTypes.number, /** From 255b03e9a0a6d3453c9229bd15b76ca39a21d5ee Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 7 Dec 2018 14:05:33 -0500 Subject: [PATCH 7/8] Updated CSS utility documentation --- .../views/utility_classes/utility_classes.js | 58 +++++++++++++------ 1 file changed, 40 insertions(+), 18 deletions(-) diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js index ff7127977e2..97906f2c283 100644 --- a/src-docs/src/views/utility_classes/utility_classes.js +++ b/src-docs/src/views/utility_classes/utility_classes.js @@ -5,6 +5,7 @@ import { EuiCode, EuiSpacer, EuiIcon, + EuiTextColor, } from '../../../../src/components'; export default () => ( @@ -13,6 +14,13 @@ export default () => ( + + .eui-textInheritColor will + force text to inherit it's color from it's parent. + + + +
.eui-textLeft
@@ -37,10 +45,28 @@ export default () => (
- .eui-textBreakAll will break up anything. It is useful for long urls like - http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool + .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 + http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool{' '}. + Falls back to break-all on IE11.
@@ -51,38 +77,34 @@ export default () => ( > .eui-textBreakWord will only break up at the end of words. Long urls will still break - http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool{' '} - - Not supported by <= IE11 and Firefox, falls back to break-all - + http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool{' '}. + Falls back to break-all on Firefox and IE11.
- .eui-textOverflowWrap will only break up at the end of words. Long urls - will still break - http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool{' '} - - Not supported by <= IE11, falls back to break-all and does not work on{' '} - display: flex elements - + .eui-textBreakAll will break up anything. It is useful for long urls like + http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
- .eui-textTruncate will ellipsis after a certain point. + .eui-textBreakNormal revert back to not forcing word breaks. It is not useful for long urls like + http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
-

Vertical alignment

+ + +

Vertical alignment

From 9775caee910c2d068abcae1cd6e59a40dc9af0fb Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Fri, 7 Dec 2018 14:09:43 -0500 Subject: [PATCH 8/8] typo in cl --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ed69fe1527..74402771e33 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ - Altered functionality of `truncate` on `EuiBreadcrumbs` and added `truncate` ability on breadcrumb item ([#1346](https://github.com/elastic/eui/pull/1346)) - Altered `EuiHeader`'s location of `EuiHeaderBreadcrumbs` based on the new `truncate` ability ([#1346](https://github.com/elastic/eui/pull/1346)) - Added support for `href` and `target` props in `EuiBasicTable` actions ([#1347](https://github.com/elastic/eui/pull/1347)) -- Added `.eui-textBreakWord` CSSS utility class ([#1349](https://github.com/elastic/eui/pull/1349)) +- Added `.eui-textBreakWord` CSS utility class ([#1349](https://github.com/elastic/eui/pull/1349)) **Bug fixes**