[EuiComboBox] support append and prepend for group labels (#7800)

packages/eui/.storybook/loki.ts

@@ -26,6 +26,11 @@ export const LOKI_SELECTORS = {
    * Portal element content selector
    */
   portal: '[data-euiportal="true"]',
+  /**
+   * Body selector
+   * TODO: remove when LOKI_SELECTORS.portal selector works as expected again
+   */
+  body: 'body',
 } as const;
 
 /**

packages/eui/changelogs/upcoming/7800.md

@@ -0,0 +1,2 @@
+- Updated `EuiComboBox` to support rendering `option.append` and `option.prepend` in group labels
+

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

@@ -12,9 +12,11 @@ import { action } from '@storybook/addon-actions';
 import { userEvent, waitFor, within, expect } from '@storybook/test';
 
 import { LOKI_SELECTORS, lokiPlayDecorator } from '../../../.storybook/loki';
-import { EuiComboBox, EuiComboBoxProps } from './combo_box';
-import { EuiComboBoxOptionMatcher } from './types';
 import { EuiCode } from '../code';
+import { EuiFlexItem } from '../flex';
+
+import { EuiComboBoxOptionMatcher } from './types';
+import { EuiComboBox, EuiComboBoxProps } from './combo_box';
 
 const toolTipProps = {
   toolTipContent: 'This is a tooltip!',
@@ -85,7 +87,8 @@ export const WithTooltip: Story = {
     },
     loki: {
       // popover and tooltip are rendered in a portal
-      chromeSelector: LOKI_SELECTORS.portal,
+      // LOKI_SELECTOR.portal currently doesn't work so we use body instead
+      chromeSelector: LOKI_SELECTORS.body,
     },
   },
   args: {
@@ -160,6 +163,65 @@ export const CustomMatcher: Story = {
   },
 };
 
+export const Groups: Story = {
+  parameters: {
+    controls: {
+      include: ['options'],
+    },
+    loki: {
+      chromeSelector: LOKI_SELECTORS.body,
+    },
+  },
+  args: {
+    options: [
+      { label: 'Group 1', isGroupLabelOption: true },
+      ...[...options].splice(0, 3),
+      {
+        label: 'Group 2',
+        isGroupLabelOption: true,
+        prepend: '#prepend ',
+        append: (
+          <EuiFlexItem css={{ alignItems: 'flex-end' }}>(append)</EuiFlexItem>
+        ),
+      },
+      ...[...options].splice(3, options.length),
+    ],
+    autoFocus: true,
+  },
+  render: (args) => <StatefulComboBox {...args} />,
+};
+
+export const NestedOptionsGroups: Story = {
+  parameters: {
+    controls: {
+      include: ['options'],
+    },
+    loki: {
+      chromeSelector: LOKI_SELECTORS.body,
+    },
+  },
+  args: {
+    options: [
+      {
+        label: 'Group 1',
+        isGroupLabelOption: true,
+        options: [...options].splice(0, 3),
+      },
+      {
+        label: 'Group 2',
+        isGroupLabelOption: true,
+        prepend: '#prepend ',
+        append: (
+          <EuiFlexItem css={{ alignItems: 'flex-end' }}>(append)</EuiFlexItem>
+        ),
+        options: [...options].splice(3, options.length),
+      },
+    ],
+    autoFocus: true,
+  },
+  render: (args) => <StatefulComboBox {...args} />,
+};
+
 const StatefulComboBox = ({
   singleSelection,
   onCreateOption,

packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_title.scss

@@ -3,9 +3,10 @@
  *    works.
  */
 .euiComboBoxTitle {
-  font-size: $euiFontSizeXS;
-  padding: ($euiSizeXS + $euiSizeS - 1px) $euiSizeS $euiSizeXS; /* 1 */
+  display: flex;
   width: 100%;
+  padding: ($euiSizeXS + $euiSizeS - 1px) $euiSizeS $euiSizeXS; /* 1 */
+  font-size: $euiFontSizeXS;
   font-weight: $euiFontWeightBold;
   color: $euiColorFullShade;
 }

packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx

@@ -171,7 +171,11 @@ export class EuiComboBoxOptionsList<T> extends Component<
     if (isGroupLabelOption) {
       return (
         <div key={key ?? label} style={style}>
-          <EuiComboBoxTitle>{label}</EuiComboBoxTitle>
+          <EuiComboBoxTitle>
+            {prepend}
+            {label}
+            {append}
+          </EuiComboBoxTitle>
         </div>
       );
     }

packages/eui/src/components/combo_box/matching_options.ts

@@ -169,6 +169,8 @@ export const getMatchingOptions = <T>({
           key: option.key,
           label: option.label,
           isGroupLabelOption: true,
+          append: option.append,
+          prepend: option.prepend,
         });
         // Add matching options for group
         // use concat over spreading to support large arrays - https://mathiasbynens.be/demo/javascript-argument-count

packages/eui/src/components/selectable/selectable_list/selectable_list.stories.tsx

@@ -6,14 +6,18 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import {
   enableFunctionToggleControls,
   moveStorybookControlsToCategory,
 } from '../../../../.storybook/utils';
+import { EuiFlexItem } from '../../flex';
+import { EuiIcon } from '../../icon';
 import { EuiSelectableOption } from '../selectable_option';
+
 import { EuiSelectableList, EuiSelectableListProps } from './selectable_list';
 
 const options: EuiSelectableOption[] = [
@@ -107,3 +111,39 @@ export const Playground: Story = {
     },
   },
 };
+
+export const Groups: Story = {
+  parameters: {
+    controls: {
+      include: ['options'],
+    },
+  },
+  args: {
+    options: [
+      { label: 'Group 1', isGroupLabel: true },
+      ...[...options].splice(0, 4),
+      {
+        label: 'Group 2',
+        isGroupLabel: true,
+        prepend: (
+          <EuiIcon
+            type="warning"
+            css={({ euiTheme }) => ({ marginRight: euiTheme.size.s })}
+          />
+        ),
+        append: (
+          <EuiFlexItem css={{ alignItems: 'flex-end' }}>(append)</EuiFlexItem>
+        ),
+      },
+      ...[...options].splice(4, options.length),
+    ],
+    activeOptionIndex: 0,
+    makeOptionId: (index) => `selectable_list_item-${index}`,
+    // ensuring that onOptionClick triggers an action as it's
+    // only called through setActiveOptionIndex callback
+    setActiveOptionIndex: (index, callback) => {
+      callback?.();
+      action('setActiveOptionIndex')(index);
+    },
+  },
+};