[EuiSearchBar] Allow disabling selection auto sort in field_value_selection filters
#7958
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
|
👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually? |
|
Hey @tgalfin, thanks so much for the PR! Just wanted to give you a heads up that our team is currently wrapping up several large projects this week, but I'm planning on taking a look at this PR and getting it shipped after that. Thanks for your patience! |
- move to a `describe` block with config key + move closer to `autoClose` - remove unnecessary `...requiredProps`, reuse `staticOptions` const - clean up assertions slightly
- Tweak props table order - Minor wordsmithing
+ fix filters stories file name
|
@tgalfin Amazing job on this, your changes are delightfully elegant! I've made some nitty copy/test tweaks and will go ahead and merge this once CI is done running and I've done a final QA pass on the built docs/storybook. |
- instead of `all/shown`, use `unsorted` and `sorted` to reflect new prop usage
- appears to have been used before EuiSearchBar dogfooded EuiSelectable
- store the count of activeItems instead of a full array, since we only care about the length - use getters and modern nullish syntax for configs with defaults
cee-chen
changed the title
field_value_selection filters
- remove separate async `resolveOptionsLoader` fn - for some reason this separate method causes the EuiSelectableList to remount completely, no idea why :T + add missing clearTimeout for scheduled cache wipe, which could potentially cause stale errors after unmount + add missing test case for `cache` config
cee-chen
changed the title
field_value_selection filtersfield_value_selection filters
…checked + retain selected/active index highlight (better UX than before, where focus/active index was lost) + simplify stateful test components and update autosort tests to be simpler and check for active attributes
|
I ended up going down a bit of a rabbit hole with this file - there was a ton of 5-7 year old code in it that needed updating and cleaning up (not to mention tests 🫠). Let me know if you have any questions that aren't covered by the individual git commit messages. One fun perf bonus that I was chasing because the scrolling UX was bugging me a bit - EuiSelectable's list of options/filters no longer flashes due to fully unmounting + remounting 🎉 |
|
buildkite test this |
cee-chen
approved these changes
Aug 30, 2024
💚 Build Succeeded
History
|
jbudz
pushed a commit
to elastic/kibana
that referenced
this pull request
Sep 10, 2024
`v95.9.0`⏩`v95.10.1` > [!note] > **EuiDataGrid**'s header cells have received a major UX change in order to support interactive children within header content. Column header actions now must be hovered and then clicked directly, or opened with the Enter key, as opposed to being able to click the entire header cell to see the actions popover. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.10.0`](https://github.com/elastic/eui/releases/v95.10.0) - Updated `EuiDataGrid` to support interactive header cell content ([#7898](elastic/eui#7898)) - Updated `EuiSearchBar`'s `field_value_selection` filter type with a new `autoSortOptions` config, allowing consumers to configure whether or not selected options are automatically sorted to the top of the filter list ([#7958](elastic/eui#7958)) - Updated `getDefaultEuiMarkdownPlugins` to support the following new default plugin configurations: ([#7985](elastic/eui#7985)) - `parsingConfig.linkValidator`, which allows configuring `allowRelative` and `allowProtocols` - `parsingConfig.emoji`, which allows configuring emoticon parsing - `processingConfig.linkProps`, which allows configuring rendered links with any props that `EuiLink` accepts - See our **Markdown plugins** documentation for example `EuiMarkdownFormat` and `EuiMarkdownEditor` usage - Updated `EuiDatePicker` to support `append` and `prepend` nodes in its form control layout ([#7987](elastic/eui#7987)) **Bug fixes** - Fixed border rendering bug with inline `EuiDatePicker`s with `shadow={false}` ([#7987](elastic/eui#7987)) - Fixed `EuiSuperSelect`'s placeholder text color to match other form controls ([#7995](elastic/eui#7995)) **Accessibility** - Improved the keyboard navigation and screen reader output for `EuiDataGrid` header cells ([#7898](elastic/eui#7898)) ## [`v95.10.1`](https://github.com/elastic/eui/releases/v95.10.1) **Bug fixes** - Fixed a visual bug in compact density `EuiDataGrid`s, where the header cell height would increase when the actions button became visible ([#7999](elastic/eui#7999)) --------- Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
gergoabraham
pushed a commit
to gergoabraham/kibana
that referenced
this pull request
Sep 13, 2024
`v95.9.0`⏩`v95.10.1` > [!note] > **EuiDataGrid**'s header cells have received a major UX change in order to support interactive children within header content. Column header actions now must be hovered and then clicked directly, or opened with the Enter key, as opposed to being able to click the entire header cell to see the actions popover. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.10.0`](https://github.com/elastic/eui/releases/v95.10.0) - Updated `EuiDataGrid` to support interactive header cell content ([elastic#7898](elastic/eui#7898)) - Updated `EuiSearchBar`'s `field_value_selection` filter type with a new `autoSortOptions` config, allowing consumers to configure whether or not selected options are automatically sorted to the top of the filter list ([elastic#7958](elastic/eui#7958)) - Updated `getDefaultEuiMarkdownPlugins` to support the following new default plugin configurations: ([elastic#7985](elastic/eui#7985)) - `parsingConfig.linkValidator`, which allows configuring `allowRelative` and `allowProtocols` - `parsingConfig.emoji`, which allows configuring emoticon parsing - `processingConfig.linkProps`, which allows configuring rendered links with any props that `EuiLink` accepts - See our **Markdown plugins** documentation for example `EuiMarkdownFormat` and `EuiMarkdownEditor` usage - Updated `EuiDatePicker` to support `append` and `prepend` nodes in its form control layout ([elastic#7987](elastic/eui#7987)) **Bug fixes** - Fixed border rendering bug with inline `EuiDatePicker`s with `shadow={false}` ([elastic#7987](elastic/eui#7987)) - Fixed `EuiSuperSelect`'s placeholder text color to match other form controls ([elastic#7995](elastic/eui#7995)) **Accessibility** - Improved the keyboard navigation and screen reader output for `EuiDataGrid` header cells ([elastic#7898](elastic/eui#7898)) ## [`v95.10.1`](https://github.com/elastic/eui/releases/v95.10.1) **Bug fixes** - Fixed a visual bug in compact density `EuiDataGrid`s, where the header cell height would increase when the actions button became visible ([elastic#7999](elastic/eui#7999)) --------- Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
markov00
pushed a commit
to markov00/kibana
that referenced
this pull request
Sep 18, 2024
`v95.9.0`⏩`v95.10.1` > [!note] > **EuiDataGrid**'s header cells have received a major UX change in order to support interactive children within header content. Column header actions now must be hovered and then clicked directly, or opened with the Enter key, as opposed to being able to click the entire header cell to see the actions popover. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.10.0`](https://github.com/elastic/eui/releases/v95.10.0) - Updated `EuiDataGrid` to support interactive header cell content ([elastic#7898](elastic/eui#7898)) - Updated `EuiSearchBar`'s `field_value_selection` filter type with a new `autoSortOptions` config, allowing consumers to configure whether or not selected options are automatically sorted to the top of the filter list ([elastic#7958](elastic/eui#7958)) - Updated `getDefaultEuiMarkdownPlugins` to support the following new default plugin configurations: ([elastic#7985](elastic/eui#7985)) - `parsingConfig.linkValidator`, which allows configuring `allowRelative` and `allowProtocols` - `parsingConfig.emoji`, which allows configuring emoticon parsing - `processingConfig.linkProps`, which allows configuring rendered links with any props that `EuiLink` accepts - See our **Markdown plugins** documentation for example `EuiMarkdownFormat` and `EuiMarkdownEditor` usage - Updated `EuiDatePicker` to support `append` and `prepend` nodes in its form control layout ([elastic#7987](elastic/eui#7987)) **Bug fixes** - Fixed border rendering bug with inline `EuiDatePicker`s with `shadow={false}` ([elastic#7987](elastic/eui#7987)) - Fixed `EuiSuperSelect`'s placeholder text color to match other form controls ([elastic#7995](elastic/eui#7995)) **Accessibility** - Improved the keyboard navigation and screen reader output for `EuiDataGrid` header cells ([elastic#7898](elastic/eui#7898)) ## [`v95.10.1`](https://github.com/elastic/eui/releases/v95.10.1) **Bug fixes** - Fixed a visual bug in compact density `EuiDataGrid`s, where the header cell height would increase when the actions button became visible ([elastic#7999](elastic/eui#7999)) --------- Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>
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 #7955
This PR adds a config option to disable auto sort behavior for field value selection filters for EuiSearchBar. In small lists it can be quite annoying to have options jumping around, so it's useful to have a way to disable this. The default behavior is unchanged (selected items will sort to the top of the list). If the optional prop is set to
false, items will remain in their original order when selected. I modified the cypress test to include a test case for this. This can also be manually tested from the docs site by addingautoSortOptions: falseto one of the field value toggles.No options selected
Default behavior
Behavior when
autoSortOptionsis set to falseI tried to fill out the checklist, but there were a few items I wasn't sure about so I left them blank.
QA
Tag (custom filter)and then click any option towards the bottom of the list, e.g.legalGeneral checklist
- [ ] Checked in both light and dark modes- [ ] Checked in mobile- [ ] Checked for accessibility including keyboard-only and screenreader modes@defaultif default values are missing) and playground toggles- [ ] Checked Code Sandbox works for any docs examplesjest andcypress tests- [ ] Updated visual regression tests- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)