[Lens] Fix delete button position in dimension panel for long labels by mbondyra · Pull Request #69495 · elastic/kibana

mbondyra · 2020-06-18T12:04:57Z

Summary

Nitpick: The side effect is that highlighting looks a bit off when clicking to trigger dimension popover. @cchaos do you think it's worth to rethink this solution?

…anel

elasticmachine · 2020-06-18T12:05:31Z

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

cchaos · 2020-06-18T15:13:24Z

Now that we can not worry about IE11, you can use :focus-within to color the whole config button.

flash1293

I'm not sure whether this fix is enough, I tried it with a veryverylong field name and it seems like I can't press the "x":

Maybe we need some overflow: hidden?

To create my test data:

POST testindex/_doc
{
  "veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongname": 123,
  "s": 123
}

mbondyra · 2020-06-18T15:45:23Z

It only happens for very longs words, but fair point @flash1293, thanks for noticing! Another option would be to add overflow-wrap: break-word:

flash1293 · 2020-06-18T15:47:48Z

@mbondyra I actually like that better, otherwise the user might not be able to see what the field is about at all.

It only happens for very longs words

Well, what about "Rechtsschutzversicherungsgesellschaften"? 🇩🇪

mbondyra · 2020-06-18T16:09:03Z

Opinion needed:

Hyphens or no hyphens on word break?
@cchaos :focus-within on the component leads to the effect above, as button also gets its own style with half-transparent background on focus. Do you have any idea how to handle it smartly?

cchaos

Definitely no hyphens. This alters the perception of the name of the fields.
Can you find a way to remove the focus color from the text portion?

cchaos · 2020-06-18T17:16:22Z

...k/plugins/lens/public/editor_frame_service/editor_frame/config_panel/_dimension_popover.scss

 .lnsDimensionPopover {
  line-height: 0;
  flex-grow: 1;
+  max-width: calc(100% - 32px);


Need to use eui vars for all px values

Suggested change

max-width: calc(100% - 32px);

max-width: calc(100% - ${euiSizeXL});

mbondyra · 2020-06-25T06:29:30Z

@elasticmachine merge upstream

mbondyra · 2020-06-25T07:05:41Z

@cchaos I've tried to remove focus background from the button but the only option is to overwrite internal stylings from the button. I am not a fan of this solution - what if we leave it as in 7.8 styling-wise?

We can come back to it at some point, but I don't think it's a part of this PR. When it comes to bug with long labels it's ready to review.

flash1293

There are also minor issues with this in the field list on the left and while dragging, but the dimension trigger looks perfect. LGTM 👍

We can fix that one separately:

mbondyra · 2020-06-25T16:48:12Z

I've corrected it in FIeld Item too, creating an issue would take longer than this 😅 Thanks for headsup!

kibanamachine · 2020-06-25T18:28:11Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: fc4aaab

Build metrics

✅ unchanged

History

💚 Build #56190 succeeded f5efd29
💚 Build #54980 succeeded c7a264a

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

wylieconlon

LGTM!

mbondyra · 2020-06-26T07:49:56Z

Merging it - visually nothing has changed so I don't think design review is needed. If there's anything else needed, I can address it in the separate PR.

…lastic#69495)

…69495) (#70046)

* master: (34 commits) Upgrade `elliptic` dependency (`6.5.2` → `6.5.3`). (elastic#70054) [License Management] Do not break when `telemetry.enabled:false` (elastic#69711) [SECURITY] Redirect app/security to app/security/overview (elastic#70005) "Explore underlying data" in-chart action (elastic#69494) Api reference docs for state_containers and state_sync (elastic#67354) prep state transfer for passing embeddables by value to editor and back (elastic#69991) move Metrics API to start (elastic#69787) refactor: 💡 fix typo in embeddable (elastic#69417) [alerting] migrates the old `alerting` consumer to be `alerts` (elastic#69982) [APM]Create API to return data to be used on the Overview page (elastic#69137) [Lens] Fix delete button position in dimension panel for long labels (elastic#69495) [Lens] Add toolbar api (elastic#69263) Fixes bug on color picker defaults on TSVB (elastic#69889) [DOCS] Fixes wording in Upload a CSV section (elastic#69969) [Discover] Validate timerange before submitting query to ES (elastic#69363) [Maps] avoid using MAP_SAVED_OBJECT_TYPE constant when defining URL paths (elastic#69723) [Maps] Fix icon palettes are not working (elastic#69937) [Ingest Manager] Fix typo in constant name (elastic#69919) [test] skip status.allowAnonymous tests on cloud (elastic#69017) Fix backport (elastic#70003) ...

[Lens] fix moving delete button from long columns name in dimension p…

c7a264a

…anel

mbondyra requested a review from a team as a code owner June 18, 2020 12:04

mbondyra added Feature:Lens release_note:fix Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v7.9.0 v8.0.0 labels Jun 18, 2020

mbondyra requested review from cchaos, flash1293 and wylieconlon June 18, 2020 12:05

flash1293 reviewed Jun 18, 2020

View reviewed changes

cchaos suggested changes Jun 18, 2020

View reviewed changes

elasticmachine and others added 2 commits June 25, 2020 00:29

Merge branch 'master' into lens/fix-long-columns-name

6ae2db5

fix: word break & correct max-width

f5efd29

mbondyra force-pushed the lens/fix-long-columns-name branch from 6186978 to f5efd29 Compare June 25, 2020 07:01

mbondyra requested a review from cchaos June 25, 2020 07:06

flash1293 approved these changes Jun 25, 2020

View reviewed changes

same issue on field items

fc4aaab

wylieconlon approved these changes Jun 25, 2020

View reviewed changes

mbondyra merged commit 8448ae8 into elastic:master Jun 26, 2020

mbondyra mentioned this pull request Jun 26, 2020

[7.x] [Lens] Fix delete button position in dimension panel for long labels (#69495) #70046

Merged

mbondyra added a commit to mbondyra/kibana that referenced this pull request Jun 26, 2020

[Lens] Fix delete button position in dimension panel for long labels (e…

d483468

…lastic#69495)

mbondyra added a commit that referenced this pull request Jun 26, 2020

[Lens] Fix delete button position in dimension panel for long labels (#…

4b0e45d

…69495) (#70046)

mbondyra deleted the lens/fix-long-columns-name branch June 26, 2020 12:58

	max-width: calc(100% - 32px);
	max-width: calc(100% - ${euiSizeXL});

Conversation

mbondyra commented Jun 18, 2020

Summary

Uh oh!

elasticmachine commented Jun 18, 2020

Uh oh!

cchaos commented Jun 18, 2020

Uh oh!

flash1293 left a comment

Choose a reason for hiding this comment

Uh oh!

mbondyra commented Jun 18, 2020

Uh oh!

flash1293 commented Jun 18, 2020

Uh oh!

mbondyra commented Jun 18, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

cchaos Jun 18, 2020

Choose a reason for hiding this comment

Uh oh!

mbondyra commented Jun 25, 2020

Uh oh!

mbondyra commented Jun 25, 2020

Uh oh!

flash1293 left a comment

Choose a reason for hiding this comment

Uh oh!

mbondyra commented Jun 25, 2020

Uh oh!

kibanamachine commented Jun 25, 2020

💚 Build Succeeded

Build metrics

History

Uh oh!

wylieconlon left a comment

Choose a reason for hiding this comment

Uh oh!

mbondyra commented Jun 26, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

mbondyra commented Jun 18, 2020 •

edited

Loading