feat: Add `optionMatcher` prop to `EuiSelectable` and `EuiComboBox` components #7709

tkajtoch · 2024-04-24T14:37:58Z

Summary

This PR resolves #2199 by allowing passing a custom matcher function to EuiComboBox and EuiSelectable using the new optional optionMatcher prop.

I kept the tests the same, just moved code around to extract the specific filtering logic while keeping component internals intact and not overridable (like isPreFiltered logic), so consumers don't have to reimplement them.

QA

The default option matcher should behave exactly as before the prop was introduced.

Compare option filtering of EuiComboBox on PR env and production and confirm there are no behavior changes
Compare option filtering of EuiSelectable on PR env and production and confirm there are no behavior changes
Confirm the Custom option matcher example uses startsWith matcher and only labels starting with search value are being matched

General checklist

Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
Code quality checklist
- Added or updated jest and cypress tests
Release checklist
- A changelog entry exists and is marked appropriately.

…ptions matcher functions

… options matcher functions

tkajtoch · 2024-04-24T14:53:34Z

src/components/combo_box/matching_options.ts

+ * Partial string equality option matcher for EuiComboBox.
+ * It matches all options with labels including the searched string.
+ */
+export const createPartialStringEqualityOptionMatcher = <


This is a factory function to keep TOption generic instead of defaulting to string/unknown or the underlying T type that defaults to string | number | string[] | undefined. The value property of type TObject is not used in this function so it doesn't really make a difference here

mbondyra

I tested it with wildcard matcher we use in Kibana and works great! Thank you!

mgadewoll · 2024-04-29T11:58:36Z

src/components/combo_box/combo_box.stories.tsx

@@ -98,3 +100,45 @@ export const Playground: Story = {
    );
  },
 };
