Skip to content

Commit

Permalink
[Lens] fix searching through chart switch (#179004)
Browse files Browse the repository at this point in the history
## Summary

By merging this [PR](#178328) I
introduced the following bug: when searching through the chart switch,
the label text doesn't appear.

Before:
Searching (the actual bug):
<img width="474" alt="Screenshot 2024-03-19 at 21 12 55"
src="https://github.com/elastic/kibana/assets/4283304/4c29837f-e580-4a45-9f18-20201118a68f">
not searching (correct behavior, just here to compare with the 'after'):
<img width="492" alt="Screenshot 2024-03-19 at 21 12 46"
src="https://github.com/elastic/kibana/assets/4283304/483b9f6c-fd16-48f7-bf46-f40fb922a265">


I tried to fix it with CSS and still follow the design we agreed on, but
I cannot make it work. The problem is that we have to set up the
`euiSelectableListItem__text` css prop to `flex-grow: 0` to have the
extra icons next to the text. At the same time, when we search through
the component, the internal EuiTruncate component calculates the space
to generate the truncated string. Because of the `flex-grow:0`, the
EuiTruncate assumes there is no space and shows nothing. I tried to find
a solution for a while now and I don't think it's possible. Instead of
reverting my changes, for now I'll just change the styles to appear on
the right side, the same way as before. Any other ideas welcome 🙏🏼

After:
searching:
<img width="461" alt="Screenshot 2024-03-19 at 21 12 01"
src="https://github.com/elastic/kibana/assets/4283304/6a8fa484-7cf9-4d38-b852-99c5f0db9847">

not searching (the icons from the right):
<img width="468" alt="Screenshot 2024-03-19 at 21 12 15"
src="https://github.com/elastic/kibana/assets/4283304/37378e88-e6a3-4d1a-955d-b015a0cb02c9">

Co-authored-by: Stratoula Kalafateli <[email protected]>
  • Loading branch information
mbondyra and stratoula authored Mar 20, 2024
1 parent 37dee75 commit 2544c50
Showing 1 changed file with 2 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,8 @@
}
}

.lnsChartSwitch__option {
.euiSelectableListItem__text {
flex-grow: 0;
}
.euiSelectableListItem__append {
margin-left: $euiSizeXS;
display: flex;
flex-grow: 1;
align-items: center;
justify-content: flex-end;
}
.lnsChartSwitch__append {
display: inline-flex;
}

// Targeting img as this won't target normal EuiIcon's only the custom svgs's
Expand Down

0 comments on commit 2544c50

Please sign in to comment.