Added euiTextBreakWord mixin to the euiTitle mixin
#5107
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 3 commits
August 28, 2021 17:54
Closes elastic#5105 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.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5107/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5107/ |
cee-chen
approved these changes
Aug 30, 2021
|
I've moved all those "known bugs" to respective issues and I'll now revert the testing commit. |
This reverts commit 8ccb36f.
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5107/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #5105
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.
Testing
I've also pushed a
REVERT MEcommit that adds a really long string to the end of content that uses the mixin to test all the usages.Found breaks with fixes
EuiTable header cell wasn't using the full `euiTextTruncate` mixin
This was a really old style, before we had the mixin, where there title mixin was used at more parent element than the truncation mixin. But there was a style that was applying
nowrapat the same level, which I just changed to the wholeeuiTextTruncatemixin.Before
After
Added `euiTextTruncate` mixin to EuiFormLabel
It doesn't actually use the
euiTextmixin, but I saw it was only getting the word-wrap when used in a horizontal form row. I've moved it to apply to ALL form row labels.Before
After
Known breaks that need a follow up
EuiHeader has general truncation/max-width control issues. #5110
EuiCallOut and EuiToast's left alignment isn't great #5111
Should EuiTour max it's width? #5112
Checklist
- [ ] Props have proper autodocs and playground toggles- [ ] Added documentation- [ ] Checked Code Sandbox works for the any docs examples- [ ] Added or updated jest tests- [ ] Checked for breaking changes and labeled appropriately- [ ] Checked for accessibility including keyboard-only and screenreader modes