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

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

@@ -1,6 +1,7 @@
 .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 Visualization editors, elastic-charts and infrastructure v7.9.0 v8.0.0 labels Jun 18, 2020

mbondyra requested review from wylieconlon, flash1293 and cchaos 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mbondyra commented Jun 18, 2020

elasticmachine commented Jun 18, 2020

cchaos commented Jun 18, 2020

flash1293 left a comment

mbondyra commented Jun 18, 2020

flash1293 commented Jun 18, 2020

mbondyra commented Jun 18, 2020 •

edited

Loading

cchaos left a comment

cchaos Jun 18, 2020

mbondyra commented Jun 25, 2020

mbondyra commented Jun 25, 2020

flash1293 left a comment

mbondyra commented Jun 25, 2020

kibanamachine commented Jun 25, 2020

wylieconlon left a comment

mbondyra commented Jun 26, 2020

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

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

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

Conversation

mbondyra commented Jun 18, 2020

Summary

elasticmachine commented Jun 18, 2020

cchaos commented Jun 18, 2020

flash1293 left a comment

Choose a reason for hiding this comment

mbondyra commented Jun 18, 2020

flash1293 commented Jun 18, 2020

mbondyra commented Jun 18, 2020 • edited Loading

cchaos left a comment

Choose a reason for hiding this comment

cchaos Jun 18, 2020

Choose a reason for hiding this comment

mbondyra commented Jun 25, 2020

mbondyra commented Jun 25, 2020

flash1293 left a comment

Choose a reason for hiding this comment

mbondyra commented Jun 25, 2020

kibanamachine commented Jun 25, 2020

💚 Build Succeeded

Build metrics

History

wylieconlon left a comment

Choose a reason for hiding this comment

mbondyra commented Jun 26, 2020

mbondyra commented Jun 18, 2020 •

edited

Loading