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.

Sign up for GitHub

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

Jump to bottom

fix(tooltip): fix overflow for long series names #274

Merged
merged 2 commits into from
Aug 5, 2019
Merged

fix(tooltip): fix overflow for long series names #274

merged 2 commits into from
Aug 5, 2019

Conversation

nickofthyme
Copy link
Collaborator

Summary

Allow long series names in tooltip to wrap to next line

fix #270

Before

Screen Shot 2019-07-30 at 12 51 08 PM

After

Screen Shot 2019-07-30 at 1 57 12 PM

Checklist

@nickofthyme
fix(tooltip): fix overflow for long series names
85ba3fc 
Allow long series names in tooltip to wrap to next line

fix elastic#270
@nickofthyme nickofthyme added :chart Chart element related issue :styling Styling related issue bug Something isn't working labels Jul 30, 2019
nickofthyme
nickofthyme commented Jul 30, 2019
View reviewed changes
src/components/_tooltip.scss Outdated
@@ -10,35 +10,38 @@
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
Copy link
Collaborator Author

@nickofthyme nickofthyme Jul 30, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

NOTE: <table> does NOT respect relative widths without this ☝️

@codecov-io
Copy link

codecov-io commented Jul 30, 2019 •
edited
Loading

Codecov Report

Merging #274 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #274   +/-   ##
=======================================
  Coverage   98.05%   98.05%           
=======================================
  Files          37       37           
  Lines        2671     2671           
  Branches      613      613           
=======================================
  Hits         2619     2619           
  Misses         47       47           
  Partials        5        5

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8de3818...690fd9f. Read the comment docs.

markov00
markov00 reviewed Jul 31, 2019
View reviewed changes
Copy link
Member

@markov00 markov00 left a comment

Choose a reason for hiding this comment

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

hey @nickofthyme can you test the case of a series with a very long word like an URL for example, to break those you can use the euiOverflowWrap mixin

@nickofthyme
Copy link
Collaborator Author

Tested for long URLs and Long descriptions with word breaks...

image

@markov00
Copy link
Member

markov00 commented Aug 2, 2019

@nickofthyme changing the tooltip from table to list makes every line on the tooltip independent resulting in different width of the value column:

from (master)
Screenshot 2019-08-02 at 15 51 02

to
Screenshot 2019-08-02 at 15 50 04

I just want to ask @cchaos what she think about that. For sure is more compact and nice but I'd like a design opinion on that

@cchaos
Copy link
Contributor

cchaos commented Aug 2, 2019

I don't have a strong opinion either way, however if there's space to show more of the series label then it's nice to use it.

@nickofthyme
Copy link
Collaborator Author

@markov00 Good catch! As long as @cchaos is cool with it.

I noticed that the legend does this too so I was trying to resemble that UI.
image

@nickofthyme nickofthyme merged commit 717486f into elastic:master Aug 5, 2019
@nickofthyme nickofthyme deleted the fix/270/tooltip-overflow branch August 5, 2019 15:35
markov00 pushed a commit that referenced this pull request Aug 5, 2019
@semantic-release-bot
chore(release): 8.1.7 [skip ci]
d5a96b8 
## [8.1.7](v8.1.6...v8.1.7) (2019-08-05)

### Bug Fixes

* **tooltip:** fix overflow for long series names ([#274](#274)) ([717486f](717486f)), closes [#270](#270)
@markov00
Copy link
Member

markov00 commented Aug 5, 2019

🎉 This PR is included in version 8.1.7 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Aug 5, 2019
This was referenced Sep 19, 2019
Closed
Closed
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
@semantic-release-bot
chore(release): 8.1.7 [skip ci]
7629a8a 
## [8.1.7](elastic/elastic-charts@v8.1.6...v8.1.7) (2019-08-05)

### Bug Fixes

* **tooltip:** fix overflow for long series names ([opensearch-project#274](elastic/elastic-charts#274)) ([e80758f](elastic/elastic-charts@e80758f)), closes [opensearch-project#270](elastic/elastic-charts#270)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@markov00 markov00 markov00 approved these changes

@emmacunningham emmacunningham Awaiting requested review from emmacunningham

@cchaos cchaos Awaiting requested review from cchaos

@rshen91 rshen91 Awaiting requested review from rshen91

Assignees
No one assigned
Labels
bug Something isn't working :chart Chart element related issue released Issue released publicly :styling Styling related issue
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Tooltip overflowing on long series names
4 participants
@nickofthyme @codecov-io @markov00 @cchaos