Added euiTextBreakWord mixin to the euiTitle mixin (#5107)

Ensures that anywhere we use the title mixin to create titles, it will break on really long words if need be. This doesn’t affect those that use it with truncation.
elastic · Aug 30, 2021 · 97bdc46 · 97bdc46
1 parent 90a67ab
commit 97bdc46
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -58,6 +58,7 @@
 }
 
 @mixin euiTitle($size: 'm') {
+  @include euiTextBreakWord;
   color: $euiTitleColor;
 
   @if (map-has-key($euiTitles, $size)) {