Summary

This PR updates EuiSelectable (mainly through it's subcomponents EuiSelectableList and EuiSelectableListItem) by introducing design changes and smaller internal composition refactors.

Changes

• Updated EuiSelectableList and EuiSelectableListItem styles (Figma, updated spacing)
  • Updated item padding
  • Updated item selection/hover states
  • Removed item borders
  • Ensures 32px item height
  • Removed list item spacing
  • Removed onFocusBadge by default
  • Updated group dividers (between groups instead of on the group label)
  • ℹ️ a decision was mode to not include a 8px padding on the EuiSelectable component itself (as shown in the figma file) but instead rely on implementation containers. This is less strict and requires enforcement through guidance but it results in an easier API because EuiSelectableSearch and EuiSelectableList are passed to the implementation as render prop arguments which can be placed in any kind of composition (code).
• Updated EuiSelectableListItem to use EuiCheckboxControl for singleSelection=false (= multi selection)
• Updated EuiSelectableList to use VariableSizeList instead of FixedSizeList from react-window
  • ℹ️ This allows to define different heights for the group labels to support a separator with spacing
• Updated EuiSelectableList overflow scroll styles to use animation-timeline
  • ℹ️ This allows us to hide the overflow "soft edge" on unscrolled/fully-scrolled states (first/last items have sharp edges instead of blurred ones)
• Updated EuiSelectableSearch's compressed default value to true
• Removed paddingSize prop from EuiSelectableList and EuiSelectableListItem (🔴 breaking change)
  • ℹ️ design always expects the predefined padding and the intention by removing the prop is to be more strict

Why are we making this change?

💅 UI modernization and consistency: This update is part of the larger initiative to unify selection list designs (https://github.com/elastic/platform-ux-team/issues/1050).

Screenshots #

description	before	after
single selection
multi selection
groups

• EuiSelectableListItem checked` states

state	image
checked={undefined}
checked="on"
checked="off"
checked="mixed"

• EuiSelectableListItem with custom content

Impact to users

🔴 Breaking change: This PR removes paddingSize from EuiSelectableList and EuiSelectableListItem.

// With paddingSize: 'none' (2 usages)

Fleet Platform Selector
x-pack/platform/plugins/shared/fleet/public/components/platform_selector.tsx:
   listProps={{ paddingSize: 'none', onFocusBadge: false }}
   
Alert Message Variables Selector
src/platform/packages/shared/kbn-alerts-ui-shared/src/add_message_variables/index.tsx:
   listProps={{     rowHeight: 70,     showIcons: false,     paddingSize: 'none',     textWrap: 'wrap',   }}
   
   
// With paddingSize: 's' (8 usages)

Browse Integrations - Search and Filters Bar
x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/browse_integrations/components/search_and_filters_bar.tsx

Integration Status Filter
x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/status_filter.tsx

Agent Logs - Dataset Filter
x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_dataset.tsx

Agent Logs - Log Level Filter
x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_details_page/components/agent_logs/filter_log_level.tsx

Agent List - Tags Filter
x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/filter_bar/tags_filter.tsx

Agent List - Status Filter
x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_status_filter.tsx

Agent List - Policy Filter
x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/filter_bar/agent_policy_filter.tsx

Classic Stream Flyout - Template Selector
x-pack/platform/packages/shared/kbn-classic-stream-flyout/src/components/create_classic_stream_flyout/steps/select_template/select_template_step.tsx

autoops/src/apps/autoops/pages/NotificationsSettings/components/FilterModal/Fields/EventsSelection/EventsList.tsx

QA

• verify that EuiSelectableListItem matches design specs for different values of singleSelection in combination with different values of checked (renders EuiCheckboxControl if singleSelection=false and icons when singleSelection=true)
• verify there is no functional regression for multi selection EuiSelectableListItem (after updating to use EuiCheckboxControl)
• verify that EuiSelectableList group labels work as expected and match design specs
• verify that the updated overflow style for EuiSelectableList works as expected (hidden on top when unscrolled, hidden on bottom when scrolled to the end, hidden entirely when the container has no overflow)
• verify that virtualized EuiSelectableList has no functional regression (after updating to use VariableSizeList)
• verify that EuiSelectableSearch is by default rendered as compressed (32px height)
• verify that there is no Accessibility regression (list items are correctly announced in the right position/order and disabled items and group labels are skipped)

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)