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(legend): sizing for short labels with scrollbar #1115

Merged
merged 3 commits into from
Apr 13, 2021

Conversation

nickofthyme
Copy link
Collaborator

@nickofthyme nickofthyme commented Apr 12, 2021

Summary

fixes #1011

The previous fix via #1019 did not account for the full scrollbar width of 16px instead worked on minimizing the width needed based on a sample dataset. This PR accounts for the full width of the legend whenever the scrollbar is present.

Screen.Recording.2021-04-12.at.01.52.45.PM.mp4

Notice the entire legend element is 66px whereas the legend item list is only 50px. Thus 16px scrollbar width.

Checklist

  • Proper documentation or storybook story was added for features that require explanation or tutorials
  • Unit tests were updated or added to match the most common scenarios

@nickofthyme nickofthyme added bug Something isn't working :legend Legend related issue labels Apr 12, 2021
@codecov-io
Copy link

Codecov Report

Merging #1115 (12b7c93) into master (64bdd88) will increase coverage by 0.41%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1115      +/-   ##
==========================================
+ Coverage   72.09%   72.51%   +0.41%     
==========================================
  Files         382      398      +16     
  Lines       11953    12268     +315     
  Branches     2613     2641      +28     
==========================================
+ Hits         8618     8896     +278     
- Misses       3310     3339      +29     
- Partials       25       33       +8     
Flag Coverage Δ
unittests 72.09% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/state/selectors/get_legend_size.ts 93.02% <100.00%> (ø)
src/mocks/series/utils.ts 100.00% <0.00%> (ø)
src/mocks/specs/specs.ts 83.33% <0.00%> (ø)
src/mocks/geometries.ts 92.85% <0.00%> (ø)
src/mocks/specs/index.ts 100.00% <0.00%> (ø)
src/mocks/series/data.ts 100.00% <0.00%> (ø)
src/mocks/annotations/annotations.ts 66.66% <0.00%> (ø)
src/mocks/series/series_identifiers.ts 100.00% <0.00%> (ø)
src/mocks/store/index.ts 100.00% <0.00%> (ø)
src/mocks/index.ts 100.00% <0.00%> (ø)
... and 7 more

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 64bdd88...12b7c93. Read the comment docs.

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.

Checked locally, I have changed a bit the grid line story to make the scroll bar appear (since the example on the fixed issue looks like outdated) and seems to correctly fix the issue.

@nickofthyme nickofthyme merged commit 6e1f223 into elastic:master Apr 13, 2021
@nickofthyme nickofthyme deleted the fix-legend-sizing branch April 13, 2021 14:18
nickofthyme pushed a commit that referenced this pull request Apr 13, 2021
# [28.1.0](v28.0.1...v28.1.0) (2021-04-13)

### Bug Fixes

* **legend:** sizing for short labels with scrollbar ([#1115](#1115)) ([6e1f223](6e1f223))
* **xy:** negative bar highlight and click ([#1109](#1109)) ([ec17cb2](ec17cb2)), closes [#1100](#1100)

### Features

* **a11y:** improve chart figure ([#1104](#1104)) ([815cf39](815cf39))
* **partition:** order slices and sectors ([#1112](#1112)) ([74df29b](74df29b))
* **partitions:** small multipies events pass on smAccessorValue ([#1106](#1106)) ([a3234fe](a3234fe))
* **xy:** optionally rounds the domain to nice values ([#1087](#1087)) ([f644cc4](f644cc4))
* **xy:** specify pixel and ratio width for bars ([#1114](#1114)) ([58de413](58de413))
* mosaic ([#1113](#1113)) ([64bdd88](64bdd88))
@nickofthyme
Copy link
Collaborator Author

🎉 This PR is included in version 28.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme nickofthyme added the released Issue released publicly label Apr 13, 2021
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working :legend Legend related issue released Issue released publicly
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Legend sizing does not account for scrollbar width
3 participants