[EuiHighlight] Support passing an array of search strings + performance improvements
#7496
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- allows us to avoid a while loop and prevents extra crashes
- only if `highlightAll` is also passed, doesn't really make sense otherwise
cee-chen
force-pushed
the
highlight-multiple
branch
from
0b836f8
to
4858f14
Compare
cee-chen
changed the title
search stringssearch strings + performance improvements
cee-chen
force-pushed
the
highlight-multiple
branch
from
4858f14
to
a52e92b
Compare
- add toggle with array behavior (needs to be controlled/set by the consumer, not EUI - this allows us to not have to deal with a delimiter, filtering, etc) + convert examples to TSX while here + Fix playground error
- remove snapshots and prefer assertions instead - move `hasScreenReaderHelpText` test out of incorrect describe block
there's basically 2 different components/separate sets of logic going on here, so we might as well represent them as such, which: 1. takes better advantage of React memoization 2. is easier to read/parse standalone
- let it be memoized/the concern of the parent `EuiHighlight` instead, and allow the subcomponent to flexibly render whatever (defaulting to an unstyled `<mark>` if nothing is passed)
- makes it easier to debug code in React Devtools' Components tab + update our lint rule that we set to `.forwardRef` to also apply to `.memo()`ed components - will matter more as we start to optimize performance across EUI
- FunctionComponent wants a JSX return, not a string
cee-chen
force-pushed
the
highlight-multiple
branch
from
a52e92b
to
3abfac3
Compare
tkajtoch
reviewed
Feb 1, 2024
tkajtoch
approved these changes
Feb 1, 2024
cee-chen
force-pushed
the
highlight-multiple
branch
from
3abfac3
to
64ab4d8
Compare
|
There's been some memory concerns about the performance improvements mentioned offline - going to hold off on merging this PR until we've sorted them out! |
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Feb 20, 2024
`v93.0.0` ⏩ `v93.1.1` --- ## [`v93.1.1`](https://github.com/elastic/eui/releases/v93.2.0) **This is a patch release primarily intended for use by Kibana.** - Added top-level `EuiTreeView.Item` export ([#7526](elastic/eui#7526)) ## [`v93.1.0`](https://github.com/elastic/eui/releases/v93.1.0) - Added `index` glyph to `EuiIcon` ([#7498](elastic/eui#7498)) - Updated `EuiHighlight` to accept an array of `search` strings, which allows highlighting multiple, separate words within its children. This new type and behavior *only* works if `highlightAll` is also set to true. ([#7496](elastic/eui#7496)) - Updated `EuiContextMenu` with a new `panels.items.renderItem` property, which allows rendering completely custom items next to standard `EuiContextMenuItem` objects ([#7510](elastic/eui#7510)) - `EuiSuperDatePicker` updates: - Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](elastic/eui#7501)) - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](elastic/eui#7501)) - Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours). ([#7501](elastic/eui#7501)) - Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. ([#7502](elastic/eui#7502)) - Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop, which accepts a minimum number in milliseconds ([#7516](elastic/eui#7516)) - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `minInterval` prop, which accepts a minimum number in milliseconds ([#7516](elastic/eui#7516)) **Bug fixes** - Fixed `EuiHighlight` to not parse `search` strings as regexes ([#7496](elastic/eui#7496)) - Fixed `EuiSuperDatePicker` submit bug when used within `<form>` elements ([#7504](elastic/eui#7504)) - Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to items without expandable children ([#7513](elastic/eui#7513)) **CSS-in-JS conversions** - Converted `EuiTreeView` to Emotion. Updates as part of the conversion: ([#7513](elastic/eui#7513)) - Removed `.euiTreeView__wrapper` div node - Enforced consistent `icon` size based on `display` size
fkanout
pushed a commit
to fkanout/kibana
that referenced
this pull request
Mar 4, 2024
`v93.0.0` ⏩ `v93.1.1` --- ## [`v93.1.1`](https://github.com/elastic/eui/releases/v93.2.0) **This is a patch release primarily intended for use by Kibana.** - Added top-level `EuiTreeView.Item` export ([elastic#7526](elastic/eui#7526)) ## [`v93.1.0`](https://github.com/elastic/eui/releases/v93.1.0) - Added `index` glyph to `EuiIcon` ([elastic#7498](elastic/eui#7498)) - Updated `EuiHighlight` to accept an array of `search` strings, which allows highlighting multiple, separate words within its children. This new type and behavior *only* works if `highlightAll` is also set to true. ([elastic#7496](elastic/eui#7496)) - Updated `EuiContextMenu` with a new `panels.items.renderItem` property, which allows rendering completely custom items next to standard `EuiContextMenuItem` objects ([elastic#7510](elastic/eui#7510)) - `EuiSuperDatePicker` updates: - Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([elastic#7501](elastic/eui#7501)) - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([elastic#7501](elastic/eui#7501)) - Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours). ([elastic#7501](elastic/eui#7501)) - Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. ([elastic#7502](elastic/eui#7502)) - Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop, which accepts a minimum number in milliseconds ([elastic#7516](elastic/eui#7516)) - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `minInterval` prop, which accepts a minimum number in milliseconds ([elastic#7516](elastic/eui#7516)) **Bug fixes** - Fixed `EuiHighlight` to not parse `search` strings as regexes ([elastic#7496](elastic/eui#7496)) - Fixed `EuiSuperDatePicker` submit bug when used within `<form>` elements ([elastic#7504](elastic/eui#7504)) - Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to items without expandable children ([elastic#7513](elastic/eui#7513)) **CSS-in-JS conversions** - Converted `EuiTreeView` to Emotion. Updates as part of the conversion: ([elastic#7513](elastic/eui#7513)) - Removed `.euiTreeView__wrapper` div node - Enforced consistent `icon` size based on `display` size
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
closes #5798
This PR:
search: string | string[]logic, allowing multiple separate search values to be passedPlease note: the actual splitting of strings into an array from the user input needs to be managed by the consumer, and not by EUI. This gives consuming devs full flexibility for, e.g. the kind of delimiter to use, when and when not to highlight separate words, etc.
QA
Bugfix testing - regex escaping
Highlight allswitch(.)+Feature testing
Highlight allswitchSearch for an array of separate wordsswitchjumpedandoverare separate highlightsquick lazyGeneral checklist
- [ ] Checked in both light and dark modes- [ ] Checked in mobile@defaultif default values are missing) and playground toggles- [ ] Checked Code Sandbox works for any docs examplesand cypress tests- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)