[docs] Add example of `EuiSelectable` in an `EuiInputPopover` #7683

cee-chen · 2024-04-13T19:58:03Z

Summary

We've had several very recent requests from Elastic devs for what's essentially a combobox that needs variable height options (i.e., virtualization set to false). SInce EuiComboBox doesn't yet offer that ability and EuiSelectable does, in the interim I'd like to at least offer devs an MVP they can use with EuiSelectable that is fully accessible and has the features needed (searching, selection, and custom rendering).

Credit to @tkajtoch for the original basis of this example - isPreFiltered was a genius idea!

Note that the intention of this demo is not to provide a 1:1 equivalent to EuiComboBox, and more work will need to be done on EUI internals to get EuiComboBox dogfooding EuiSelectable (#2841).

QA

https://eui.elastic.co/pr_7683/#/forms/selectable#sizing-and-containers

General checklist

Browser QA
~~- [ ] Checked in both light and dark modes~~
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
Code quality checklist - N/A, docs only
Release checklist - N/A, docs only
Designer checklist - N/A, docs only

NOTE: This is not meant to be a 1:1 equivalent to EuiComboBox

…le select example

cee-chen · 2024-04-13T20:08:21Z

src-docs/src/views/selectable/selectable_sizing.tsx

+      }}
+      isPreFiltered={!isSearching} // Shows the full list when not actively typing to search
+      listProps={{
+        css: { '.euiSelectableList__list': { maxBlockSize: 200 } },


Although the requests we've received have had it, I didn't add isVirtualization: false or group labels/custom rendered descriptions to this example because I wanted to keep it simple and focused on the input popover. If needed we can extend this example via CodeSandbox.

src-docs/src/views/selectable/selectable_sizing.tsx

…r readability

…well as search filtering

- blur event was firing before the click event on the options - reverse was true for Firefox

src/components/selectable/selectable.tsx

src/components/selectable/selectable_list/selectable_list.tsx

src-docs/src/views/selectable/selectable_sizing.tsx

kibanamachine · 2024-04-16T15:24:40Z

Preview staging links for this PR:

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

elasticmachine · 2024-04-16T15:24:44Z

💚 Build Succeeded

Buildkite Build
Commit: eefdc7e

History

💚 Build #1760 succeeded b400a4d
💔 Build #1759 failed fa7133a
💚 Build #1757 succeeded 3c9c510
💚 Build #1755 succeeded 2476f38
💚 Build #1754 succeeded a9a83b2

mgadewoll

🚢 🐈‍⬛ Thanks for the updates. Looking good to me!

cee-chen · 2024-04-16T15:33:29Z

Thanks Lene! It's not perfect but it's a decent start, and it was super helpful for me to figure out what changes I will and won't need to make once I start converting EuiComboBox for #2841.

`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 <[email protected]>

Add an accessible example of EuiSelectable & EuiInputPopover

84add4b

NOTE: This is not meant to be a 1:1 equivalent to EuiComboBox

cee-chen added documentation Issues or PRs that only affect documentation - will not need changelog entries skip-changelog labels Apr 13, 2024

Switch initial checked to only one option to account for the new sing…

d751965

…le select example

cee-chen force-pushed the selectable/input-popover branch from 2559306 to a9a83b2 Compare April 13, 2024 20:04

cee-chen marked this pull request as ready for review April 13, 2024 20:07

cee-chen requested a review from a team as a code owner April 13, 2024 20:07

cee-chen requested a review from tkajtoch April 13, 2024 20:07

cee-chen commented Apr 13, 2024

View reviewed changes

mgadewoll reviewed Apr 15, 2024

View reviewed changes

src-docs/src/views/selectable/selectable_sizing.tsx Outdated Show resolved Hide resolved

src-docs/src/views/selectable/selectable_sizing.tsx Show resolved Hide resolved

Split out popover and flyout examples into their own subcomponents fo…

2476f38

…r readability

cee-chen force-pushed the selectable/input-popover branch from a9a83b2 to 2476f38 Compare April 15, 2024 16:01

Fix UX bugs via internal prop override 😬

103a3dd

This comment was marked as outdated.

Sign in to view

cee-chen marked this pull request as draft April 15, 2024 21:44

cee-chen added 2 commits April 15, 2024 15:42

Extend isPreFiltered API to allow disabling search highlighting as …

51f951a

…well as search filtering

[wtf] Fix Chromium onBlur shenanigans

b400a4d

- blur event was firing before the click event on the options - reverse was true for Firefox

cee-chen force-pushed the selectable/input-popover branch 3 times, most recently from fa7133a to b400a4d Compare April 16, 2024 01:28

cee-chen marked this pull request as ready for review April 16, 2024 01:57

mgadewoll reviewed Apr 16, 2024

View reviewed changes

src/components/selectable/selectable.tsx Outdated Show resolved Hide resolved

src/components/selectable/selectable_list/selectable_list.tsx Show resolved Hide resolved

src-docs/src/views/selectable/selectable_sizing.tsx Show resolved Hide resolved

[PR feedback] typing

eefdc7e

mgadewoll approved these changes Apr 16, 2024

View reviewed changes

cee-chen merged commit 26af247 into elastic:main Apr 16, 2024
7 checks passed

cee-chen deleted the selectable/input-popover branch April 16, 2024 15:33

cee-chen mentioned this pull request Apr 29, 2024

Upgrade EUI to v94.2.1 elastic/kibana#182023

Merged

cee-chen mentioned this pull request Dec 13, 2024

[EuiComboBox] Rebuild with EuiSelectable #2841

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Add example of `EuiSelectable` in an `EuiInputPopover` #7683

[docs] Add example of `EuiSelectable` in an `EuiInputPopover` #7683

cee-chen commented Apr 13, 2024 •

edited

Loading

cee-chen Apr 13, 2024 •

edited

Loading

This comment was marked as outdated.

kibanamachine commented Apr 16, 2024

elasticmachine commented Apr 16, 2024

mgadewoll left a comment

cee-chen commented Apr 16, 2024

[docs] Add example of EuiSelectable in an EuiInputPopover #7683

[docs] Add example of EuiSelectable in an EuiInputPopover #7683

Conversation

cee-chen commented Apr 13, 2024 • edited Loading

Summary

QA

General checklist

cee-chen Apr 13, 2024 • edited Loading

Choose a reason for hiding this comment

This comment was marked as outdated.

kibanamachine commented Apr 16, 2024

elasticmachine commented Apr 16, 2024

💚 Build Succeeded

History

mgadewoll left a comment

Choose a reason for hiding this comment

cee-chen commented Apr 16, 2024

[docs] Add example of `EuiSelectable` in an `EuiInputPopover` #7683

[docs] Add example of `EuiSelectable` in an `EuiInputPopover` #7683

cee-chen commented Apr 13, 2024 •

edited

Loading

cee-chen Apr 13, 2024 •

edited

Loading