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

[Discover] Add wrapping to field list on sidebar #71312

Merged
merged 7 commits into from
Jul 15, 2020

Conversation

andreadelrio
Copy link
Contributor

Summary

This PR removes truncation from fields and makes them wrap instead. Following what's being done on Lens, wrapping happens on the.whenever possible.

Also added a rounded border to each item and adjusted spacing.

aFrame 11

Fixes #69814

Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
- [ ] Documentation was added for features that require explanation or tutorials

For maintainers

@andreadelrio andreadelrio requested a review from a team July 9, 2020 20:12
@andreadelrio andreadelrio requested a review from a team as a code owner July 9, 2020 20:12
@andreadelrio andreadelrio added Feature:Discover Discover Application Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Jul 9, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@andreadelrio andreadelrio added release_note:skip Skip the PR/issue when compiling release notes v8.0.0 labels Jul 9, 2020
@kertal
Copy link
Member

kertal commented Jul 14, 2020

@elasticmachine merge upstream

@kertal kertal added the v7.10.0 label Jul 14, 2020
Copy link
Member

@kertal kertal left a comment

Choose a reason for hiding this comment

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

Code LGTM, this will be a big improvement for users with long fieldnames. My question here is, if it needs more adaption. Compared to Lens there's less available minimum width available, maybe this should be increased? CC: @AlonaNadler

Bildschirmfoto 2020-07-14 um 16 13 18

@cchaos
Copy link
Contributor

cchaos commented Jul 14, 2020

I feel like a lot of work is going into duplicating the Lens display of fields when, at this point, we should probably just make a re-usable component. They can still have a few differentiating characteristics like the "Add" button but display-wise it is taking just as long to replicate the same styles. I'd say, that this PR is a quick win to get wrapping field names, but the next PR should be to create a component for use in both applications.

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

Works as described. Quick win for non-truncated field names. Just a few comments on the SASS

text-align: left;
}

.dscSidebarField__name {
margin-left: $euiSizeS;
flex-grow: 1;
word-break: break-word;
padding-right: $euiSizeXS * 0.25;
Copy link
Contributor

Choose a reason for hiding this comment

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

1px padding?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That is to avoid having the field name too close to the button. This as an example, no padding and 1px padding

Group 3

Copy link
Contributor

Choose a reason for hiding this comment

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

👍 Gotcha. Since the math just ends up being 1px your fine to just say 1px it's anything above that that requires math on our sizing variables

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

😃 LGTM!

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Build metrics

✅ unchanged

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@kertal kertal self-requested a review July 15, 2020 15:45
Copy link
Member

@kertal kertal left a comment

Choose a reason for hiding this comment

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

Code LGTM, hurray for the quick win 🎉 , tested locally in Chrome, Firefox, Safari, MacOs 10.14.6, works as expected

@andreadelrio
Copy link
Contributor Author

Discussed with Matthias that we'll take care of the sidebar width in another PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Discover Discover Application release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.10.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Discover] Field list should wrap long field names instead of truncating
5 participants