Fix text wrapping utilities #2157
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
July 23, 2019 11:06
… for better browser support
cchaos
added
style only
deprecations
snide
approved these changes
Jul 23, 2019
| @@ -12,8 +12,36 @@ import { | |||
| const longLink = | |||
| 'http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool'; | |||
|
|
|||
| const wrappingExampleStyle = { | |||
There was a problem hiding this comment.
I don't know if it's any better or worse, and I know this was already in there, but anytime we've needed docs specific styling I've done it in the Sass over in this file.
https://github.com/elastic/eui/blob/master/src-docs/src/components/guide_components.scss
There was a problem hiding this comment.
Yeah... this was already in the file, I just noticed it was being repeated a lot, so I just moved it to a var.
| @@ -25,12 +25,23 @@ | |||
| .eui-textInheritColor {color: inherit !important;} | |||
|
|
|||
| .eui-textBreakWord { | |||
| word-break: break-all !important; // Fallback for FF and IE | |||
| word-break: break-word !important; | |||
| // https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ | |||
There was a problem hiding this comment.
Thanks for including stuff like this.
thompsongl
approved these changes
Jul 23, 2019
3 tasks
2 tasks
thompsongl
pushed a commit
to thompsongl/eui
that referenced
this pull request
Sep 10, 2019
… for better browser support * Set `.eui-textOverflowWrap` to be deprecated * Fix up guidelines and change `. euiYScrollWithShadows` to `.eui-yScrollWithShadows`
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.
@markov00 pointed out that our fallback for IE in
.eui-textOverflowWrapwasn't quite right. We were close with all our text-wrapping properties but not quite right.word-breakis just to indicate how to break words, butword-wraptells browser if they should break. With some browsers, you can't really use the former without first setting the latter tobreak-word.This PR fixes the original
.eui-textBreakWordutility class to be more browser compatible.It now works on IE:
This also means that
.eui-textOverflowWrapis now redundant to.eui-textBreakWordso I've set that for deprecation and removed it from the docs.So now it's just back to the main 3 that work in all browsers similarly.
Change to another utility class name:
. euiYScrollWithShadows-->.eui-yScrollWithShadowssince the former didn't match our patterns. This class was introduced not too long ago, so I doubt there are really any usages yet.Checklist
[ ] This was checked in mobile[ ] This was checked in dark mode[ ] Any props added have proper autodocs[ ] 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