Selection and navigation list UI enhancements#9515
Merged
Conversation
mgadewoll
force-pushed
the
feat/selectable-ui-enhancements
branch
from
40ad6f3 to
adfac33
Compare
mgadewoll
added
the
skip-changelog
Collaborator
💚 Build SucceededHistory
cc @mgadewoll |
mgadewoll
force-pushed
the
feat/selectable-ui-enhancements
branch
2 times, most recently
from
231d3f8 to
4248364
Compare
- update after merge without previous rebase
mgadewoll
force-pushed
the
feat/selectable-ui-enhancements
branch
from
5358fd2 to
86a2103
Compare
Contributor
Author
|
ℹ️ Rebase onto version |
mgadewoll
removed
the
skip-changelog
mgadewoll
added
skip-changelog-eui-theme-common
Contributor
There was a problem hiding this comment.
Pull request overview
This PR consolidates and aligns UI/UX + accessibility behavior across EUI selection & navigation list components (Selectable, ComboBox, ListGroup, ContextMenu, SuperSelect), introducing shared internal building blocks (notably EuiListItemLayout and EuiCheckboxControl) and updating docs/tests/snapshots accordingly.
Changes:
- Introduces
EuiCheckboxControl(presentational checkbox state) and expands usage across selectable/list UI. - Refactors multiple list-like components to use
EuiListItemLayoutfor consistent DOM structure, styling, and ARIA semantics. - Updates docs, Storybook stories, Cypress/Jest tests, snapshots, and theme token/changelog entries to match the new APIs and markup.
Reviewed changes
Copilot reviewed 135 out of 286 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/website/docs/components/templates/sitewide-search/index.mdx | Updates Sitewide search template docs example data (removes avatar usage). |
| packages/website/docs/components/forms/selection/super-select.mdx | Updates SuperSelect docs to remove props that were removed (hasDividers, itemLayoutAlign). |
| packages/website/docs/components/forms/selection/selectable.mdx | Updates Selectable docs examples to match updated defaults/props and sizing. |
| packages/website/docs/components/display/list-group.mdx | Updates ListGroup docs/examples for removed props and new behavior. |
| packages/website/docs/components/containers/modal/_patterns.mdx | Removes SuperSelect props that were removed from API. |
| packages/website/docs/components/containers/flyout/index.mdx | Removes SuperSelect props that were removed from API. |
| packages/eui/src/global_styling/mixins/_helpers.ts | Extends overflow shadow mixins to support animated scroll shadows with fallbacks. |
| packages/eui/src/components/table/table_pagination/snapshots/table_pagination.test.tsx.snap | Snapshot updates due to ContextMenu/ListItemLayout markup changes. |
| packages/eui/src/components/table/mobile/snapshots/table_sort_mobile_item.test.tsx.snap | Snapshot updates due to ContextMenu/ListItemLayout markup changes. |
| packages/eui/src/components/selectable/selectable.tsx | Updates prop JSDoc defaults for singleSelection. |
| packages/eui/src/components/selectable/selectable.stories.tsx | Enhances stories for QA/VRT coverage (groups, truncation, virtualization variants). |
| packages/eui/src/components/selectable/selectable.spec.tsx | Updates Cypress expectations to align with aria-activedescendant behavior. |
| packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.tsx | Adjusts Sitewide template list row height for updated layout. |
| packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide.styles.ts | Updates Sitewide template styles to match new list item layout/spacing. |
| packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide_popover.tsx | Adjusts popover padding to match updated design. |
| packages/eui/src/components/selectable/selectable_templates/selectable_template_sitewide_option.tsx | Updates formatted option props (CSS handling change). |
| packages/eui/src/components/selectable/selectable_templates/selectable_template_sidewide.stories.tsx | Adds a scrollable story variant and updates example option data. |
| packages/eui/src/components/selectable/selectable_templates/euiSelectableTemplateSitewide.tsx | Adds shared Sitewide template types/formatters/renderers. |
| packages/eui/src/components/selectable/selectable_templates/snapshots/selectable_template_sitewide.test.tsx.snap | Snapshot updates due to search compression + template markup updates. |
| packages/eui/src/components/selectable/selectable_templates/snapshots/selectable_template_sitewide_option.test.tsx.snap | Snapshot updates due to option formatting changes. |
| packages/eui/src/components/selectable/selectable_search/selectable_search.tsx | Changes default compressed to true and forwards it to EuiFieldSearch. |
| packages/eui/src/components/selectable/selectable_search/selectable_search.stories.tsx | Updates story defaults for new compressed default behavior. |
| packages/eui/src/components/selectable/selectable_search/snapshots/selectable_search.test.tsx.snap | Snapshot updates due to compressed default styling changes. |
| packages/eui/src/components/selectable/selectable_list/utils/get_list_item_size.ts | Adds a utility for variable list item sizing (virtualized lists). |
| packages/eui/src/components/selectable/selectable_list/selectable_list.test.tsx | Removes paddingSize tests and updates selectors for new layout classes. |
| packages/eui/src/components/selectable/selectable_list/selectable_list.styles.ts | Adds list container padding support and enables animated overflow shadows; refactors group label styles. |
| packages/eui/src/components/selectable/selectable_list/selectable_list_item.test.tsx | Updates tests for selection indicator rendering and removes paddingSize cases. |
| packages/eui/src/components/selectable/selectable_list/selectable_list_item.styles.ts | Removes legacy selectable list item styles (now replaced by ListItemLayout). |
| packages/eui/src/components/selectable/selectable_list/selectable_list_item.stories.tsx | Updates stories to better demonstrate single vs multi selection and truncation/wrap behaviors. |
| packages/eui/src/components/search_bar/filters/field_value_selection_filter.tsx | Adds list padding to match new selectable list styling. |
| packages/eui/src/components/search_bar/filters/field_value_selection_filter.spec.tsx | Updates ARIA assertions to align with selected vs checked semantics and activedescendant. |
| packages/eui/src/components/list_item_layout/index.ts | Adds index exports for internal shared EuiListItemLayout. |
| packages/eui/src/components/list_item_layout/snapshots/_list_item_layout.test.tsx.snap | Adds snapshots for ListItemLayout render variants. |
| packages/eui/src/components/list_group/pinnable_list_group/pinnable_list_group.stories.tsx | Updates story controls to remove deleted ListGroup props. |
| packages/eui/src/components/list_group/list_group.tsx | Removes flush, gutterSize, and size props; defaults color internally. |
| packages/eui/src/components/list_group/list_group.test.tsx | Removes tests for deleted props. |
| packages/eui/src/components/list_group/list_group.styles.ts | Removes styles tied to deleted ListGroup props. |
| packages/eui/src/components/list_group/list_group.stories.tsx | Updates story defaults and adds a VRT “kitchen sink” coverage story. |
| packages/eui/src/components/list_group/list_group_item.test.tsx | Updates tooltip anchor testing, removes size tests, and adds hasAriaDisabled coverage. |
| packages/eui/src/components/list_group/list_group_item.styles.ts | Refactors ListGroupItem styles to align with ListItemLayout approach. |
| packages/eui/src/components/list_group/list_group_item.stories.tsx | Expands stories (tooltip/extraAction/external link/truncation) and documents hasAriaDisabled. |
| packages/eui/src/components/list_group/list_group_item_extra_action.styles.ts | Adjusts hover/focus reveal logic for the extra action button. |
| packages/eui/src/components/link/external_link_icon.tsx | Allows configuring icon size (defaults to s). |
| packages/eui/src/components/key_pad_menu/snapshots/key_pad_menu_item.test.tsx.snap | Snapshot updates due to CheckboxControl markup changes. |
| packages/eui/src/components/header/header.stories.tsx | Removes ListGroupItem size prop usage. |
| packages/eui/src/components/form/super_select/super_select.styles.ts | Moves listbox padding + focus adjustments into styles; removes divider styling. |
| packages/eui/src/components/form/super_select/super_select.stories.tsx | Refactors stories and adds VRT open-state coverage. |
| packages/eui/src/components/form/super_select/super_select_item.tsx | Refactors SuperSelect items to use EuiListItemLayout and forwardRef. |
| packages/eui/src/components/form/super_select/snapshots/super_select.test.tsx.snap | Snapshot updates due to ListItemLayout + ARIA activedescendant changes. |
| packages/eui/src/components/form/radio/radio.styles.ts | Applies shared focus-visible control styles to radio circle. |
| packages/eui/src/components/form/form.styles.ts | Refactors custom control focus-visible styles into a reusable fragment. |
| packages/eui/src/components/form/form.styles.test.tsx | Updates expected output for refactored focus-visible style fragment. |
| packages/eui/src/components/form/checkbox/index.ts | Exports new EuiCheckboxControl from checkbox package entrypoint. |
| packages/eui/src/components/form/checkbox/checkbox.tsx | Updates EuiCheckbox to render EuiCheckboxControl instead of direct icon logic. |
| packages/eui/src/components/form/checkbox/checkbox.styles.ts | Refactors checkbox square styles for new CheckboxControl structure + focus-visible. |
| packages/eui/src/components/form/checkbox/checkbox.stories.tsx | Adds readOnly to story args. |
| packages/eui/src/components/form/checkbox/checkbox_control.tsx | Adds new presentational-only EuiCheckboxControl component. |
| packages/eui/src/components/form/checkbox/checkbox_control.test.tsx | Adds tests for CheckboxControl variants. |
| packages/eui/src/components/form/checkbox/checkbox_control.styles.ts | Adds styling for CheckboxControl states (selected/excluded/disabled). |
| packages/eui/src/components/form/checkbox/checkbox_control.stories.tsx | Adds Storybook/VRT coverage for CheckboxControl variants and modes. |
| packages/eui/src/components/form/checkbox/snapshots/checkbox.test.tsx.snap | Snapshot updates due to CheckboxControl markup changes. |
| packages/eui/src/components/form/checkbox/snapshots/checkbox_control.test.tsx.snap | Adds CheckboxControl snapshot output. |
| packages/eui/src/components/flyout/manager/layout_mode.test.tsx | Updates mocks for theme/style HOCs used by flyout manager tests. |
| packages/eui/src/components/flyout/flyout_menu.tsx | Updates ListGroup usage to match removed props. |
| packages/eui/src/components/filter_group/filter_group.a11y.tsx | Updates a11y test to resolve the active option via aria-activedescendant. |
| packages/eui/src/components/datagrid/body/header/draggable_columns.spec.tsx | Updates selector expectations due to ListGroup markup changes. |
| packages/eui/src/components/datagrid/body/header/column_actions.tsx | Adjusts popover padding and removes removed ListGroup props. |
| packages/eui/src/components/context_menu/index.ts | Exports new EuiContextMenuPanelTitle. |
| packages/eui/src/components/context_menu/context_menu.tsx | Adds scrollable panel height support, roles, separators, and aria-haspopup improvements. |
| packages/eui/src/components/context_menu/context_menu.test.tsx | Updates tests for removed size prop and changed item rendering. |
| packages/eui/src/components/context_menu/context_menu.styles.ts | Adds fixed-height scrolling behavior and animated overflow shadows for menus. |
| packages/eui/src/components/context_menu/context_menu.stories.tsx | Updates stories for new panel title + adds scrollable list story. |
| packages/eui/src/components/context_menu/context_menu_panel.tsx | Refactors panel title rendering + sets menu roles/labeling on list wrapper. |
| packages/eui/src/components/context_menu/context_menu_panel.test.tsx | Removes size tests and updates snapshots. |
| packages/eui/src/components/context_menu/context_menu_panel.styles.ts | Updates panel padding/title styles to align with new design. |
| packages/eui/src/components/context_menu/context_menu_panel.stories.tsx | Removes size args from story defaults. |
| packages/eui/src/components/context_menu/context_menu_panel.spec.tsx | Updates Cypress tests for new title button behavior and popover button content. |
| packages/eui/src/components/context_menu/context_menu_panel_title.tsx | Adds a dedicated panel title component with an icon-button back/close control. |
| packages/eui/src/components/context_menu/context_menu_panel_title.styles.tsx | Adds styles for the new panel title component. |
| packages/eui/src/components/context_menu/context_menu_item.test.tsx | Removes size tests to match removed API. |
| packages/eui/src/components/context_menu/context_menu_item.styles.ts | Refactors alignment styling to work with ListItemLayout structure. |
| packages/eui/src/components/context_menu/context_menu_item.stories.tsx | Adds external link story and layoutAlign VRT coverage; removes size controls. |
| packages/eui/src/components/context_menu/snapshots/context_menu_panel.test.tsx.snap | Snapshot updates for new panel title + list wrapper roles/attrs. |
| packages/eui/src/components/combo_box/combo_box.test.tsx | Updates tooltip anchor targeting and adds onFocusBadge test coverage. |
| packages/eui/src/components/combo_box/combo_box.stories.tsx | Adds onFocusBadge default and new truncation stories. |
| packages/eui/src/components/combo_box/combo_box.spec.tsx | Updates Cypress tests for new option markup and truncation outputs. |
| packages/eui/src/components/combo_box/combo_box.a11y.tsx | Updates a11y tests for new option selectors and stable aria-activedescendant IDs. |
| packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts | Enables animated overflow shadows and removes legacy title styling. |
| packages/eui/src/components/color_picker/color_palette_picker/color_palette_picker.tsx | Removes removed SuperSelect hasDividers prop usage. |
| packages/eui/src/components/collapsible_nav/collapsible_nav.stories.tsx | Removes removed ListGroup props in nav examples. |
| packages/eui/src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.tsx | Updates close-on-click logic and removes removed ListGroup props. |
| packages/eui/src/components/collapsible_nav_beta/_kibana_solution/snapshots/collapsible_nav_kibana_solution.test.tsx.snap | Snapshot updates due to ListGroup/ListItemLayout markup changes. |
| packages/eui/src/components/card/checkable_card/snapshots/checkable_card.test.tsx.snap | Snapshot updates due to CheckboxControl markup changes. |
| packages/eui/src/components/basic_table/snapshots/in_memory_table.test.tsx.snap | Snapshot updates due to CheckboxControl markup changes. |
| packages/eui/src/components/basic_table/snapshots/basic_table.test.tsx.snap | Snapshot updates due to CheckboxControl markup changes. |
| packages/eui/changelogs/upcoming/9606.md | Changelog entry for ContextMenuItem external icon support. |
| packages/eui/changelogs/upcoming/9603.md | Changelog entry for SuperSelect UI/a11y updates and breaking changes. |
| packages/eui/changelogs/upcoming/9600.md | Changelog entry for ContextMenu UI/a11y changes and breaking changes. |
| packages/eui/changelogs/upcoming/9579.md | Changelog entry for ListGroup UI updates and breaking changes. |
| packages/eui/changelogs/upcoming/9538.md | Changelog entry for ComboBox listbox updates and new onFocusBadge. |
| packages/eui/changelogs/upcoming/9532.md | Changelog entry for SelectableListItem/ListItemLayout adoption. |
| packages/eui/changelogs/upcoming/9515.md | Changelog entry for external icon prop + DataGrid popover padding. |
| packages/eui/changelogs/upcoming/9411.md | Changelog entry for Selectable UI enhancements and breaking changes. |
| packages/eui/changelogs/upcoming/9401.md | Changelog entry for new CheckboxControl and Checkbox refactor. |
| packages/eui-theme-common/src/global_styling/variables/components.ts | Removes deprecated ListGroupItem component token types. |
| packages/eui-theme-common/changelogs/upcoming/9579.md | Theme-common changelog entry for removed tokens. |
| packages/eui-theme-borealis/src/variables/_components.ts | Removes Borealis theme component token definitions for ListGroupItem. |
| packages/eui-theme-borealis/changelogs/upcoming/9579.md | Borealis changelog entry for removed tokens. |
| packages/docusaurus-theme/src/components/version_switcher/index.tsx | Updates VersionSwitcher to match removed ListGroupItem size prop. |
| packages/docusaurus-theme/changelogs/upcoming/9579.md | Docusaurus theme changelog for the VersionSwitcher update. |
Comments suppressed due to low confidence (1)
packages/website/docs/components/display/list-group.mdx:45
- The interactive example uses
flush={flushWidth}, butflushWidthis no longer defined (andflushis no longer a supportedEuiListGroupprop). This code block will fail to compile/run; remove theflushusage and any leftover references.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
acstll
requested changes
May 6, 2026
Contributor
acstll
left a comment
acstll
left a comment
There was a problem hiding this comment.
Only 1 nit and 2 minor things spotted, everything else seems ready to go!
I checked docs for touched components (also against main), all VRTs, and code in new commits. Also did a brief smoke test for EuiContextMenu in Windows/NVDA, and another quick smoke test for EuiDataGrid's column actions popover (padding). Thanks for the all the details in the PR description 👌
- this previously wasn't noticed because the popover had no padding, hence it wasn't visible without content
acstll
approved these changes
May 7, 2026
Contributor
acstll
left a comment
acstll
left a comment
There was a problem hiding this comment.
🟢 Thanks @mgadewoll for addressing the feedback! 🚢
…inking - this removes additional state updates and re-renders
mgadewoll
commented
May 8, 2026
| id={closeButtonId} | ||
| aria-label={buttonAriaLabel} | ||
| // Uses aria-labelledby to combine aria-label with the panel title for screen readers. | ||
| aria-labelledby={`${closeButtonId} ${id}`} |
Contributor
Author
There was a problem hiding this comment.
ℹ️ Refactored this previous update to not use useInnerText but instead rely on native aria-labelledby linking which prevents additional state updates/re-renders.
This was tested in JAWS/Chrome, NVDA/Chrome and VoiceOver/Safari and works as expected and will read both labels.
Screen.Recording.2026-05-08.at.13.41.57.mov
Collaborator
💚 Build SucceededHistory
cc @mgadewoll |
Collaborator
💚 Build Succeeded
History
cc @mgadewoll |
This file contains hidden or 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
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.
Important
This PR merges combined changes for https://github.com/elastic/platform-ux-team/issues/1050.
Summary
This PR merges all work done to update and align selection list components:
Additionally it adds 2 new components:
Included PRs
Tip
Open the individual PRs to see a detailed overview of specific changes.
EuiCheckboxControlcomponent #9401hasAriaDisabled#9584externalprop to render external icon for links #9606Additional tasks
closes #9519
Additional changes in this PR:
EuiListItemLayout: ensureextraActionhas correct color - 93a1946EuiListItemLayout: prevent wrapper from shrinking in a flex layout - 6dad06dEuiDataGrid: adjust column action popover padding - ee9c3a0EuiContextMenuPanel: prevent linking non rendered title - 9d4868cEuiContextMenuPanelTitle: ensure string text foraria-label- 3838324EuiComboBox: Fix empty popover showing whennoSuggestions=true- f7b1fe6API Changes
EuiCheckboxControl
checkedbooleanfalseindeterminatebooleanfalseexcludedbooleanfalsedisabledbooleanfalseEuiSelectable
EuiSelectableListpaddingSize"none". Applies a padding to the list container instead of previously passing down the prop toEuiSelectableListItemEuiSelectableListItempaddingSizeEuiComboBox
EuiComboBoxOptionsListonFocusBadgeEnterkey should be pressed for selection.EuiListGroup
EuiListGroup,EuilistGroupItemsizeEuiListGroupgutterSizeEuiListGroupflushsizeis removed. (🔴 Breaking change)EuiContextMenu
EuiContextMenu,EuiContextMenuPanelheightEuiContextMenu,EuiContextMenuPanel,EuiContextMenuItemsizeEuiContextMenuItemlayoutAlignEuiContextMenuItemexternalEuiSuperSelect
EuiSuperSelect,EuiSuperSelectItemhasDividersEuiSuperSelectitemLayoutAlignScreenshots
Impact Assessment
Impact level: 🔴 High
All required changes on consumer side have been prepared ahead of time (Kibana PR)
Note
This PR is not marked as breaking as the individual included PRs are marked accordingly. Any additional changes added in this PR are not breaking.
Release Readiness
Migration guide: {steps or link, for breaking/visual changes or deprecations}Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}QA instructions for reviewer
Important
All major component changes have already been reviewed in the above linked separate PRs.
Additional changes added in this PR to review:
EuiListItemLayout: ensureextraActionhas correct color - 93a1946EuiListItemLayout: prevent wrapper from shrinking in a flex layout - 6dad06dEuiDataGrid: adjust column action popover padding - ee9c3a0EuiContextMenuPanel: prevent linking non rendered title - 9d4868cEuiContextMenuPanelTitle: ensure string text foraria-label- 3838324Checklist before marking Ready for Review
breaking changelabel (if applicable)Reviewer checklist