Fix EuiBadge truncation #2190
Merged
Fix EuiBadge truncation #2190
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
snide
suggested changes
Aug 1, 2019
snide
approved these changes
Aug 1, 2019
- Added docs example for truncations - Duplicated the `aria-label` as the `title` on the clickable icon - Keeping the `ref` and `title` attributes to the same element as `…rest` so they can be overridden - Fix max width of badges with onClick and iconOnClick - Fix text alignment - Change cursor to default unless clickable
|
Ok I also added a docs section for truncation which also explains the
And good thing I did because I found a few more fixes detailed in this commit message. |
thompsongl
reviewed
Aug 1, 2019
thompsongl
reviewed
Aug 1, 2019
added 3 commits
August 1, 2019 17:14
thompsongl
approved these changes
Aug 1, 2019
thompsongl
pushed a commit
to thompsongl/eui
that referenced
this pull request
Sep 10, 2019
* Fix badge truncation when a `<button>` * Added innerText to title attribute * Fix truncation if button is the child * Max width accounts for padding, etc. * Some more fixes - Added docs example for truncations - Duplicated the `aria-label` as the `title` on the clickable icon - Keeping the `ref` and `title` attributes to the same element as `…rest` so they can be overridden - Fix max width of badges with onClick and iconOnClick - Fix text alignment - Change cursor to default unless clickable
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.
Fixes #2189
Luckily it was mostly a matter of a missing class and missing truncation mixin. I also needed to add a
max-width: 100%otherwise it wouldn't stop at the container's width.Before -- no max-width
It wouldn't even truncate at all
Before -- with max-width
When it did truncate, it didn't do so correctly
After
Now it truncates no matter the contents. I also added the
innerTextto thetitleattribute of the surrounding content so that consumers don't have to worry about adding this or tooltips to show the full text.Checklist
[ ] Checked in dark mode[ ] Props have proper autodocs[ ] Added documentation examples[ ] Checked for breaking changes and labeled appropriately[ ] Checked for accessibility including keyboard-only and screenreader modes