diff --git a/CHANGELOG.md b/CHANGELOG.md index 4760f0d0805..74402771e33 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,11 @@ - 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` CSS utility class ([#1349](https://github.com/elastic/eui/pull/1349)) + +**Bug fixes** + +- Fixed word-breaks in table cells for Firefox ([#1349](https://github.com/elastic/eui/pull/1349)) ## [`5.4.0`](https://github.com/elastic/eui/tree/v5.4.0) 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..97906f2c283 100644 --- a/src-docs/src/views/utility_classes/utility_classes.js +++ b/src-docs/src/views/utility_classes/utility_classes.js @@ -5,15 +5,22 @@ import { EuiCode, EuiSpacer, EuiIcon, + EuiTextColor, } from '../../../../src/components'; export default () => ( -

Text

+ + .eui-textInheritColor will + force text to inherit it's color from it's parent. + + + +
.eui-textLeft
@@ -27,32 +34,79 @@ 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-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-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-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.
-
- .eui-textTruncate will ellipsis after a certain point. +
+ .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{' '}. + Falls back to break-all on Firefox and IE11.
-

Vertical alignment

+ + +
+ .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-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

+ +
.eui-alignTop @@ -68,7 +122,7 @@ export default () => (
- + .eui-alignBottom
@@ -116,7 +170,5 @@ export default () => ( .eui-showFor--l .eui-showFor--xl - - ); 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/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, /** 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; }