Fix word-break in tables on most browsers

[cchaos]

The problem came about that browser's were breaking on words unnecessarily (in Firefox and IE11). The problem is that neither Firefox nor IE support word-break: break-word and so there is a fallback to word-break: break-all to ensure that long words don't expand past container.

What it looked like before:

So this PR changes from using the word-break: break-word approach to using overflow-wrap: break-word which is supported by all browsers except for IE11 and behaves just like word-break.

This is what it looks like now:

Helpers

I've added both a mixin (euiTextOverflowWrap()) and CSS utility (.eui-textOverflowWrap) to handle the ease of using overflow-wrap and the IE fallback.

Caveat

There is one big caveat to using overflow-wrap. It does not work on items that have display: flex. Wah wah...

Where this becomes an issue is when passing textOnly: false to EuiTableRowCell which removes the containing .euiTableCellContent__text and places the children as a direct descendent of euiTableCellContent which, guess what?, is display: flex. 😢

So it has to use the word-break implementation, meaning it will also use the break-all fallback for Firefox.

This usually isn't an issue because the default prop is textOnly: true. However, EuiBasicTable will turn that prop to false if you use the render function.

What it looks like when textOnly: false:

Firefox will still break on all because the containing element is a flex element.

I've updated the documentation to try to spell out how to fix this, usually by keeping/adding textOnly: true. But another way to combat this is to just wrap the text node with the .eui-textOverflowWrap utility class.

IE11

Blech. Unfortunately, IE11 has no support any type of break-word so it will continue to use the break-all fall back.

Checklist

• [ ] This was checked in mobile
• This was checked in IE11
• [ ] This was checked in dark mode
• Any props added (modified) have proper autodocs
• Documentation examples were added (modified)
• A changelog entry exists and is marked appropriately
• [ ] This was checked for breaking changes and labeled appropriately
• [ ] Jest tests were updated or added to match the most common scenarios
• [ ] This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components

[cchaos]

@cjcenizal Would you mind taking a peak at this PR since you were the one who originally added the word-wrap stuff?

@peteharverson Can you check if this fixes your issue? IE11 will still behave poorly because it just doesn't support word-break.

[cjcenizal]

@cchaos Do you think we could update the examples to demonstrate the bug with the original styles, so we can then verify that the new styles fix it?

[cchaos]

@cjcenizal & @peteharverson Based on more investigating, I've updated the description of the PR and changed the implementation of the "fix".

cc @snide

[cjcenizal]

Looks great! Nice analysis. Thanks for digging in and explaining everything so clearly. I just had a couple minor suggestions.

[cchaos]

@cjcenizal Is this documentation more helpful?

[peteharverson]

Confirm this fixes the wrapping of text in the column header of the ML jobs table (all browsers except IE).

Firefox before fix:

Firefox after fix: