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

[Maps] Fix long field truncation on Comboboxes in Maps #171509

Closed
3 tasks
teresaalvarezsoler opened this issue Nov 20, 2023 · 1 comment · Fixed by #171829
Closed
3 tasks

[Maps] Fix long field truncation on Comboboxes in Maps #171509

teresaalvarezsoler opened this issue Nov 20, 2023 · 1 comment · Fixed by #171829
Assignees
@mbondyra
Labels
Feature:Maps impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas

Comments

@teresaalvarezsoler
Copy link

Describe the feature:

When field names are very long they are unreadable in the Maps application when users try to pick them for different reasons. We should apply middle-truncation as well as auto-expansion as we did in other Kibana places (see #170398 and #168753) to allow at least 60 chars in each field picker

  • Documents layer > Sorting by field image
  • Documents layer > Joins image
  • In all layers, there are multiple field pickers in the Layer Style section image
@teresaalvarezsoler teresaalvarezsoler added triage_needed impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. Feature:Maps labels Nov 20, 2023
@botelastic botelastic bot added the needs-team Issues missing a team label label Nov 20, 2023
@teresaalvarezsoler teresaalvarezsoler added the Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas label Nov 20, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@botelastic botelastic bot removed the needs-team Issues missing a team label label Nov 20, 2023
@mbondyra mbondyra self-assigned this Nov 21, 2023
@ThomThomson ThomThomson added loe:small Small Level of Effort and removed triage_needed labels Nov 21, 2023
@mbondyra mbondyra mentioned this issue Nov 23, 2023
Merged
mbondyra added a commit that referenced this issue Nov 29, 2023
@mbondyra @kibanamachine
[Maps] Fix long field truncation on Comboboxes (#171829)
37d5aca 
## Summary

Fixes #171509 (fixed in all the
places in maps)

Adds middle truncation and combobox auto-expansion to the content to
approximate of 60 character maximum for `SingleFieldSelect` and
`FieldSelect` components in maps.
I removed custom `renderOption` prop so the combobox can take care of
the proper truncation while searching through the fields. One case I had
to hack was to display a tooltip for a disabled state. I used `prepend`
and some custom styling to do so - it works as before (check out the
screenshot below).

<details>
 <summary> FieldSelect component before</summary>
<img width="471" alt="Screenshot 2023-11-22 at 16 08 21"
src="https://github.com/elastic/kibana/assets/4283304/eb8a682a-0dfe-4bb0-9a88-8dc5863a5aff">

</details>

<details>
 <summary> FieldSelect component after</summary>
<img width="582" alt="Screenshot 2023-11-22 at 16 10 02"
src="https://github.com/elastic/kibana/assets/4283304/b840fb7e-0789-46b7-b783-8e0aadb270ac">

</details>

<details>
 <summary> SingleFieldSelect component before</summary>
<img width="430" alt="Screenshot 2023-11-23 at 10 23 15"
src="https://github.com/elastic/kibana/assets/4283304/fc4af30c-32ad-40d8-a051-4b123be8aa54">
</details>

<details>
 <summary> SingleFieldSelect component after</summary>
<img width="576" alt="Screenshot 2023-11-22 at 16 32 43"
src="https://github.com/elastic/kibana/assets/4283304/2c3f496e-2e1b-4cf9-aa5b-f38c7a7eace2">

#### disabled state 
<img width="829" alt="Screenshot 2023-11-22 at 17 10 48"
src="https://github.com/elastic/kibana/assets/4283304/8db0b076-d3f5-4ec4-9e7c-0e7121b14e04">

</details>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mbondyra mbondyra

Labels
Feature:Maps impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:small Small Level of Effort Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Maps] Fix long field truncation on Comboboxes mbondyra/kibana
4 participants
@mbondyra @ThomThomson @elasticmachine @teresaalvarezsoler