diff --git a/CHANGELOG.md b/CHANGELOG.md index 42a691b3841..1166286bd17 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `euiTextBreakWord()` mixin to the `euiTitle()` mixin to ensure all titles break long words ([#5107](https://github.com/elastic/eui/pull/5107)) +- Added `euiTextBreakWord()` to `EuiFormLabels` ([#5107](https://github.com/elastic/eui/pull/5107)) + **Bug fixes** - Fixed `EuiSuperSelect`'s focus keyboard behavior when no initial value is passed, and focus label behavior ([#5097](https://github.com/elastic/eui/pull/5097)) diff --git a/src/components/form/form_row/_form_row.scss b/src/components/form/form_row/_form_row.scss index 32a0a68bd5c..20bb50029c3 100644 --- a/src/components/form/form_row/_form_row.scss +++ b/src/components/form/form_row/_form_row.scss @@ -38,7 +38,6 @@ align-items: stretch; .euiFormRow__label { - @include euiTextBreakWord; hyphens: auto; max-width: 100%; // Fixes IE } diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 3fb0d67b6ed..5aa63b36a22 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -145,7 +145,6 @@ * 1. Vertically align all children. * 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. */ @@ -175,7 +174,7 @@ .euiTableHeaderCell, .euiTableFooterCell, .euiTableCellContent--truncateText { - white-space: nowrap; /* 3 */ + @include euiTextTruncate; .euiTableCellContent__text { overflow: hidden; diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss index 55d9b1e675e..42d103c65ef 100644 --- a/src/components/toast/_toast.scss +++ b/src/components/toast/_toast.scss @@ -88,7 +88,6 @@ $euiToastTypes: ( .euiToastHeader__title { @include euiTitle('xs'); - @include euiTextBreakWord; font-weight: $euiFontWeightLight; } diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 69536f33c5f..710228d51cb 100644 --- a/src/global_styling/mixins/_form.scss +++ b/src/global_styling/mixins/_form.scss @@ -1,6 +1,7 @@ // Labels @mixin euiFormLabel { @include euiFontSizeXS; + @include euiTextBreakWord; color: $euiTitleColor; font-weight: $euiFontWeightSemiBold; } diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss index 5d76e9fc427..b6c7e875728 100644 --- a/src/global_styling/mixins/_typography.scss +++ b/src/global_styling/mixins/_typography.scss @@ -58,6 +58,7 @@ } @mixin euiTitle($size: 'm') { + @include euiTextBreakWord; color: $euiTitleColor; @if (map-has-key($euiTitles, $size)) {