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 field truncation on Combo boxes #168753

Closed
4 of 6 tasks
Tracked by #169986
timductive opened this issue Oct 12, 2023 · 6 comments · Fixed by #172296
Closed
4 of 6 tasks
Tracked by #169986

Fix field truncation on Combo boxes #168753

timductive opened this issue Oct 12, 2023 · 6 comments · Fixed by #172296
Assignees
@mbondyra
Labels
enhancement New value added to drive a business result impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Team:Visualizations Visualization editors, elastic-charts and infrastructure usability

Comments

@timductive
Copy link
Member

timductive commented Oct 12, 2023 •
edited
Loading

Now that EUI has added the following capabilities via elastic/eui#7250:

  • select truncation type
  • multi-line truncation
  • min-width on combo boxes

We can update the UX in kibana to take advantage of these capabilities.
The below suggested solutions are a best-guess, will require some tinkering to see what looks best (use o11y data to test)

Combobox tasks
Preview Give feedback

Selectable Tasks
Preview Give feedback
  3. [Dashboard][Controls] Fix field truncation on EuiSelectable #170398
    Feature:Dashboard Project:Dashboard Usability Team:Presentation impact:medium loe:medium
    mbondyra
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 12, 2023
@timductive timductive added enhancement New value added to drive a business result usability loe:medium Medium Level of Effort Team:Visualizations Visualization editors, elastic-charts and infrastructure impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. and removed needs-team Issues missing a team label labels Oct 12, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-visualizations (Team:Visualizations)

@teresaalvarezsoler
Copy link

@timductive why are we removing auto-expanding and setting a fix width instead? Why 60 char?

@stratoula
Copy link
Contributor

Yes good question, I also like the auto-expansion!

@timductive
Copy link
Member Author

I changed it to say "maybe" I don't feel strongly either way, we can keep the auto-expansion unless it looks weird when we add in the new enhancements. I defer to the best judgement of whomever picks up this issue.

@timductive
Copy link
Member Author

@teresaalvarezsoler the 60char limit is somewhat arbitrary but we need to pick a number and we looked at other tools and common field name lengths and 60char was about the right average.

@stratoula
Copy link
Contributor

I changed it to say "maybe" I don't feel strongly either way, we can keep the auto-expansion unless it looks weird when we add in the new enhancements. I defer to the best judgement of whomever picks up this issue.

Come on Tim, this was your PR :D We can't take it back so lightly

@timductive timductive mentioned this issue Oct 26, 2023
Open
@teresaalvarezsoler teresaalvarezsoler mentioned this issue Nov 2, 2023
Closed
3 tasks
@mbondyra mbondyra self-assigned this Nov 5, 2023
@mbondyra mbondyra mentioned this issue Nov 8, 2023
Merged
mbondyra added a commit that referenced this issue Nov 15, 2023
@mbondyra
[Lens] [Unified Search] Fix field truncation on Combo boxes (#170889)
362ef64 
## Summary

Fixes 3/5 of #168753
Doesn't set up multilines. Doesn't remove auto-expanding logic. Middle
truncates.

(Unified Search) Field selector
<img width="984" alt="Screenshot 2023-11-13 at 11 30 20"
src="https://github.com/elastic/kibana/assets/4283304/9acb6462-3205-4e5c-81bd-c3ae10c8323b">

(Unified Search) Value selector: 
<img width="972" alt="Screenshot 2023-11-13 at 11 30 30"
src="https://github.com/elastic/kibana/assets/4283304/e58b09de-d582-431f-bbd6-97b7c5bd38de">


(Lens) Field picker within layer config: 
<img width="346" alt="Screenshot 2023-11-09 at 14 44 58"
src="https://github.com/elastic/kibana/assets/4283304/4ecb0ea5-bb01-49e3-a54f-4c8c5884c418">

Also fixes tiny stylistic issue for dataview picker label cut on the
bottom:
<img width="368" alt="Screenshot 2023-11-09 at 15 06 38"
src="https://github.com/elastic/kibana/assets/4283304/b9ae6956-c1ef-481e-905d-71ffe5e5545a">
<img width="386" alt="Screenshot 2023-11-09 at 15 07 08"
src="https://github.com/elastic/kibana/assets/4283304/5d49ed7a-e8f2-40c1-ac53-a3580b82740e">
@mbondyra mbondyra mentioned this issue Nov 16, 2023
Closed
9 tasks
@teresaalvarezsoler teresaalvarezsoler mentioned this issue Nov 20, 2023
Closed
3 tasks
@mbondyra mbondyra mentioned this issue Nov 21, 2023
Merged
kibanamachine added a commit to dgieselaar/kibana that referenced this issue Nov 28, 2023
@mbondyra @kibanamachine
[Lens][Unified search] Auto expand comboboxes and popovers based on t…
085878c 
…he content (elastic#171573)

## Summary

Fixes partially two remaining tasks from
elastic#168753
Fixes partially dataview issue from
elastic#170398
It stretches to maximum approximate 60 characters if any of the labels
in the list is of this length. If the content doesn't need the container
to stretch, it doesn't do it.


<details>
 <summary> Field picker in Lens</summary>

minimum width:
<img width="445" alt="Screenshot 2023-11-21 at 15 56 03"
src="https://github.com/elastic/kibana/assets/4283304/2f0f8482-bd00-4ec2-bbde-cbc4f3198eed">

auto-expanded width: 
<img width="575" alt="Screenshot 2023-11-21 at 15 58 22"
src="https://github.com/elastic/kibana/assets/4283304/df7bab4d-0a08-4d49-8a91-9386eba15d93">
</details>


<details>
  <summary>Layer data view picker in Lens</summary>
<img width="376" alt="Screenshot 2023-11-21 at 16 01 17"
src="https://github.com/elastic/kibana/assets/4283304/b8a98d83-dabc-49bd-a3cc-fc3856de6d3e">
<img width="455" alt="Screenshot 2023-11-21 at 15 58 09"
src="https://github.com/elastic/kibana/assets/4283304/f2c5bde8-7a4a-485f-bf97-fc2179171e50">
<img width="615" alt="Screenshot 2023-11-21 at 15 56 27"
src="https://github.com/elastic/kibana/assets/4283304/0574fc6c-69a3-44e9-9d48-8d427c1c5dba">
</details>

<details> <summary>Data view picker in Unified Search</summary>
<img width="341" alt="Screenshot 2023-11-21 at 16 00 29"
src="https://github.com/elastic/kibana/assets/4283304/1c838ded-0dc5-4632-94e4-1d94586f667c">
<img width="441" alt="Screenshot 2023-11-21 at 15 58 04"
src="https://github.com/elastic/kibana/assets/4283304/87e4f1c0-7922-4b94-a114-f23ece544395">
<img width="561" alt="Screenshot 2023-11-21 at 15 56 20"
src="https://github.com/elastic/kibana/assets/4283304/3ea0f222-5241-4c5b-b00b-4311972754cc">
</details>

<details>
 <summary> Data view picker in dashboard Create control flyout</summary>
<img width="677" alt="Screenshot 2023-11-21 at 16 14 00"
src="https://github.com/elastic/kibana/assets/4283304/0455b6ed-555d-4cff-9e34-0de377be6e04">
<img width="682" alt="Screenshot 2023-11-21 at 15 54 56"
src="https://github.com/elastic/kibana/assets/4283304/2a67685c-379d-4c0b-bf56-dbf7c35b3bd4">
</details>

<details> 
<summary> Unified search data view select component (tested in
maps)</summary>
<img width="570" alt="Screenshot 2023-11-22 at 14 38 25"
src="https://github.com/elastic/kibana/assets/4283304/bb52ab22-626d-4556-b40c-c9bcc925f426">
</details>

<details>
<summary>Unified search field and value picker</summary>
Adds `panelMinWidth`, removes the custom flex width change behavior
<img width="1142" alt="Screenshot 2023-11-22 at 14 40 26"
src="https://github.com/elastic/kibana/assets/4283304/2450957f-38b7-4a73-b531-7acb29cb56bc">


https://github.com/elastic/kibana/assets/4283304/f4f33624-9287-403e-8472-81f705440f97

</details>

<details> 
<summary> Discover breakdown field</summary>

Removes the focus stretching and instead uses the panelMinWidth prop

<img width="419" alt="Screenshot 2023-11-21 at 16 46 50"
src="https://github.com/elastic/kibana/assets/4283304/e35125ad-8823-4bff-954b-8119a352829c">
<img width="619" alt="Screenshot 2023-11-21 at 16 48 20"
src="https://github.com/elastic/kibana/assets/4283304/89e63daf-a59e-43e1-a6ec-91d1b15b0fcd">


</details>

---------

Co-authored-by: kibanamachine <[email protected]>
@mbondyra mbondyra mentioned this issue Nov 30, 2023
Merged
mbondyra added a commit that referenced this issue Dec 1, 2023
@mbondyra
[Unified Search] [Lens] [Dashboard Controls] Middle truncation for da…
d83955d 
…ta view pickers and field lists (#172296)

Adds middle truncation to the following:
Fixes #168753
Fixes #170398 

Unified Search:
<img width="554" alt="Screenshot 2023-11-30 at 16 06 49"
src="https://github.com/elastic/kibana/assets/4283304/38d95de5-78d3-4c33-8287-897876422886">

Lens layer data view picker:
<img width="620" alt="Screenshot 2023-11-30 at 16 06 58"
src="https://github.com/elastic/kibana/assets/4283304/68c6f0d6-7496-4db9-a0c0-0596350a4e90">

Create control field list:
<img width="843" alt="Screenshot 2023-11-30 at 16 15 12"
src="https://github.com/elastic/kibana/assets/4283304/7ac4fb32-bdd4-44b0-ab49-2967e3d54fe2">

Create control data view list:

<img width="584" alt="Screenshot 2023-11-30 at 16 33 10"
src="https://github.com/elastic/kibana/assets/4283304/a3b53c24-c363-4d72-b3e2-d4073ae4b3cf">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mbondyra mbondyra

Labels
enhancement New value added to drive a business result impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Team:Visualizations Visualization editors, elastic-charts and infrastructure usability
Projects
None yet
Milestone
No milestone
5 participants
@timductive @mbondyra @elasticmachine @stratoula @teresaalvarezsoler