Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix global filter truncation #2194

Merged
merged 5 commits into from
Aug 2, 2019
Merged

Conversation

cchaos
Copy link
Contributor

@cchaos cchaos commented Aug 2, 2019

Fixes the other half of #2189 and elastic/kibana#35225

... also finishes the fixes in #2190 for IE by:

Removes box-sizing: content-box from EuiBadge

@snide If you can recall why that was in there I will try to find another solution. But that part of the styles was really conflicting with IE and forcing all those max-width calcs. Instead, I removed that to fallback to border-box and now just setting max-width: 100% accounts for all the extras.

Fixes the truncation of global filters

BEFORE
Screen Shot 2019-08-02 at 09 37 02 AM

AFTER
Screen Shot 2019-08-02 at 09 25 34 AM

Firefox
Screen Shot 2019-08-02 at 09 25 06 AM

IE
Screen Shot 2019-08-02 at 09 24 20 AM


Most of these fixes will need to be repeated in Kibana 😓 but atleast this diff will tell us exactly what to do and we'll need the badge fix in there first.

Checklist

  • [ ] Checked in dark mode
  • Checked in mobile
  • Checked in IE11 and Firefox
  • [ ] Props have proper autodocs
  • Added documentation examples
  • [ ] Added or updated jest tests
  • [ ] Checked for breaking changes and labeled appropriately
  • [ ] Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

cchaos added 3 commits August 1, 2019 18:12
by removing`box-sizing: content-box` which removes the need for calc’d max-widths and fix the flex on teh child button
@cchaos cchaos requested review from snide and thompsongl August 2, 2019 13:39
Copy link
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verified it works in IE11 and still works in the evergreens.

Unless @snide recalls a reason not to move forward, this LGTM

Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of these fixes will need to be repeated in Kibana

I agree this is minor enough we don't need to call this breaking, Let's just make sure to remember this when we build the next release.

Generally we've made an issue in EUI as a reminder (which is how we've handled backports). I'd recommend making one when you merge.

Code looks fine.

@cchaos
Copy link
Contributor Author

cchaos commented Aug 2, 2019

I'm going to assign myself to elastic/kibana#35225 and make a comment/note in there to migrate those fixes to Kibana.

@cchaos cchaos merged commit 496a3e6 into elastic:master Aug 2, 2019
thompsongl pushed a commit to thompsongl/eui that referenced this pull request Sep 10, 2019
* [Pattern] Fix truncation of global filters
* Fix EuiBadge truncation (esp in IE) by removing`box-sizing: content-box` which removes the need for calc’d max-widths and fix the flex on teh child button
@cchaos cchaos deleted the global-filter-truncate branch October 22, 2019 20:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants