Selection and navigation list UI enhancements

packages/docusaurus-theme/src/components/version_switcher/index.tsx

@@ -157,15 +157,15 @@ export const VersionSwitcher = ({
           const isCurrentVersion = version === currentVersion;
           const screenReaderVersion = pronounceVersion(version!);
 
-          const url = version === latestVersion
-            ? `${previousVersionUrl}/`
-            : `${previousVersionUrl}/v${version}/`;
+          const url =
+            version === latestVersion
+              ? `${previousVersionUrl}/`
+              : `${previousVersionUrl}/v${version}/`;
 
           return (
             <EuiListGroupItem
               css={styles.listItem}
               style={style}
-              size="xs"
               label={`v${version}`}
               aria-label={screenReaderVersion}
               href={url}

packages/eui-theme-borealis/changelogs/upcoming/9579.md

@@ -0,0 +1,7 @@
+**Breaking changes**
+
+- Removed component tokens:
+  - `components.listGroupItemBackgroundPrimaryActive`
+  - `components.listGroupItemBackgroundSubduedActive`
+  - `components.listGroupItemBackgroundHover`
+  - `components.listGroupItemBackgroundPrimaryHover`

packages/eui-theme-borealis/src/variables/_components.ts

@@ -206,23 +206,6 @@ const component_colors: _EuiThemeComponentColors = {
   headerDarkSectionItemBackgroundFocus:
     dark_background_colors.backgroundBasePrimary,
 
-  listGroupItemBackgroundPrimaryActive: computed(
-    ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect,
-    ['colors.backgroundBaseInteractiveSelect']
-  ),
-  listGroupItemBackgroundSubduedActive: computed(
-    ([backgroundBaseInteractiveSelect]) => backgroundBaseInteractiveSelect,
-    ['colors.backgroundBaseInteractiveSelect']
-  ),
-  listGroupItemBackgroundHover: computed(
-    ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
-    ['colors.backgroundBaseInteractiveHover']
-  ),
-  listGroupItemBackgroundPrimaryHover: computed(
-    ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
-    ['colors.backgroundBaseInteractiveHover']
-  ),
-
   // we don't want to inherit overrides (e.g. HCM)
   loadingSpinnerBorder: border_colors.borderBasePlain,
   loadingSpinnerHighlight: computed(

packages/eui-theme-common/changelogs/upcoming/9579.md

@@ -0,0 +1,7 @@
+**Breaking changes**
+
+- Removed types for component tokens:
+  - `components.listGroupItemBackgroundPrimaryActive`
+  - `components.listGroupItemBackgroundSubduedActive`
+  - `components.listGroupItemBackgroundHover`
+  - `components.listGroupItemBackgroundPrimaryHover`

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -91,11 +91,6 @@ export type _EuiThemeComponentColors = {
   flyoutFooterBackground: ColorModeSwitch;
   flyoutCloseButtonInsideBackground: ColorModeSwitch;
 
-  listGroupItemBackgroundPrimaryActive: ColorModeSwitch;
-  listGroupItemBackgroundSubduedActive: ColorModeSwitch;
-  listGroupItemBackgroundHover: ColorModeSwitch;
-  listGroupItemBackgroundPrimaryHover: ColorModeSwitch;
-
   loadingSpinnerBorder: ColorModeSwitch;
   loadingSpinnerHighlight: ColorModeSwitch;
 

packages/eui/changelogs/upcoming/9401.md

@@ -0,0 +1,2 @@
+- Added `EuiCheckboxControl` component which renders the presentational-only control element
+- Updated `EuiCheckbox` to use `EuiCheckboxControl`

packages/eui/changelogs/upcoming/9411.md

@@ -0,0 +1,9 @@
+- Updated `EuiSelectableList` and `EuiSelectableListItem` styles
+- Updated `EuiSelectableListItem` to use `EuiCheckboxControl` for `singleSelection=false`
+- Updated `EuiSelectableList` to use `VariableSizeList` instead of `FixedSizeList` from `react-window`
+- Updated `EuiSelectableList` overflow scroll styles to use `animation-timeline`
+- Updated `EuiSelectableSearch`'s `compressed` default value to `true`
+
+**Breaking changes**
+
+- Removed `paddingSize` prop from `EuiSelectableListItem`

packages/eui/changelogs/upcoming/9532.md

@@ -0,0 +1,2 @@
+- Updated `EuiSelectableListItem` to use the shared `EuiListItemLayout` component to align layout and styles between list components
+- Updated `EuiSelectableTemplateSitewide` option text spacing from `4px` to `2px`

packages/eui/changelogs/upcoming/9538.md

@@ -0,0 +1,6 @@
+- Updated `EuiComboBox`'s listbox and list item styles by using `EuiListItemLayout`
+- Updated the rendered output element of `EuiComboBoxOptionsList`'s list items from `button` to `li`
+- Updated `EuiComboBox` to exclude disabled options from list navigation (aligning with native `<select>` behavior)
+- Updated `EuiComboBoxOptionsList` to use `VariableSizeList` instead of `FixedSizeList` from `react-window`
+- Added opt-in `onFocusBadge` prop on `EuiComboBox` and `EuiComboBoxOptionsList`. By default the "Enter" badge is not shown anymore.
+- Updated `EuiComboBoxOptionsList`'s list item `id` to use a stable array index to ensure `aria-activedescendant` isn't stale.

packages/eui/changelogs/upcoming/9579.md

@@ -0,0 +1,11 @@
+- Updated `EuiListGroupItem` to use `EuiListItemLayout`
+
+**Breaking changes**
+
+- Removed `gutterSize` and `flush` props on `EuiListGroup`
+- Removed `size` prop on `EuiListGroup` and `EuiListGroupItem`
+- Removed component tokens:
+  - `components.listGroupItemBackgroundPrimaryActive`
+  - `components.listGroupItemBackgroundSubduedActive`
+  - `components.listGroupItemBackgroundHover`
+  - `components.listGroupItemBackgroundPrimaryHover`

packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -241,12 +241,17 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiCheckbox emotion-euiCheckbox"
               >
                 <div
-                  class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+                  class="euiCheckbox__square emotion-euiCheckbox__square"
                 >
                   <span
-                    class="emotion-euiCheckbox__icon-check"
-                    data-euiicon-type="empty"
-                  />
+                    class="EuiCheckboxControl emotion-EuiCheckboxControl-unselected"
+                  >
+                    <span
+                      class="emotion-euiCheckbox__icon-check"
+                      data-euiicon-type="empty"
+                      role="presentation"
+                    />
+                  </span>
                   <input
                     aria-label="Select all rows"
                     class="euiCheckbox__input emotion-euiCheckbox__input"
@@ -410,12 +415,17 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiCheckbox emotion-euiCheckbox"
               >
                 <div
-                  class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+                  class="euiCheckbox__square emotion-euiCheckbox__square"
                 >
                   <span
-                    class="emotion-euiCheckbox__icon-check"
-                    data-euiicon-type="empty"
-                  />
+                    class="EuiCheckboxControl emotion-EuiCheckboxControl-unselected"
+                  >
+                    <span
+                      class="emotion-euiCheckbox__icon-check"
+                      data-euiicon-type="empty"
+                      role="presentation"
+                    />
+                  </span>
                   <input
                     aria-label="Select row 1"
                     class="euiCheckbox__input emotion-euiCheckbox__input"
@@ -558,12 +568,17 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiCheckbox emotion-euiCheckbox"
               >
                 <div
-                  class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+                  class="euiCheckbox__square emotion-euiCheckbox__square"
                 >
                   <span
-                    class="emotion-euiCheckbox__icon-check"
-                    data-euiicon-type="empty"
-                  />
+                    class="EuiCheckboxControl emotion-EuiCheckboxControl-unselected"
+                  >
+                    <span
+                      class="emotion-euiCheckbox__icon-check"
+                      data-euiicon-type="empty"
+                      role="presentation"
+                    />
+                  </span>
                   <input
                     aria-label="Select row 2"
                     class="euiCheckbox__input emotion-euiCheckbox__input"
@@ -706,12 +721,17 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                 class="euiCheckbox emotion-euiCheckbox"
               >
                 <div
-                  class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+                  class="euiCheckbox__square emotion-euiCheckbox__square"
                 >
                   <span
-                    class="emotion-euiCheckbox__icon-check"
-                    data-euiicon-type="empty"
-                  />
+                    class="EuiCheckboxControl emotion-EuiCheckboxControl-unselected"
+                  >
+                    <span
+                      class="emotion-euiCheckbox__icon-check"
+                      data-euiicon-type="empty"
+                      role="presentation"
+                    />
+                  </span>
                   <input
                     aria-label="Select row 3"
                     class="euiCheckbox__input emotion-euiCheckbox__input"

packages/eui/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -8,12 +8,17 @@ exports[`EuiInMemoryTable behavior mobile header 1`] = `
     class="euiCheckbox emotion-euiCheckbox"
   >
     <div
-      class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+      class="euiCheckbox__square emotion-euiCheckbox__square"
     >
       <span
-        class="emotion-euiCheckbox__icon-check"
-        data-euiicon-type="empty"
-      />
+        class="EuiCheckboxControl emotion-EuiCheckboxControl-unselected"
+      >
+        <span
+          class="emotion-euiCheckbox__icon-check"
+          data-euiicon-type="empty"
+          role="presentation"
+        />
+      </span>
       <input
         aria-label="Select all rows"
         class="euiCheckbox__input emotion-euiCheckbox__input"

packages/eui/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap

@@ -52,12 +52,17 @@ exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
       class="euiCheckbox emotion-euiCheckbox"
     >
       <div
-        class="euiCheckbox__square emotion-euiCheckbox__square-unselected"
+        class="euiCheckbox__square emotion-euiCheckbox__square"
       >
         <span
-          class="emotion-euiCheckbox__icon-check"
-          data-euiicon-type="empty"
-        />
+          class="EuiCheckboxControl emotion-EuiCheckboxControl-unselected"
+        >
+          <span
+            class="emotion-euiCheckbox__icon-check"
+            data-euiicon-type="empty"
+            role="presentation"
+          />
+        </span>
         <input
           aria-label="aria-label"
           class="euiCheckbox__input emotion-euiCheckbox__input"

packages/eui/src/components/collapsible_nav/collapsible_nav.stories.tsx

@@ -239,8 +239,6 @@ const FullHeaderPatternExample = () => {
         <EuiCollapsibleNavGroup isCollapsible={false} background="dark">
           <EuiListGroup
             maxWidth="none"
-            gutterSize="none"
-            size="s"
             listItems={[
               {
                 label: 'Manage deployment',
@@ -271,8 +269,6 @@ const FullHeaderPatternExample = () => {
             onPinClick={removePin}
             maxWidth="none"
             color="text"
-            gutterSize="none"
-            size="s"
           />
         </EuiCollapsibleNavGroup>
       </EuiFlexItem>
@@ -312,8 +308,6 @@ const FullHeaderPatternExample = () => {
             onPinClick={addPin}
             maxWidth="none"
             color="subdued"
-            gutterSize="none"
-            size="s"
           />
         </EuiCollapsibleNavGroup>
 
@@ -366,8 +360,6 @@ const FullHeaderPatternExample = () => {
             onPinClick={addPin}
             maxWidth="none"
             color="subdued"
-            gutterSize="none"
-            size="s"
           />
         </EuiCollapsibleNavGroup>
       </EuiFlexItem>

packages/eui/src/components/collapsible_nav_beta/_kibana_solution/__snapshots__/collapsible_nav_kibana_solution.test.tsx.snap

@@ -90,18 +90,18 @@ exports[`KibanaCollapsibleNavSolution renders docked icons: popover 1`] = `
     >
       <ul
         aria-label="Navigate to solution"
-        class="euiListGroup emotion-euiListGroup-s-bordered-maxWidthDefault"
+        class="euiListGroup emotion-euiListGroup-bordered-maxWidthDefault"
         data-test-subj="kibanaSolutionSwitcherList"
       >
         <li
-          class="euiListGroupItem emotion-euiListGroupItem-s"
+          class="euiListItemLayout euiListGroupItem euiListGroupItem__text emotion-euiListItemLayout-isInteractive-euiListGroupItem-euiListGroupItem__inner-text"
+          data-test-subj="test-solution"
         >
           <span
-            class="euiListGroupItem__text emotion-euiListGroupItem__inner-s-text"
-            data-test-subj="test-solution"
+            class="euiListItemLayout__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiListGroupItem__label emotion-euiListGroupItem__label-truncate"
+              class="euiListItemLayout__text euiListGroupItem__label emotion-euiListItemLayout__text-truncate"
               title="Some other solution"
             >
               Some other solution
@@ -110,16 +110,17 @@ exports[`KibanaCollapsibleNavSolution renders docked icons: popover 1`] = `
         </li>
       </ul>
       <ul
-        class="euiListGroup emotion-euiListGroup-s-maxWidthDefault-euiCollapsibleNavKibanaSolution__secondaryItems"
+        class="euiListGroup emotion-euiListGroup-maxWidthDefault-euiCollapsibleNavKibanaSolution__secondaryItems"
       >
         <li
-          class="euiListGroupItem emotion-euiListGroupItem-s"
+          class="euiListItemLayout euiListGroupItem euiListGroupItem__text emotion-euiListItemLayout-isInteractive-euiListGroupItem-euiListGroupItem__inner-text"
+          data-test-subj="euiListItemLayout"
         >
           <span
-            class="euiListGroupItem__text emotion-euiListGroupItem__inner-s-text"
+            class="euiListItemLayout__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiListGroupItem__label emotion-euiListGroupItem__label-truncate"
+              class="euiListItemLayout__text euiListGroupItem__label emotion-euiListItemLayout__text-truncate"
               title="Some other popover content"
             >
               Some other popover content
@@ -215,18 +216,18 @@ exports[`KibanaCollapsibleNavSolution renders with a solution switcher: popover
       </div>
       <ul
         aria-label="Navigate to solution"
-        class="euiListGroup emotion-euiListGroup-s-bordered-maxWidthDefault"
+        class="euiListGroup emotion-euiListGroup-bordered-maxWidthDefault"
         data-test-subj="kibanaSolutionSwitcherList"
       >
         <li
-          class="euiListGroupItem emotion-euiListGroupItem-s"
+          class="euiListItemLayout euiListGroupItem euiListGroupItem__text emotion-euiListItemLayout-isInteractive-euiListGroupItem-euiListGroupItem__inner-text"
+          data-test-subj="test-solution"
         >
           <span
-            class="euiListGroupItem__text emotion-euiListGroupItem__inner-s-text"
-            data-test-subj="test-solution"
+            class="euiListItemLayout__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiListGroupItem__label emotion-euiListGroupItem__label-truncate"
+              class="euiListItemLayout__text euiListGroupItem__label emotion-euiListItemLayout__text-truncate"
               title="Some other solution"
             >
               Some other solution
@@ -235,16 +236,17 @@ exports[`KibanaCollapsibleNavSolution renders with a solution switcher: popover
         </li>
       </ul>
       <ul
-        class="euiListGroup emotion-euiListGroup-s-maxWidthDefault-euiCollapsibleNavKibanaSolution__secondaryItems"
+        class="euiListGroup emotion-euiListGroup-maxWidthDefault-euiCollapsibleNavKibanaSolution__secondaryItems"
       >
         <li
-          class="euiListGroupItem emotion-euiListGroupItem-s"
+          class="euiListItemLayout euiListGroupItem euiListGroupItem__text emotion-euiListItemLayout-isInteractive-euiListGroupItem-euiListGroupItem__inner-text"
+          data-test-subj="euiListItemLayout"
         >
           <span
-            class="euiListGroupItem__text emotion-euiListGroupItem__inner-s-text"
+            class="euiListItemLayout__content emotion-euiListItemLayout__content"
           >
             <span
-              class="euiListGroupItem__label emotion-euiListGroupItem__label-truncate"
+              class="euiListItemLayout__text euiListGroupItem__label emotion-euiListItemLayout__text-truncate"
               title="Some other popover content"
             >
               Some other popover content

packages/eui/src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.tsx

@@ -91,7 +91,7 @@ export const KibanaCollapsibleNavSolution: FunctionComponent<
     // Only close the popover if the item is a clickable link or button
     const target = event.target as HTMLElement;
     const childItem = target.closest('.euiListGroupItem');
-    if (['A', 'BUTTON'].includes(childItem?.firstElementChild?.tagName || '')) {
+    if (['A', 'BUTTON'].includes(childItem?.tagName || '')) {
       setIsSolutionSwitcherOpen(false);
     }
   }, []);
@@ -103,15 +103,13 @@ export const KibanaCollapsibleNavSolution: FunctionComponent<
           data-test-subj="kibanaSolutionSwitcherList"
           aria-label={solutionSolutionGroupLabel}
           listItems={primaryItems}
-          size="s"
           bordered
           onClick={closeSolutionPopover}
         />
         {secondaryItems.length > 0 && (
           <>
             <EuiListGroup
               listItems={secondaryItems}
-              size="s"
               css={styles.euiCollapsibleNavKibanaSolution__secondaryItems}
               onClick={closeSolutionPopover}
             />