+
+export const CustomMatcher: Story = {
+  render: function Render({ singleSelection, onCreateOption, ...args }) {


🗒️ A general note, mainly for myself here:
Whenever we align on the code-snippet API in this PR and merge it, this story needs to be updated as it's a case of "additional composition wrapper" (it will likely need the parameters.codeSnippet.resolveChildren: true as otherwise this story snippet would be <Render anyStoryArgsHere />

This is the case for many of our stories, though, isn't it?

Some for sure. There are different cases I've seen so far. It depends on what should be output per story.
E.g. for cases like stateful wrappers that return just the actual story component it's different than a wrapper that returns the story component as nested child with other composition elements.

For stateful wrappers or related wrappers (Where a parent-subcomponent structure is required and can be determined based on naming it's already done automatically)
For anything else it might need adjustments.
I'm currently checking the newly added stories and there are some new cases as well that I did not consider yet (render functions 🙈)

src/components/selectable/selectable_search/selectable_search.tsx

mgadewoll

🚢 🐈‍⬛ Working as expected and LGTM!

kibanamachine · 2024-04-29T14:30:40Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7709/
Storybook: https://eui.elastic.co/pr_7709/storybook

elasticmachine · 2024-04-29T14:54:26Z

💚 Build Succeeded

Buildkite Build
Commit: d718bf7

History

💚 Build #1823 succeeded 6cc9f8a
💚 Build #1822 succeeded 835bac3

cc @tkajtoch

`v94.1.0-backport.0` ⏩ `v94.2.1-backport.0` _[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)_ --- ## [`v94.2.1-backport.0`](https://github.com/elastic/eui/releases/v94.2.1-backport.0) **This is a backport release only intended for use by Kibana.** - Reverted the `EuiFlexGroup`/`EuiFlexItem` `component` prop feature due to Kibana typing issues ## [`v94.2.1`](https://github.com/elastic/eui/releases/v94.2.1) **Bug fixes** - Fixed an `EuiTabbedContent` edge case bug that occurred when updated with a completely different set of `tabs` ([#7713](elastic/eui#7713)) - Fixed the `@storybook/test` dependency to be listed in `devDependencies` and not `dependencies` ([#7719](elastic/eui#7719)) ## [`v94.2.0`](https://github.com/elastic/eui/releases/v94.2.0) - Updated `getDefaultEuiMarkdownPlugins()` to allow excluding the following plugins in addition to `tooltip`: ([#7676](elastic/eui#7676)) - `checkbox` - `linkValidator` - `lineBreaks` - `emoji` - Updated `EuiSelectable`'s `isPreFiltered` prop to allow passing a configuration object, which allows disabling search highlighting in addition to search filtering ([#7683](elastic/eui#7683)) - Updated `EuiFlexGroup` and `EuiFlexItem` prop types to support passing any valid React component type to the `component` prop and ensure proper type checking of the extra props forwarded to the `component`. ([#7688](elastic/eui#7688)) - Updated `EuiSearchBar` to allow the `@` special character in query string searches ([#7702](elastic/eui#7702)) - Added a new, optional `optionMatcher` prop to `EuiSelectable` and `EuiComboBox` allowing passing a custom option matcher function to these components and controlling option filtering for given search string ([#7709](elastic/eui#7709)) **Bug fixes** - Fixed an `EuiPageTemplate` bug where prop updates would not cascade down to child sections ([#7648](elastic/eui#7648)) - To cascade props down to the sidebar, `EuiPageTemplate` now explicitly requires using the `EuiPageTemplate.Sidebar` rather than `EuiPageSidebar` - Fixed `EuiFieldNumber`'s typing to accept an icon configuration shape ([#7666](elastic/eui#7666)) - Fixed `EuiFieldText` and `EuiFieldNumber` to render the correct paddings for icon shapes set to `side: 'right'` ([#7666](elastic/eui#7666)) - Fixed `EuiFieldText` and `EuiFieldNumber` to fully ignore `icon`/`prepend`/`append` when `controlOnly` is set to true ([#7666](elastic/eui#7666)) - Fixed `EuiColorPicker`'s input not setting the correct right padding for the number of icons displayed ([#7666](elastic/eui#7666)) - Visual fixes for `EuiRange`s with `showInput`: ([#7678](elastic/eui#7678)) - Longer `append`/`prepend` labels no longer cause a background bug - Inputs can no longer overwhelm the actual range in width - Fixed a visual text alignment regression in `EuiTableRowCell`s with the `row` header scope ([#7681](elastic/eui#7681)) - Fixed `toolTipProps` type on `EuiSuperUpdateButton` to use `Partial<EuiToolTipProps>` ([#7692](elastic/eui#7692)) - Fixes missing prop type for `popperProps` on `EuiDatePicker` ([#7694](elastic/eui#7694)) - Fixed a focus bug with `EuiDataGrid`s with `leadingControlColumns` when moving columns to the left/right ([#7701](elastic/eui#7701)) ([#7698](elastic/eui#7698)) - Fixed `EuiSuperDatePicker` to validate date string with respect of locale on `EuiAbsoluteTab`. ([#7705](elastic/eui#7705)) - Fixed a visual bug with `EuiSuperDatePicker`'s absolute tab on small mobile screens ([#7708](elastic/eui#7708)) - Fixed i18n of empty and loading state messages for the `FieldValueSelectionFilter` component ([#7718](elastic/eui#7718)) **Dependency updates** - Updated `@hello-pangea/dnd` to v16.6.0 ([#7599](elastic/eui#7599)) - Updated `remark-rehype` to v8.1.0 ([#7601](elastic/eui#7601)) **Accessibility** - Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes to have unique aria-labels per row ([#7672](elastic/eui#7672)) - Added `aria-valuetext` attributes to `EuiRange`s with tick labels for improved screen reader UX ([#7675](elastic/eui#7675)) - Updated `EuiAccordion` to keep focus on accordion trigger instead of moving to content on click/keypress ([#7696](elastic/eui#7696)) - Added `aria-disabled` attribute to `EuiHorizontalSteps` when status is "disabled" ([#7699](elastic/eui#7699)) --------- Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>

…omponents (elastic#7709)

tkajtoch added 4 commits April 23, 2024 14:36

feat(EuiComboBox): Add optionMatcher prop to allow passing custom o…

e28fcf9

…ptions matcher functions

feat(EuiSelectable): Add optionMatcher prop to allow passing custom…

e293461

… options matcher functions

test: fix failing tests

00729ae

style: fix matching_options.test.ts formatting

0f08ac1

tkajtoch self-assigned this Apr 24, 2024

chore: add changelog

835bac3

tkajtoch commented Apr 24, 2024

View reviewed changes

tkajtoch added 2 commits April 24, 2024 17:35

docs(EuiComboBox): add optionMatcher section and example

b0b9b19

docs(EuiSelectable): add optionMatcher section and example

6cc9f8a

tkajtoch marked this pull request as ready for review April 24, 2024 15:46

tkajtoch requested a review from a team as a code owner April 24, 2024 15:46

mbondyra approved these changes Apr 25, 2024

View reviewed changes

mbondyra mentioned this pull request Apr 25, 2024

[EuiComboBox] [EuiSelectable] allow for highlighting a custom fragment when using custom option matcher #7711

Open

mgadewoll reviewed Apr 29, 2024

View reviewed changes

fix(EuiSelectableSearchProps): fix optionMatcher jsdoc

d718bf7

mgadewoll approved these changes Apr 29, 2024

View reviewed changes

tkajtoch merged commit 1e83176 into elastic:main Apr 29, 2024
7 checks passed

tkajtoch mentioned this pull request Apr 29, 2024

[EuiComboBox] Custom matcher requested #2199

Closed

cee-chen mentioned this pull request Apr 29, 2024

Upgrade EUI to v94.2.1 elastic/kibana#182023

Merged

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request May 3, 2024

feat: Add optionMatcher prop to EuiSelectable and EuiComboBox c…

652c313

…omponents (elastic#7709)

mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request May 3, 2024

feat: Add optionMatcher prop to EuiSelectable and EuiComboBox c…

8c1b693

…omponents (elastic#7709)

tkajtoch mentioned this pull request May 7, 2024

Upgrade EUI to v94.3.0 elastic/kibana#182822

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add `optionMatcher` prop to `EuiSelectable` and `EuiComboBox` components #7709

feat: Add `optionMatcher` prop to `EuiSelectable` and `EuiComboBox` components #7709

tkajtoch commented Apr 24, 2024 •

edited by mgadewoll

Loading

tkajtoch Apr 24, 2024

mbondyra left a comment

mgadewoll Apr 29, 2024

tkajtoch Apr 29, 2024

mgadewoll Apr 29, 2024

mgadewoll left a comment

kibanamachine commented Apr 29, 2024

elasticmachine commented Apr 29, 2024

feat: Add optionMatcher prop to EuiSelectable and EuiComboBox components #7709

feat: Add optionMatcher prop to EuiSelectable and EuiComboBox components #7709

Conversation

tkajtoch commented Apr 24, 2024 • edited by mgadewoll Loading

Summary

QA

General checklist

tkajtoch Apr 24, 2024

Choose a reason for hiding this comment

mbondyra left a comment

Choose a reason for hiding this comment

mgadewoll Apr 29, 2024

Choose a reason for hiding this comment

tkajtoch Apr 29, 2024

Choose a reason for hiding this comment

mgadewoll Apr 29, 2024

Choose a reason for hiding this comment

mgadewoll left a comment

Choose a reason for hiding this comment

kibanamachine commented Apr 29, 2024

elasticmachine commented Apr 29, 2024

💚 Build Succeeded

History

feat: Add `optionMatcher` prop to `EuiSelectable` and `EuiComboBox` components #7709

feat: Add `optionMatcher` prop to `EuiSelectable` and `EuiComboBox` components #7709

tkajtoch commented Apr 24, 2024 •

edited by mgadewoll

Loading